log("Animation finished \n");
}
-anim.connect("finished", finished );
+anim.on("finished", finished );
anim.play();
```
var anim = new dali.Animation(1); // default duration is increased if length of all animations is greater than it.
var animOptions = {
- alpha: "linear",
+ alpha: dali.ALPHA_FUNCTION_LINEAR,
delay: 0.5, // used to delay the start of the animation
duration: 3, // duration of the animation
};
// rotate back to correct orientation
var endRotation = new dali.Rotation(0,0,0);
- animOptions.alpha = "easeInOutSine";
+ animOptions.alpha = dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE;
anim.animateTo(myActor1, "orientation", endRotation, animOptions);
// Delay the myActor2 by a second
animOptions.delay = 0.0;
- animOptions.alpha = "linear";
+ animOptions.alpha = dali.ALPHA_FUNCTION_LINEAR;
anim.animateTo(myActor2, "positionZ", 0, animOptions);
// rotate back to correct orientation
- animOptions.alpha = "easeInOutSine";
+ animOptions.alpha = dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE;
anim.animateTo(myActor2, "orientation", endRotation, animOptions);
return anim;
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
```
-// 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.
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: dali.ALPHA_FUNCTION_EASE_IN_OUT_SINE,
+ 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" : "image",
+ "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:dali.ALPHA_FUNCTION_LINEAR, duration:duration, delay:delay });
shaderAnim.play();
### Animation alpha functions
-| Name | Description |
-|--------------------|--------------|
-|default |Linear |
-|linear |Linear |
-|square |Square (x^2) |
-|reverse |Reverse linear |
-|easeIn |Speeds up and comes to a sudden stop |
-|easeOut |Sudden start and slows to a gradual stop|
-|easeInOut |Speeds up and slows to a gradual stop|
-|easeInSine |Speeds up and comes to a sudden stop|
-|easeOutSine |Sudden start and slows to a gradual stop|
-|easeInOutSine |Speeds up and slows to a gradual stop |
-|easeInSine33 |Speeds up and comes to a sudden stop |
-|easeOutSine33 |Sudden start and slows to a gradual stop |
-|easeInOutSine33 |Speeds up and slows to a gradual stop |
-|easeInOutSine50 |Speeds up and slows to a gradual stop |
-|easeInOutSine60 |Speeds up and slows to a gradual stop |
-|easeInOutSine70 |Speeds up and slows to a gradual stop |
-|easeInOutSine80 |Speeds up and slows to a gradual stop |
-|easeInOutSine90 |Speeds up and slows to a gradual stop |
-|doubleEaseInOutSine6|Speeds up and slows to a gradual stop, then speeds up again and slows to a gradual stop |
-|easeOutQuint50 |Sudden start and slows to a gradual stop |
-|easeOutQuint80 |Sudden start and slows to a gradual stop |
-|bounce |Sudden start, loses momentum and ** Returns to start position ** |
-|bounceBack |Sudden start, loses momentum and returns to exceed start position ** Returns to start position ** |
-|easeInBack |Slow start, exceed start position and quickly reach destination |
-|easeOutBack |Sudden start, exceed end position and return to a gradual stop|
-|easeInOutBack |Slow start, exceed start position, fast middle, exceed end position and return to a gradual stop|
-|sin |full 360 revolution ** Returns to start position ** |
-|sin2x |full 720 revolution ** Returns to start position ** |
+| Name | Description |
+|----------------------------------|----------------|
+|ALPHA_FUNCTION_DEFAULT |Linear |
+|ALPHA_FUNCTION_LINEAR |Linear |
+|ALPHA_FUNCTION_REVERSE |Reverse linear |
+|ALPHA_FUNCTION_EASE_IN_SQUARE |Speeds up and comes to a sudden stop (Square) |
+|ALPHA_FUNCTION_EASE_OUT_SQUARE |Sudden start and slows to a gradual stop (Square) |
+|ALPHA_FUNCTION_EASE_IN |Speeds up and comes to a sudden stop |
+|ALPHA_FUNCTION_EASE_OUT |Sudden start and slows to a gradual stop|
+|ALPHA_FUNCTION_EASE_IN_OUT |Speeds up and slows to a gradual stop|
+|ALPHA_FUNCTION_EASE_IN_SINE |Speeds up and comes to a sudden stop|
+|ALPHA_FUNCTION_EASE_OUT_SINE |Sudden start and slows to a gradual stop|
+|ALPHA_FUNCTION_EASE_IN_OUT_SINE |Speeds up and slows to a gradual stop |
+|ALPHA_FUNCTION_BOUNCE |Sudden start, loses momentum and ** Returns to start position ** |
+|ALPHA_FUNCTION_SIN |full 360 revolution ** Returns to start position ** |
+|ALPHA_FUNCTION_EASE_OUT_BACK |Sudden start, exceed end position and return to a gradual stop|
projects / platform / core / uifw / dali-toolkit.git / blobdiff