Animations change layer properties over time. Animatable properties are a layer's position, scale, rotation or opacity (transparency).
Certain animatable properties are specific to some layers, such as the fontsize for text layers. Animations are rendered
over the duration specified in the
|Layer Type||Property||Value Type|
|All Layers||scale||Point (0..1)|
|All Layers||opacity||Number (0..1)|
Motion blur is the apparent streaking of rapidly moving objects in a still image or a sequence of images such as a movie or animation. It results when the image being recorded changes during the recording of a single exposure, either due to rapid movement or long exposure. To simulate motion blur in animations, set the
motionblur attribute to a value larger than
0 but try to keep the value small (less than 5) because it is computational expensive, resulting in longer render times
Nothing in nature moves linearly from one point to another. In reality, things tend to accelerate or decelerate as they move. In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively. Sometimes the two are combined, which is called "ease in out." Easing, then, is really the process of making the animation less severe or pronounced.
You specify easing with the
easeout attributes in
<transition> tags. The attributes can either be
false or define two floating values in the range 0..1 and denote the speed and influence of the starting or ending keyframe. Default speed/influence values are "0.333, 0" for enabled easing and "0, 0" for disabled easings.
Animations without any kind of easing are referred to as linear. As time moves along, the value increases in equal amounts. With linear motion, things tend to feel robotic and unnatural, and this is something that users find jarring. Generally speaking, you should avoid linear motion.
Easing out causes the animation to start more quickly than linear ones, and it also has deceleration at the end. Easing out is typically the best for user feedback, because the fast start gives your animations a feeling of responsiveness while still allowing for a natural slowdown at the end.
Ease-in animations start slowly and end fast, which is the opposite of ease-out animations. This kind of animation is like a heavy stone falling, where it starts slowly and hits the ground quickly with a deadening thump. From an interaction point of view, however, ease-ins can feel a little unusual because of their abrupt end; things that move in the real world tend to decelerate rather than simply stopping suddenly. Ease-ins also have the detrimental effect of feeling sluggish when starting.
Easing both in and out is akin to a car accelerating and decelerating and, used judiciously, can provide a more dramatic effect than just easing out. Do not use an overly long animation duration, because of the sluggishness of an ease-in start to the animation. Something in the range of 300-500ms is typically suitable, but the exact number depends heavily on the feel of your project. That said, because of the slow start, fast middle, and slow end, there is increased contrast in the animation, which can be quite satisfying for users.
<movie width="640" height="360"> <scene> <video url="https://cdn.impossible.io/xml/005.mov"/> <text size="60" color="#ffff00" content="Slide in while fading in"> <animation type="slidein" duration="0.9s"/> <animation type="fadein" duration="0.9s"/> </text> </scene> </movie>
<movie width="640" height="360"> <scene duration="2s"> <video url="https://cdn.impossible.io/xml/005.mov"/> <text size="30" color="#ffff00" content="Drop-in and Soft Bounce Back" xalign="center"> <animation type="custom" duration="30" motionblur="3"> <keyframe time="0" position="0, -200"/> <keyframe time="29" position="0, 0" easeout="-0.4, 1"/> </animation> </text> </scene> </movie>