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.on("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 view
 119  - magnifies and color shifts the image using a fragment shader
 120
 121 ![ ](../assets/img/shaders/shader-animation.png)
 122
 123
 124
 125 ```
 126 // Creates an image view in the centre of the stage
 127 createImageView = function() {
 128
 129   var imageView = new dali.Control("ImageView");
 130   imageView.parentOrigin = dali.CENTER;
 131   dali.stage.add( imageView );
 132
 133   return imageView;
 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       "varying vec2 vTexCoord;\
 144        uniform sampler2D sTexture;\
 145        uniform vec4 uColor;\
 146        uniform lowp vec4 uColorShift;\
 147        uniform lowp vec2 uScale;\
 148        void main() \
 149        {           \
 150          gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
 151        }";
 152
 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
 160
 161   var shader = {
 162       "fragmentShader": fragShader,
 163       "hints" : "outputIsTransparent"
 164   };
 165
 166   return shader;
 167 }
 168
 169 createShaderAnimation = function( imageView, color, zoom, duration, delay )
 170 {
 171   var shaderAnim = new dali.Animation(duration+delay);
 172
 173   var animOptions = {
 174      alpha: "doubleEaseInOutSine60",
 175      delay: delay,
 176      duration: duration,
 177   };
 178
 179   // animate the color uniform
 180   shaderAnim.animateTo( imageView, "uColorShift", color, animOptions);
 181
 182   // zoom in and out of the image while applying the color shift
 183   shaderAnim.animateTo( imageView, "uScale", zoom, animOptions);
 184
 185   return shaderAnim;
 186 }
 187
 188 var imageView = createImageView();
 189
 190 var shader = createColorShiftAndZoomEffect();
 191
 192 var image = {
 193     "rendererType" : "imageRenderer",
 194     "imageUrl" : getImageDirectory()+"gallery-medium-50.jpg",
 195     "shader" : shader
 196 };
 197
 198 imageView.image = image; // assign the shader to imageView
 199
 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]);
 203
 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]);
 207
 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);
 214
 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:"linear", duration:duration, delay:delay });
 218
 219
 220 shaderAnim.play();
 221
 222 ```
 223
 224
 225 ### Animation alpha functions
 226
 227 | Name               | Description  |
 228 |--------------------|--------------|
 229 |default             |Linear          |
 230 |linear              |Linear          |
 231 |square              |Square (x^2)    |
 232 |reverse             |Reverse linear  |
 233 |easeIn              |Speeds up and comes to a sudden stop |
 234 |easeOut             |Sudden start and slows to a gradual stop|
 235 |easeInOut           |Speeds up and slows to a gradual stop|
 236 |easeInSine          |Speeds up and comes to a sudden stop|
 237 |easeOutSine         |Sudden start and slows to a gradual stop|
 238 |easeInOutSine       |Speeds up and slows to a gradual stop |
 239 |easeInSine33        |Speeds up and comes to a sudden stop  |
 240 |easeOutSine33       |Sudden start and slows to a gradual stop |
 241 |easeInOutSine33     |Speeds up and slows to a gradual stop |
 242 |easeInOutSine50     |Speeds up and slows to a gradual stop |
 243 |easeInOutSine60     |Speeds up and slows to a gradual stop |
 244 |easeInOutSine70     |Speeds up and slows to a gradual stop |
 245 |easeInOutSine80     |Speeds up and slows to a gradual stop |
 246 |easeInOutSine90     |Speeds up and slows to a gradual stop |
 247 |doubleEaseInOutSine6|Speeds up and slows to a gradual stop, then speeds up again and slows to a gradual stop |
 248 |easeOutQuint50      |Sudden start and slows to a gradual stop  |
 249 |easeOutQuint80      |Sudden start and slows to a gradual stop  |
 250 |bounce              |Sudden start, loses momentum and ** Returns to start position ** |
 251 |bounceBack          |Sudden start, loses momentum and returns to exceed start position ** Returns to start position ** |
 252 |easeInBack          |Slow start, exceed start position and quickly reach destination |
 253 |easeOutBack         |Sudden start, exceed end position and return to a gradual stop|
 254 |easeInOutBack       |Slow start, exceed start position, fast middle, exceed end position and return to a gradual stop|
 255 |sin                 |full 360 revolution ** Returns to start position ** |
 256 |sin2x               |full 720 revolution ** Returns to start position ** |
 257
 258
 259
 260  @class Animation
 261
 262 */