I have a simple MOVE animation effect on my component in MXML. I need this animation to run with same speed (not accelerate at start, not slowly at the end animation (its default). I need one speed. Is this possible as set some parameter in MOVE?
Use an easing function. In this case you'll be looking for Linear.easeIn or Linear.ease out
Some links:
Adobe - Easing Functions
Related
I would like to know a way to stop the swiperjs transition at the exact spot while it's transitioning.
What I currently have is a continuous autoplay loop combined with transition-timing-function : linear; on the swiper wrapper. This makes it look like it's constantly sliding one way in a fluent motion. On the background it is however always transitioning from slide to slide (and the transition-timing property makes it look fluent). What I would like to implement is when I hover the swiper, it stops at the exact position and when I leave the mouse it starts again. I have already implemented a fix to make it stop at the exact position using this link. When hovering out though, it moves too fast to the next translate3d point. This is because when starting it again, it takes the stopped position as the starting position of the transition, which is of different length so it moves at a different speed.
I've already gone as far as implementing an interval with the same speed count as the slider property to determine the progress of the animation from point to point so to from there be able to determine the transition-duration. For example when the slide transition is half way (in my case 3.5 seconds later as the speed I set is 7 seconds), I set the transition duration to 3500 on the swiper wrapper so that it moves at the same speed to the next point when hovering out.
This however is very buggy and relies on a continuous counter that starts upon loading the page (in mounted()), which isn't correct anymore after hovering a few times.
It's maybe a bit of a complex story but I would like to know if there are other ways of implementing this functionality, or how to somehow be able to know the current progression of the transition.
I'm building this in Nuxt 3 (vue.js framework) using the vue swiperjs library.
Thanks in advance
How can i achieve this kind of animation effect (see link below) and where do I need to start learning, is this part of css or html5 or plugins, etc..
I have a startup knowledge in css and html5, but I have no idea how to achieve the effect.
http://www.terredevenements.com/en/
*the effect i'm referring to is the movement of the foreground images while the mouse hovers and still maintaining its background to be static
This effect is called "parallax scrolling"
The basic idea is to layer images on top of each other and move them simultaneously but at different speeds, foreground moving faster than background.
Capturing and utilizing mouse events can be done with javascript/jQuery, and the animation can also be done with those languages or in combination with CSS3 animations.
There are quite a few jQuery plugins out there that can help you quickly achieve this effect.
See parallax.js
Or for more plugins: http://bashooka.com/coding/best-jquery-parallax-plugins/
Has anyone ever successfully recorded in-browser animation?
My goal is to somehow save or export keyframe animations as a gif to showcase fun projects in online portfolios where only images and text are supported.
I tested RecordIt, but it's not quite up to par.
Aware that animated mockups can be built in After Effects or even Photoshop... but it's pretty tedious matching them up to the live keyframes. ( However, if anyone has a good tutorial for this... bring it on! )
Crazy or possible?
As you ask of recording the animation I assume you are already aware you can't simply save them from the browser so far.
That said, depending on the OS you are on you can use LICEcap (MS Windows or Apple OSX), GifCam or ScreenToGif (MS Windows only), Byzanz or Peek (Linux only).
The process is quite straightforward with very few easy steps.
For a LICEcap example see VividD answer to similar other question here on StackOverflow; the principle is the same for every other mentioned software.
Finally, I think you might find this interesting also (example involving use of GifCam + Photoshop).
You can install Camtasia and record the gif. Then you can directly produce it as a gif (which I've never tried) or produce it as a video and then convert it into a gif using Photoshop
You can try to export your composition with github.com/davidderaedt/after2css
AfterEffects CSS Animation Exporter
This After Effects script exports compositions to CSS keyframe animations.
Limits & known issues
Nested compositions are not supported.
- Expressions are not supported and should be converted to keyframes before exports.
- Only position, scale, opacity and rotation transform animations are supported.
- Anchor points are converted to transform-origin but cannot be animated.
- Linear easings are converted to linear, other easings are converted to default ease. Cubic bezier curves are not supported at this point. Hold keyframes are simulated and should work as expected.
- Position animation use top/left properties where tranlations would provide better performanc
I want to display an animated arrow that goes back and forth (using flex 4). I'm using the following move effect :
<s:Move id="animateArrow" target="{arrow}" duration="750" repeatCount="0" repeatBehavior="reverse" yFrom="{arrow.y}" yTo="{arrow.y - 25}"/>
When needed, I then play the effect:
animateArrow.end();
animateArrow.play();
The animation works as intended but it seems to be a huge resource hog while playing. Any logic that happens while playing the animateArrow effect takes a very long time to load. Is there a better way of doing this?
Any effect will take resources. If it's taking more cpu than anticipated, you might want to look at the object you're moving, it's container, and the code it might affect.
Personally, I wouldn't use Adobe's animation library as they aren't very optimized. I would look at TweenMax instead.
I have a Flex application where some interactions cause many objects to require visual updates all at once. These updates translate into state changes for many MXML based components which have state based transitions. The transitions look great when just a handful of the components animate at the same time... but when all of them animate at once... the Flash Player just can't keep up.
Any ideas on how to create something of an animation pipeline so that everything can have a chance to keep up? Or maybe some other solution?
Did you try working with suspendBackgroundProcessing property of Effect or disableLayout property of Animate class descendants? You can define them on MXML animation definition nodes.
Personally, I try to stay away from the Adobe effects library as they're slow and not all that good. If you want animation 'groupings', consecutive animations, or even animation timelines, I would suggest you use TweenMax.