[DALi][DOC-213] Update Animations
authorYoonsang Lee <ysang114.lee@samsung.com>
Wed, 22 Jul 2015 06:48:09 +0000 (15:48 +0900)
committerYoonsang Lee <ysang114.lee@samsung.com>
Wed, 22 Jul 2015 06:48:39 +0000 (15:48 +0900)
Signed-off-by: Yoonsang Lee <ysang114.lee@samsung.com>
Change-Id: I5e212cc454c9f58a5f456a8496b7085448c13443

org.tizen.ui.guides/html/index.htm
org.tizen.ui.guides/html/native/dali/animation_n.htm
org.tizen.ui.guides/html/native/dali/animation_types_n.htm
org.tizen.ui.guides/html/native/dali/guides_dali_n.htm

index f2d43f7..99c8125 100755 (executable)
                                </li>
                                <li><a href="native/dali/animation_n.htm">Animations</a>
                                        <ul>
-                                               <li><a href="native/dali/animation_types_n.htm">Types of Animations</a></li>
+                                               <li><a href="native/dali/animation_types_n.htm">Animation Types</a></li>
                                                <li><a href="native/dali/constraints_n.htm">Constraints</a></li>
                                        </ul>
                                </li>
index 60910ab..1ccaba2 100755 (executable)
 <div id="container"><div id="contents"><div class="content">\r
 <h1>Animations: Making Your Actors Alive</h1>\r
 \r
-<p>Animation is an effect that shows sequential frames in quick succession to give the illusion of movement.</p>\r
+<p>Animation allows your objects to move around / change their properties for a specified duration.</p>\r
 \r
-<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The Dali::Animation API can be used to animate the properties of any number of objects, typically Actors. Animation components are shown in a following figure.</p>\r
+<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> can be used to animate the animatable properties of any number of objects.</p>\r
+\r
+<p>Animation components are shown in the following figure:</p>\r
 \r
 <p class="figure">Figure: DALi animation components</p>  \r
        <p align="center"><img alt="DALi animation components" src="../../images/animation_components.png"/></p> \r
 \r
-<p>DALi animations occur in a dedicated thread. This allows animations to run smoothly, regardless of the time taken to process inputs events and other factors in the application code.</p>\r
+<p>DALi animations occur in a dedicated thread. This allows animations to run smoothly, regardless of the time taken to process inputs events and other factors in the application code. Please see <a href="multi_threaded_n.htm#animations">Animations with Multi-Threading</a></p>\r
 \r
 <h2 id="basic" name="basic">Creating a Basic Animation</h2>\r
 \r
@@ -94,28 +96,26 @@ animation.Pause();
 </pre> \r
 \r
 <h2 id="notifications" name="notifications">Notifications</h2>\r
-<p>Using DALi&#39;s signal framework applications can be notified when the animation finishes. The Dali::Animation API supports &quot;fire and forget&quot; behavior, which means that an animation continues to play if the handle is discarded. Note that in the following example, the &quot;Finish&quot; signal is emitted.</p>\r
-<pre class="prettyprint">\r
-void ExampleCallback(Animation&amp; source)\r
-{\r
-&nbsp;&nbsp;&nbsp;std::cout &lt;&lt; &quot;Animation has finished&quot; &lt;&lt; std::endl;\r
-}\r
+<p>Using DALi&#39;s signal framework applications can be notified when the animation finishes. The Dali::Animation API supports &quot;fire and forget&quot; behavior, which means that an animation continues to play if the handle is discarded. In the following example, the Finished signal is emitted after 2 seconds:</p>\r
 \r
-void ExampleAnimation(Actor actor)\r
-{\r
-&nbsp;&nbsp;&nbsp;Animation animation = Animation::New(2.0f); // Duration 2 seconds\r
-&nbsp;&nbsp;&nbsp;animation.AnimateTo(Property(actor, Actor::Property::POSITION), 10.0f, 50.0f, 0.0f);\r
-&nbsp;&nbsp;&nbsp;animation.FinishedSignal().Connect(ExampleCallback);\r
-&nbsp;&nbsp;&nbsp;animation.Play();\r
-} // At this point the animation handle has gone out of scope\r
-\r
-Actor actor = Actor::New();\r
-Stage::GetCurrent().Add(actor);\r
-\r
-// Fire the animation and forget about it\r
-ExampleAnimation(actor);\r
-\r
-// The animation continues, and &quot;Animation has finished&quot; is printed after 2 seconds\r
+<pre class="prettyprint">\r
+  // ... Assuming this code is in the HelloWorldController class\r
+  void Create( Application& application )\r
+  {\r
+    PushButton actor = PushButton::New();\r
+    Stage::GetCurrent().Add( actor );\r
+\r
+    Animation animation = Animation::New(2.0f); // Duration 2 seconds\r
+    animation.AnimateTo( Property( actor, Actor::Property::POSITION ), Vector3( 100.0f, 100.0f, 0.0f ) );\r
+    animation.FinishedSignal().Connect( this, &HelloWorldController::OnFinished );\r
+    animation.Play();  // Fire the animation and forget about it\r
+  }  // At this point the animation handle has gone out of scope\r
+\r
+  void OnFinished( Animation& animation )\r
+  {\r
+    // Do something when the animation is finished\r
+  }\r
+  // ...\r
 </pre>\r
 \r
 <h2 id="alpha" name="alpha">Alpha Functions</h2>\r
@@ -134,7 +134,7 @@ float MyAlphaFunction(float progress)
 AlphaFunction alphaFunction(&amp;MyAlphaFunction);\r
 animation.SetDefaultAlphaFunction(alphaFunction);\r
 </pre>\r
-<p>It is possible to specify a different alpha function for each animator in an Animation object.</p>\r
+<p>It is possible to specify a different alpha function for each animate call in an Animation object.</p>\r
 <pre class="prettyprint">\r
 animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN);\r
 </pre>\r
index df7b332..26c7f18 100755 (executable)
@@ -11,7 +11,7 @@
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
 \r
-       <title>Types of Animations: Various Animations Supported by DALi</title>  \r
+       <title>Animations Types: Types of Animations Supported by DALi</title>  \r
 </head>\r
 \r
 <body onload="prettyPrint()" style="overflow: auto;">\r
@@ -23,7 +23,7 @@
                <div id="toc_border"><div id="toc">\r
                <p class="toc-title">Content</p>\r
                <ul class="toc">\r
-                       <li><a href="#frame">Frame Animation</a></li>\r
+                       <li><a href="#frame">Key Frame Animation</a></li>\r
                        <li><a href="#path">Path Animation</a></li>\r
                        <li><a href="#shader">Shader Effect Animation</a></li>\r
                </ul>\r
 </div>\r
 \r
 <div id="container"><div id="contents"><div class="content">\r
-<h1>Types of Animations: Various Animations Supported by DALi</h1>\r
+<h1>Animations Types: Types of Animations Supported by DALi</h1>\r
 \r
-<h2 id="frame" name="frame">Frame Animation</h2>\r
+<p>DALi supports the key frame animation, path animation, and shader effect animation.</p>\r
+\r
+<h2 id="frame" name="frame">Key Frame Animation</h2>\r
 \r
 <p>DALi provides support for animating between several different values, or 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:</p>\r
 <pre class="prettyprint">\r
index 7973906..1295fda 100755 (executable)
@@ -61,7 +61,7 @@
        <li><a href="animation_n.htm">Animations: Making Your Actors Alive</a>
        <p>Enables you to create animated effects.</p></li>
        <ul>
-               <li><a href="animation_types_n.htm">Types of Animations: Various Kinds of Animations Supported by DALi</a></li>
+               <li><a href="animation_types_n.htm">Animations Types: Types of Animations Supported by DALi</a></li>
                <li><a href="constraints_n.htm">Constraints: Imposing Your Own Constraints on Actors</a></li>
        </ul>
        <li><a href="resources_n.htm">Resources: Handling Images</a>