X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=blobdiff_plain;f=plugins%2Fdali-script-v8%2Fdocs%2Fcontent%2Fanimation.js;h=54ba7c3485b62c55cf34481ffb1bc531409ae41d;hp=33c64f8114b04a48318424ed7fe45487051c9cbd;hb=ed63bc786cfe75f3ea8731ffa0d5d92d87a0131c;hpb=3e17d9f63dedb5d669409301f8d9a3d8c393f979

diff --git a/plugins/dali-script-v8/docs/content/animation.js b/plugins/dali-script-v8/docs/content/animation.js
index 33c64f8..54ba7c3 100644
--- a/plugins/dali-script-v8/docs/content/animation.js
+++ b/plugins/dali-script-v8/docs/content/animation.js
@@ -35,7 +35,7 @@ function finished( animation )
   log("Animation finished \n");
 }
   
-anim.connect("finished", finished );
+anim.on("finished", finished );
   
 anim.play();
 ```
@@ -115,22 +115,22 @@ anim.play();
 
 The example below does the following with a single animation object:
 
- - rotates the image actor
+ - rotates the image view
  - magnifies and color shifts the image using a fragment shader
   
-<img src="../assets/img/shader-animation.png">
+![ ](../assets/img/shaders/shader-animation.png)
+
   
 
 ```
-// create an image actor in the centre of the stage
-createImageActor = function() {
+// Creates an image view in the centre of the stage
+createImageView = function() {
   
-  var image = new dali.ResourceImage({ url:getImageDirectory()+"gallery-medium-50.jpg"});
-  var imageActor = new dali.ImageActor( image );
-  imageActor.parentOrigin = dali.CENTER;
-  dali.stage.add( imageActor );
+  var imageView = new dali.Control("ImageView");
+  imageView.parentOrigin = dali.CENTER;
+  dali.stage.add( imageView );
   
-  return imageActor;
+  return imageView;
 }
   
 // Creates a simple fragment shader that has 2 uniforms.
@@ -139,77 +139,82 @@ createImageActor = function() {
   
 createColorShiftAndZoomEffect = function() {
   
-    var fragShader =
-  " uniform lowp vec4 uColorShift; \
-    uniform lowp vec2 uScale;    \
-                     \
-    void main() \
-    {           \
-      gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
-    }"
-  
-  // Shader API
-  // geometryType = "image", "text", "mesh", "textured-mesh"
-  // fragmentPrefex ="" // prefix             ( optional)
-  // fragmentShader = ""  // fragment shader   ( optional)
-  // geometryHints = [ "gridX", "gridY", "grid","depthBuffer","blending" ]   ( optional)
-  //
-  var shaderOptions = {
-      geometryType: "image",
-      fragmentShader: fragShader,
-      geometryHints: ["blending"]
+  var fragShader =
+      "varying vec2 vTexCoord;\
+       uniform sampler2D sTexture;\
+       uniform vec4 uColor;\
+       uniform lowp vec4 uColorShift;\
+       uniform lowp vec2 uScale;\
+       void main() \
+       {           \
+         gl_FragColor = texture2D( sTexture, vTexCoord * uScale ) * uColor + uColorShift; \
+       }";
+  
+  // vertexShader = "";  // vertex shader   ( optional)
+  // fragmentShader = "";  // fragment shader   ( optional)
+  // hints =   // shader hints   ( optional)
+  //       [ "requiresSelfDepthTest",  // Expects depth testing enabled
+  //         "outputIsTransparent",    // Might generate transparent alpha from opaque inputs
+  //         "outputIsOpaque",         // Outputs opaque colors even if the inputs are transparent
+  //         "modifiesGeometry" ];     // Might change position of vertices, this option disables any culling optimizations
+  
+  var shader = {
+      "fragmentShader": fragShader,
+      "hints" : "outputIsTransparent"
   };
   
-  // create a new shader effect
-  var shader = new dali.ShaderEffect(shaderOptions);
-  
-  // add the color shift uniform so we can animate it
-  // default the color shift to zero, so it has no effect
-  shader.setUniform("uColorShift", [0, 0, 0, 0]);
-  
-  // add the zoom uniform so we can animate it
-  // default to 1,1 so no zoom is applied
-  var scale = new dali.Vector2([1, 1]);
-  shader.setUniform("uScale", scale);
-  
   return shader;
 }
 
-createShaderAnimation = function( shader, color, zoom, duration, delay )
+createShaderAnimation = function( imageView, color, zoom, duration, delay )
 {
-    var shaderAnim = new dali.Animation(duration+delay);
+  var shaderAnim = new dali.Animation(duration+delay);
 
-    var animOptions = {
-        alpha: "doubleEaseInOutSine60",
-        delay: delay,
-        duration: duration,
-    };
+  var animOptions = {
+     alpha: "doubleEaseInOutSine60",
+     delay: delay,
+     duration: duration,
+  };
 
-    // animate the color uniform
-    shaderAnim.animateTo( shader, "uColorShift", color, animOptions);
+  // animate the color uniform
+  shaderAnim.animateTo( imageView, "uColorShift", color, animOptions);
 
-    // zoom in and out of the image while applying the color shift
-    shaderAnim.animateTo( shader, "uScale", zoom, animOptions);
+  // zoom in and out of the image while applying the color shift
+  shaderAnim.animateTo( imageView, "uScale", zoom, animOptions);
 
-    return shaderAnim;
+  return shaderAnim;
 }
   
-var imageActor = createImageActor();
-var shaderEffect = createColorShiftAndZoomEffect();
+var imageView = createImageView();
+  
+var shader = createColorShiftAndZoomEffect();
+  
+var image = {
+    "rendererType" : "imageRenderer",
+    "imageUrl" : getImageDirectory()+"gallery-medium-50.jpg",
+    "shader" : shader
+};
+  
+imageView.image = image; // assign the shader to imageView
+  
+// register the color shift property so we can animate it
+// default the color shift to zero, so it has no effect
+imageView.registerAnimatableProperty("uColorShift", [0, 0, 0, 0]);
   
-// assign the shader effect to the actor ( it can be assigned to multiple actors).
-imageActor.setShaderEffect( shaderEffect );
+// register the zoom property so we can animate it
+// default to 1,1 so no zoom is applied
+imageView.registerAnimatableProperty("uScale", [1, 1]);
   
 // create the shader animation
 var zoom = [0.5,0.5];  // zoom into the image by 2
 var color = dali.COLOR_BLUE; // color shift the image to blue
 var duration = 5; // 5 seconds
 var delay = 5; // wait 1 second before starting
-var shaderAnim = createShaderAnimation( shaderEffect, color,zoom, duration, delay);
+var shaderAnim = createShaderAnimation( imageView, color,zoom, duration, delay);
   
-// also rotate the imageActor 90 degrees at the same time.
+// also rotate the imageView 90 degrees at the same time.
 var rotation = new dali.Rotation(90,0,0,1);
-shaderAnim.animateTo(imageActor, "orientation", rotation, { alpha:"linear", duration:duration, delay:delay });
+shaderAnim.animateTo(imageView, "orientation", rotation, { alpha:"linear", duration:duration, delay:delay });
 
 
 shaderAnim.play();