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.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.
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, "orientation", 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, "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 actor
119 - magnifies and color shifts the image using a fragment shader
121 ![ ](../assets/img/shaders/shader-animation.png)
126 // create an image actor in the centre of the stage
127 createImageActor = function() {
129 var image = new dali.ResourceImage({ url:getImageDirectory()+"gallery-medium-50.jpg"});
130 var imageActor = new dali.ImageActor( image );
131 imageActor.parentOrigin = dali.CENTER;
132 dali.stage.add( imageActor );
137 // Creates a simple fragment shader that has 2 uniforms.
138 // uColorShift which can add a color to pixel
139 // uScale which can simulate zooming into the texture
141 createColorShiftAndZoomEffect = function() {
144 " uniform lowp vec4 uColorShift; \
145 uniform lowp vec2 uScale; \
149 gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
153 // geometryType = "image", "text", "mesh", "textured-mesh"
154 // fragmentPrefex ="" // prefix ( optional)
155 // fragmentShader = "" // fragment shader ( optional)
156 // geometryHints = [ "gridX", "gridY", "grid","depthBuffer","blending" ] ( optional)
158 var shaderOptions = {
159 geometryType: "image",
160 fragmentShader: fragShader,
161 geometryHints: ["blending"]
164 // create a new shader effect
165 var shader = new dali.ShaderEffect(shaderOptions);
167 // add the color shift uniform so we can animate it
168 // default the color shift to zero, so it has no effect
169 shader.setUniform("uColorShift", [0, 0, 0, 0]);
171 // add the zoom uniform so we can animate it
172 // default to 1,1 so no zoom is applied
173 var scale = new dali.Vector2([1, 1]);
174 shader.setUniform("uScale", scale);
179 createShaderAnimation = function( shader, color, zoom, duration, delay )
181 var shaderAnim = new dali.Animation(duration+delay);
184 alpha: "doubleEaseInOutSine60",
189 // animate the color uniform
190 shaderAnim.animateTo( shader, "uColorShift", color, animOptions);
192 // zoom in and out of the image while applying the color shift
193 shaderAnim.animateTo( shader, "uScale", zoom, animOptions);
198 var imageActor = createImageActor();
199 var shaderEffect = createColorShiftAndZoomEffect();
201 // assign the shader effect to the actor ( it can be assigned to multiple actors).
202 imageActor.setShaderEffect( shaderEffect );
204 // create the shader animation
205 var zoom = [0.5,0.5]; // zoom into the image by 2
206 var color = dali.COLOR_BLUE; // color shift the image to blue
207 var duration = 5; // 5 seconds
208 var delay = 5; // wait 1 second before starting
209 var shaderAnim = createShaderAnimation( shaderEffect, color,zoom, duration, delay);
211 // also rotate the imageActor 90 degrees at the same time.
212 var rotation = new dali.Rotation(90,0,0,1);
213 shaderAnim.animateTo(imageActor, "orientation", rotation, { alpha:"linear", duration:duration, delay:delay });
221 ### Animation alpha functions
223 | Name | Description |
224 |--------------------|--------------|
227 |square |Square (x^2) |
228 |reverse |Reverse linear |
229 |easeIn |Speeds up and comes to a sudden stop |
230 |easeOut |Sudden start and slows to a gradual stop|
231 |easeInOut |Speeds up and slows to a gradual stop|
232 |easeInSine |Speeds up and comes to a sudden stop|
233 |easeOutSine |Sudden start and slows to a gradual stop|
234 |easeInOutSine |Speeds up and slows to a gradual stop |
235 |easeInSine33 |Speeds up and comes to a sudden stop |
236 |easeOutSine33 |Sudden start and slows to a gradual stop |
237 |easeInOutSine33 |Speeds up and slows to a gradual stop |
238 |easeInOutSine50 |Speeds up and slows to a gradual stop |
239 |easeInOutSine60 |Speeds up and slows to a gradual stop |
240 |easeInOutSine70 |Speeds up and slows to a gradual stop |
241 |easeInOutSine80 |Speeds up and slows to a gradual stop |
242 |easeInOutSine90 |Speeds up and slows to a gradual stop |
243 |doubleEaseInOutSine6|Speeds up and slows to a gradual stop, then speeds up again and slows to a gradual stop |
244 |easeOutQuint50 |Sudden start and slows to a gradual stop |
245 |easeOutQuint80 |Sudden start and slows to a gradual stop |
246 |bounce |Sudden start, loses momentum and ** Returns to start position ** |
247 |bounceBack |Sudden start, loses momentum and returns to exceed start position ** Returns to start position ** |
248 |easeInBack |Slow start, exceed start position and quickly reach destination |
249 |easeOutBack |Sudden start, exceed end position and return to a gradual stop|
250 |easeInOutBack |Slow start, exceed start position, fast middle, exceed end position and return to a gradual stop|
251 |sin |full 360 revolution ** Returns to start position ** |
252 |sin2x |full 720 revolution ** Returns to start position ** |