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 <img src="../assets/img/shader-animation.png">
 122
 123
 124 ```
 125 // create an image actor in the centre of the stage
 126 createImageActor = function() {
 127
 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 );
 132
 133   return imageActor;
 134 }
 135
 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
 139
 140 createColorShiftAndZoomEffect = function() {
 141
 142     var fragShader =
 143   " uniform lowp vec4 uColorShift; \
 144     uniform lowp vec2 uScale;    \
 145                      \
 146     void main() \
 147     {           \
 148       gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
 149     }"
 150
 151   // Shader API
 152   // geometryType = "image", "text", "mesh", "textured-mesh"
 153   // fragmentPrefex ="" // prefix             ( optional)
 154   // fragmentShader = ""  // fragment shader   ( optional)
 155   // geometryHints = [ "gridX", "gridY", "grid","depthBuffer","blending" ]   ( optional)
 156   //
 157   var shaderOptions = {
 158       geometryType: "image",
 159       fragmentShader: fragShader,
 160       geometryHints: ["blending"]
 161   };
 162
 163   // create a new shader effect
 164   var shader = new dali.ShaderEffect(shaderOptions);
 165
 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]);
 169
 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);
 174
 175   return shader;
 176 }
 177
 178 createShaderAnimation = function( shader, color, zoom, duration, delay )
 179 {
 180     var shaderAnim = new dali.Animation(duration+delay);
 181
 182     var animOptions = {
 183         alpha: "doubleEaseInOutSine60",
 184         delay: delay,
 185         duration: duration,
 186     };
 187
 188     // animate the color uniform
 189     shaderAnim.animateTo( shader, "uColorShift", color, animOptions);
 190
 191     // zoom in and out of the image while applying the color shift
 192     shaderAnim.animateTo( shader, "uScale", zoom, animOptions);
 193
 194     return shaderAnim;
 195 }
 196
 197 var imageActor = createImageActor();
 198 var shaderEffect = createColorShiftAndZoomEffect();
 199
 200 // assign the shader effect to the actor ( it can be assigned to multiple actors).
 201 imageActor.setShaderEffect( shaderEffect );
 202
 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);
 209
 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, "orientation", rotation, { alpha:"linear", duration:duration, delay:delay });
 213
 214
 215 shaderAnim.play();
 216
 217 ```
 218
 219
 220 ### Animation alpha functions
 221
 222 | Name               | Description  |
 223 |--------------------|--------------|
 224 |default             |Linear          |
 225 |linear              |Linear          |
 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 ** |
 252
 253
 254
 255  @class Animation
 256
 257 */