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.connect("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.rotation = startRotation;
72 myActor2.rotation = 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.
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 = "easeInOutSine";
93 anim.animateTo(myActor1, "rotation", endRotation, animOptions);
95 // Delay the myActor2 by a second
96 animOptions.delay = 0.0;
97 animOptions.alpha = "linear";
98 anim.animateTo(myActor2, "positionZ", 0, animOptions);
100 // rotate back to correct orientation
101 animOptions.alpha = "easeInOutSine";
102 anim.animateTo(myActor2, "rotation", 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 actor
119 - magnifies and color shifts the image using a fragment shader
121 <img src="../assets/img/shader-animation.png">
125 // create an image actor in the centre of the stage
126 createImageActor = function() {
128 var image = new dali.ResourceImage({ url:getImageDirectory()+"gallery-medium-50.jpg"});
129 var imageActor = new dali.ImageActor( image );
130 imageActor.parentOrigin = dali.CENTER;
131 dali.stage.add( imageActor );
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 " uniform lowp vec4 uColorShift; \
144 uniform lowp vec2 uScale; \
148 gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
152 // geometryType = "image", "text", "mesh", "textured-mesh"
153 // fragmentPrefex ="" // prefix ( optional)
154 // fragmentShader = "" // fragment shader ( optional)
155 // geometryHints = [ "gridX", "gridY", "grid","depthBuffer","blending" ] ( optional)
157 var shaderOptions = {
158 geometryType: "image",
159 fragmentShader: fragShader,
160 geometryHints: ["blending"]
163 // create a new shader effect
164 var shader = new dali.ShaderEffect(shaderOptions);
166 // add the color shift uniform so we can animate it
167 // default the color shift to zero, so it has no effect
168 shader.setUniform("uColorShift", [0, 0, 0, 0]);
170 // add the zoom uniform so we can animate it
171 // default to 1,1 so no zoom is applied
172 var scale = new dali.Vector2([1, 1]);
173 shader.setUniform("uScale", scale);
178 createShaderAnimation = function( shader, color, zoom, duration, delay )
180 var shaderAnim = new dali.Animation(duration+delay);
183 alpha: "doubleEaseInOutSine60",
188 // animate the color uniform
189 shaderAnim.animateTo( shader, "uColorShift", color, animOptions);
191 // zoom in and out of the image while applying the color shift
192 shaderAnim.animateTo( shader, "uScale", zoom, animOptions);
197 var imageActor = createImageActor();
198 var shaderEffect = createColorShiftAndZoomEffect();
200 // assign the shader effect to the actor ( it can be assigned to multiple actors).
201 imageActor.setShaderEffect( shaderEffect );
203 // create the shader animation
204 var zoom = [0.5,0.5]; // zoom into the image by 2
205 var color = dali.COLOR_BLUE; // color shift the image to blue
206 var duration = 5; // 5 seconds
207 var delay = 5; // wait 1 second before starting
208 var shaderAnim = createShaderAnimation( shaderEffect, color,zoom, duration, delay);
210 // also rotate the imageActor 90 degrees at the same time.
211 var rotation = new dali.Rotation(90,0,0,1);
212 shaderAnim.animateTo(imageActor, "rotation", rotation, { alpha:"linear", duration:duration, delay:delay });
220 ### Animation alpha functions
222 | Name | Description |
223 |--------------------|--------------|
226 |square |Square (x^2) |
227 |reverse |Reverse linear |
228 |easeIn |Speeds up and comes to a sudden stop |
229 |easeOut |Sudden start and slows to a gradual stop|
230 |easeInOut |Speeds up and slows to a gradual stop|
231 |easeInSine |Speeds up and comes to a sudden stop|
232 |easeOutSine |Sudden start and slows to a gradual stop|
233 |easeInOutSine |Speeds up and slows to a gradual stop |
234 |easeInSine33 |Speeds up and comes to a sudden stop |
235 |easeOutSine33 |Sudden start and slows to a gradual stop |
236 |easeInOutSine33 |Speeds up and slows to a gradual stop |
237 |easeInOutSine50 |Speeds up and slows to a gradual stop |
238 |easeInOutSine60 |Speeds up and slows to a gradual stop |
239 |easeInOutSine70 |Speeds up and slows to a gradual stop |
240 |easeInOutSine80 |Speeds up and slows to a gradual stop |
241 |easeInOutSine90 |Speeds up and slows to a gradual stop |
242 |doubleEaseInOutSine6|Speeds up and slows to a gradual stop, then speeds up again and slows to a gradual stop |
243 |easeOutQuint50 |Sudden start and slows to a gradual stop |
244 |easeOutQuint80 |Sudden start and slows to a gradual stop |
245 |bounce |Sudden start, loses momentum and ** Returns to start position ** |
246 |bounceBack |Sudden start, loses momentum and returns to exceed start position ** Returns to start position ** |
247 |easeInBack |Slow start, exceed start position and quickly reach destination |
248 |easeOutBack |Sudden start, exceed end position and return to a gradual stop|
249 |easeInOutBack |Slow start, exceed start position, fast middle, exceed end position and return to a gradual stop|
250 |sin |full 360 revolution ** Returns to start position ** |
251 |sin2x |full 720 revolution ** Returns to start position ** |