X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;ds=sidebyside;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Fanimation.md;h=889106c463b0106dcc8efb53753be4cd5f6d0b70;hb=26e308db77c286ccd0be0e7627b6cebfa2f9cb67;hp=fcca83122de35f21f0bc5f75e8a8cb36c94dff1e;hpb=a48cbbde774ec935fcac52ec11bf20ad80b8ce8c;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git

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
--- 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