5 DALi Animation can be used to animate the properties of any number of objects, typically Actors.
7 The API supports functionality such as:
9 - {{#crossLink "animation/play:method"}}{{/crossLink}}
10 - {{#crossLink "animation/pause:method"}}{{/crossLink}}
11 - {{#crossLink "animation/stop:method"}}{{/crossLink}}
12 - {{#crossLink "animation/setLooping:method"}}{{/crossLink}}, set whether the animation should loop
13 - {{#crossLink "animation/setSpeedFactor:method"}}{{/crossLink}}, speeds / slows down an animation
14 - {{#crossLink "animation/setPlayRange:method"}}{{/crossLink}}, only play part of the animation between a set range
15 - Key frame support. See {{#crossLink "animation/animateBetween:method"}}{{/crossLink}}
16 - Path Animations. See {{#crossLink "path"}}Path {{/crossLink}}
17 - Signals to be informed when an animation has finished.
18 - animate multiple properties, owned by multiple objects with a single animation object
20 ### Simple example of moving an actor to a set position
23 var myActor = new dali.TextActor( "hello world" );
25 myActor.parentOrigin = dali.CENTER;
26 dali.stage.add( myActor );
28 var anim = new dali.Animation( 2 ); // 2 seconds
30 // we're animation the property position of the actor.
31 anim.animateTo( myActor, "position", [100, 100, 0] );
33 function finished( animation )
35 log("Animation finished \n");
38 anim.on("finished", finished );
43 ### Multiple actor example
46 // Following demonstrates:
47 // - aimating multiple properties on an object (actor properties in this example)
48 // - animating multiple objects at the same time (2 actors in the example)
49 // - using the optional, animation options object to set a delay time and alpha function (easing)
51 // Sets the original position to be rotated and pushed into the distance
53 var myActor1 = new dali.TextActor( "Hello" );
54 var myActor2 = new dali.TextActor( "from DALi" );
56 // centre both actors to the middle of the screen
57 myActor1.parentOrigin = dali.CENTER;
58 myActor2.parentOrigin = dali.CENTER;
59 myActor1.scale=[2,2,1]; // scale up x and y by 2
60 myActor2.scale=[2,2,1]; // scale up x and y by 2
63 // reposition them to the left / right, and push them away from the camera
64 myActor1.position=[-100,0,-2000]; // x = -100, y = 0 , z = -2000
65 myActor2.position=[ 100,0,-2000]; // x = 100, y = 0 , z = -2000
67 // start with actor rotated by 180 about x & y axis, so they can twist into place
68 function createAnimation() {
70 var startRotation = new dali.Rotation(180, -180, 0);
71 myActor1.orientation = startRotation;
72 myActor2.orientation = startRotation;
74 dali.stage.add( myActor1 );
75 dali.stage.add( myActor2 );
78 var anim = new dali.Animation(1); // default duration is increased if length of all animations is greater than it.
81 alpha: dali.ALPHA_FUNCTION_LINEAR,
82 delay: 0.5, // used to delay the start of the animation
83 duration: 3, // duration of the animation
86 // move myActor1 z position back to 0
87 anim.animateTo(myActor1, "positionZ", 0, animOptions);
89 // rotate back to correct orientation
90 var endRotation = new dali.Rotation(0,0,0);
92 animOptions.alpha = dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE;
93 anim.animateTo(myActor1, "orientation", endRotation, animOptions);
95 // Delay the myActor2 by a second
96 animOptions.delay = 0.0;
97 animOptions.alpha = dali.ALPHA_FUNCTION_LINEAR;
98 anim.animateTo(myActor2, "positionZ", 0, animOptions);
100 // rotate back to correct orientation
101 animOptions.alpha = dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE;
102 anim.animateTo(myActor2, "orientation", endRotation, animOptions);
108 var anim = createAnimation();
114 ### GL-ES shader animation example
116 The example below does the following with a single animation object:
118 - rotates the image view
119 - magnifies and color shifts the image using a fragment shader
121 ![ ](../assets/img/shaders/shader-animation.png)
126 // Creates an image view in the centre of the stage
127 createImageView = function() {
129 var imageView = new dali.Control("ImageView");
130 imageView.parentOrigin = dali.CENTER;
131 dali.stage.add( imageView );
136 // Creates a simple fragment shader that has 2 uniforms.
137 // uColorShift which can add a color to pixel
138 // uScale which can simulate zooming into the texture
140 createColorShiftAndZoomEffect = function() {
143 "varying vec2 vTexCoord;\
144 uniform sampler2D sTexture;\
145 uniform vec4 uColor;\
146 uniform lowp vec4 uColorShift;\
147 uniform lowp vec2 uScale;\
150 gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
153 // vertexShader = ""; // vertex shader ( optional)
154 // fragmentShader = ""; // fragment shader ( optional)
155 // hints = // shader hints ( optional)
156 // [ "requiresSelfDepthTest", // Expects depth testing enabled
157 // "outputIsTransparent", // Might generate transparent alpha from opaque inputs
158 // "outputIsOpaque", // Outputs opaque colors even if the inputs are transparent
159 // "modifiesGeometry" ]; // Might change position of vertices, this option disables any culling optimizations
162 "fragmentShader": fragShader,
163 "hints" : "outputIsTransparent"
169 createShaderAnimation = function( imageView, color, zoom, duration, delay )
171 var shaderAnim = new dali.Animation(duration+delay);
174 alpha: dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE,
179 // animate the color uniform
180 shaderAnim.animateTo( imageView, "uColorShift", color, animOptions);
182 // zoom in and out of the image while applying the color shift
183 shaderAnim.animateTo( imageView, "uScale", zoom, animOptions);
188 var imageView = createImageView();
190 var shader = createColorShiftAndZoomEffect();
193 "rendererType" : "image",
194 "imageUrl" : getImageDirectory()+"gallery-medium-50.jpg",
198 imageView.image = image; // assign the shader to imageView
200 // register the color shift property so we can animate it
201 // default the color shift to zero, so it has no effect
202 imageView.registerAnimatableProperty("uColorShift", [0, 0, 0, 0]);
204 // register the zoom property so we can animate it
205 // default to 1,1 so no zoom is applied
206 imageView.registerAnimatableProperty("uScale", [1, 1]);
208 // create the shader animation
209 var zoom = [0.5,0.5]; // zoom into the image by 2
210 var color = dali.COLOR_BLUE; // color shift the image to blue
211 var duration = 5; // 5 seconds
212 var delay = 5; // wait 1 second before starting
213 var shaderAnim = createShaderAnimation( imageView, color,zoom, duration, delay);
215 // also rotate the imageView 90 degrees at the same time.
216 var rotation = new dali.Rotation(90,0,0,1);
217 shaderAnim.animateTo(imageView, "orientation", rotation, { alpha:dali.ALPHA_FUNCTION_LINEAR, duration:duration, delay:delay });
225 ### Animation alpha functions
227 | Name | Description |
228 |----------------------------------|----------------|
229 |ALPHA_FUNCTION_DEFAULT |Linear |
230 |ALPHA_FUNCTION_LINEAR |Linear |
231 |ALPHA_FUNCTION_REVERSE |Reverse linear |
232 |ALPHA_FUNCTION_EASE_IN_SQUARE |Speeds up and comes to a sudden stop (Square) |
233 |ALPHA_FUNCTION_EASE_OUT_SQUARE |Sudden start and slows to a gradual stop (Square) |
234 |ALPHA_FUNCTION_EASE_IN |Speeds up and comes to a sudden stop |
235 |ALPHA_FUNCTION_EASE_OUT |Sudden start and slows to a gradual stop|
236 |ALPHA_FUNCTION_EASE_IN_OUT |Speeds up and slows to a gradual stop|
237 |ALPHA_FUNCTION_EASE_IN_SINE |Speeds up and comes to a sudden stop|
238 |ALPHA_FUNCTION_EASE_OUT_SINE |Sudden start and slows to a gradual stop|
239 |ALPHA_FUNCTION_EASE_IN_OUT_SINE |Speeds up and slows to a gradual stop |
240 |ALPHA_FUNCTION_BOUNCE |Sudden start, loses momentum and ** Returns to start position ** |
241 |ALPHA_FUNCTION_SIN |full 360 revolution ** Returns to start position ** |
242 |ALPHA_FUNCTION_EASE_OUT_BACK |Sudden start, exceed end position and return to a gradual stop|