(Programming Guide) KeyFrame Animation, Path Animation, Constraints

[platform/core/uifw/dali-toolkit.git] / docs / content / shared-javascript-and-cpp-documentation / animation.md

diff --git a/docs/content/shared-javascript-and-cpp-documentation/animation.md b/docs/content/shared-javascript-and-cpp-documentation/animation.md
index fcca831..889106c 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/animation.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/animation.md
@@ -80,4 +80,50 @@ animation.SetEndAction( Animation::Discard );
 
 ## Key-Frame Animation {#animation-key-frame}
 
-TODO
\ No newline at end of file
+DALi provides support for animating between several different values, i.e. key-frames.
+A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much.
+You can create several key frames:
+~~~{.cpp}
+Dali::KeyFrames keyFrames = Dali::KeyFrames::New();
+keyFrames.Add( 0.0f, Vector3( 10.0f, 10.0f, 10.0f ) );
+keyFrames.Add( 0.7f, Vector3( 200.0f, 200.0f, 200.0f ) );
+keyFrames.Add( 1.0f, Vector3( 100.0f, 100.0f, 100.0f ) );
+~~~
+And then add them to your animation.
+~~~{.cpp}
+animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
+~~~
+When you play the animation, DALi will animate the position of actor1 between the key-frames specified.
+'actor1' will animate from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time,
+and then spend the remaining time animating back to (100.0f, 100.0f, 100.0f).
+
+The advantage of specifying a key-frame at 0% is that regardless of where 'actor1' is, it will start from position (10.0f, 10.0f, 10.0f).
+If AnimateTo was used, then the start position would have been actor1's current position.
+
+## Path Animations {#animation-paths}
+
+A Dali::Path can be used to animate the position and orientation of actors.
+
+![ ](animation/animated-path.png)
+
+The black points in the diagram are points where the DALi logo will travel to.
+The red points are the control points which express the curvature of the path on the black points.
+
+This, in code will be represented as follows:
+~~~{.cpp}
+Path path = Path::New();
+path.AddPoint( Vector3( 50.0f, 10.0f, 0.0f ));
+path.AddPoint( Vector3( 90.0f, 50.0f, 0.0f ));
+path.AddPoint( Vector3( 10.0f, 90.0f, 0.0f ));
+~~~
+The control points can be added manually using Dali::Path::AddControlPoint or Path can auto-generate them for you:
+~~~{.cpp}
+path.GenerateControlPoints(0.25f);
+~~~
+Here 0.25f represents the curvature of the path you require. Please see Dali::Path::GenerateControlPoints for more information.
+
+To animate actor1 along this path:
+~~~{.cpp}
+animation.Animate( actor1, path, Vector3::ZERO );
+~~~
+The third parameter is the forward vector (in local space coordinate system) that will be oriented with the path's tangent direction.
\ No newline at end of file