plugins/dali-script-v8/docs/content/animation.js

   1 /**
   2  *
   3 ## Animation API
   4
   5    DALi Animation can be used to animate the properties of any number of objects, typically Actors.
   6
   7 The API supports functionality such as:
   8
   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
  19
  20 ### Simple example of moving an actor to a set position
  21
  22 ```
  23 var myActor = new dali.TextActor( "hello world" );
  24
  25 myActor.parentOrigin = dali.CENTER;
  26 dali.stage.add( myActor );
  27
  28 var anim = new dali.Animation( 2 ); // 2 seconds
  29
  30 // we're animation the property position of the actor.
  31 anim.animateTo( myActor, "position", [100, 100, 0] );
  32
  33 function finished( animation )
  34 {
  35   log("Animation finished \n");
  36 }
  37
  38 anim.connect("finished", finished );
  39
  40 anim.play();
  41 ```
  42
  43 ### Multiple actor example
  44
  45 ```
  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)
  50
  51 // Sets the original position to be rotated and pushed into the distance
  52
  53 var myActor1 = new dali.TextActor( "Hello" );
  54 var myActor2 = new dali.TextActor( "from DALi" );
  55
  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
  61
  62
  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
  66
  67 // start with actor rotated by 180 about x & y axis, so they can twist into place
  68 function createAnimation() {
  69
  70   var startRotation = new dali.Rotation(180, -180, 0);
  71   myActor1.orientation = startRotation;
  72   myActor2.orientation = startRotation;
  73
  74   dali.stage.add( myActor1 );
  75   dali.stage.add( myActor2 );
  76
  77
  78   var anim = new dali.Animation(1); // default duration is increased if length of all animations is greater than it.
  79
  80   var animOptions = {
  81       alpha: "linear",
  82       delay: 0.5,     // used to delay the start of the animation
  83       duration: 3,    // duration of the animation
  84       };
  85
  86   // move myActor1 z position back to 0
  87   anim.animateTo(myActor1, "positionZ", 0, animOptions);
  88
  89   //  rotate back to correct orientation
  90   var endRotation = new dali.Rotation(0,0,0);
  91
  92   animOptions.alpha = "easeInOutSine";
  93   anim.animateTo(myActor1, "orientation", endRotation, animOptions);
  94
  95   // Delay the myActor2  by  a second
  96   animOptions.delay = 0.0;
  97   animOptions.alpha = "linear";
  98   anim.animateTo(myActor2, "positionZ", 0, animOptions);
  99
 100   //  rotate back to correct orientation
 101   animOptions.alpha = "easeInOutSine";
 102   anim.animateTo(myActor2, "orientation", endRotation, animOptions);
 103
 104   return anim;
 105 }
 106
 107
 108 var anim = createAnimation();
 109
 110 anim.play();
 111
 112 ```
 113
 114 ### GL-ES shader animation example
 115
 116 The example below does the following with a single animation object:
 117
 118  - rotates the image actor
 119  - magnifies and color shifts the image using a fragment shader
 120
 121 ![ ](../assets/img/shaders/shader-animation.png)
 122
 123
 124
 125 ```
 126 // create an image actor in the centre of the stage
 127 createImageActor = function() {
 128
 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 );
 133
 134   return imageActor;
 135 }
 136
 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
 140
 141 createColorShiftAndZoomEffect = function() {
 142
 143     var fragShader =
 144   " uniform lowp vec4 uColorShift; \
 145     uniform lowp vec2 uScale;    \
 146                      \
 147     void main() \
 148     {           \
 149       gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
 150     }"
 151
 152   // Shader API
 153   // geometryType = "image", "text", "mesh", "textured-mesh"
 154   // fragmentPrefex ="" // prefix             ( optional)
 155   // fragmentShader = ""  // fragment shader   ( optional)
 156   // geometryHints = [ "gridX", "gridY", "grid","depthBuffer","blending" ]   ( optional)
 157   //
 158   var shaderOptions = {
 159       geometryType: "image",
 160       fragmentShader: fragShader,
 161       geometryHints: ["blending"]
 162   };
 163
 164   // create a new shader effect
 165   var shader = new dali.ShaderEffect(shaderOptions);
 166
 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]);
 170
 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);
 175
 176   return shader;
 177 }
 178
 179 createShaderAnimation = function( shader, color, zoom, duration, delay )
 180 {
 181     var shaderAnim = new dali.Animation(duration+delay);
 182
 183     var animOptions = {
 184         alpha: "doubleEaseInOutSine60",
 185         delay: delay,
 186         duration: duration,
 187     };
 188
 189     // animate the color uniform
 190     shaderAnim.animateTo( shader, "uColorShift", color, animOptions);
 191
 192     // zoom in and out of the image while applying the color shift
 193     shaderAnim.animateTo( shader, "uScale", zoom, animOptions);
 194
 195     return shaderAnim;
 196 }
 197
 198 var imageActor = createImageActor();
 199 var shaderEffect = createColorShiftAndZoomEffect();
 200
 201 // assign the shader effect to the actor ( it can be assigned to multiple actors).
 202 imageActor.setShaderEffect( shaderEffect );
 203
 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);
 210
 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 });
 214
 215
 216 shaderAnim.play();
 217
 218 ```
 219
 220
 221 ### Animation alpha functions
 222
 223 | Name               | Description  |
 224 |--------------------|--------------|
 225 |default             |Linear          |
 226 |linear              |Linear          |
 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 ** |
 253
 254
 255
 256  @class Animation
 257
 258 */