<li><a href="native/dali/textlabel_n.htm">TextLabel</a></li>
</ul>
</li>
- <li><a href="native/dali/animation_n.htm">Animation</a>
+ <li><a href="native/dali/animation_n.htm">Animations</a>
<ul>
- <li><a href="native/dali/basic_framework_n.htm">Basic Framework</a></li>
- <li><a href="native/dali/advanced_animation_n.htm">Advanced Animations</a></li>
+ <li><a href="native/dali/animation_types_n.htm">Types of Animations</a></li>
<li><a href="native/dali/constraints_n.htm">Constraints</a></li>
<li><a href="native/dali/multi_threading_n.htm">Multi-threading</a></li>
</ul>
<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>Animation: Making Your Actors Alive</title> \r
+ <title>Animations: Making Your Actors Alive</title> \r
</head>\r
\r
<body onload="prettyPrint()" style="overflow: auto;">\r
<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
</div>\r
<div id="toc_border"><div id="toc">\r
+ <p class="toc-title">Content</p>\r
+ <ul class="toc">\r
+ <li><a href="#basic">Creating a Basic Animation</a></li>\r
+ <li><a href="#properties">Animating Properties</a></li>\r
+ <li><a href="#playback">Playback Control</a></li>\r
+ <li><a href="#notifications">Notifications</a></li>\r
+ <li><a href="#alpha">Alpha Functions</a></li>\r
+ <li><a href="#other">Other Actions</a></li>\r
+ </ul>\r
<p class="toc-title">Related Info</p>\r
<ul class="toc">\r
- <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">DALi::Animation API for Mobile Native</a></li>\r
- <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">DALi::Animation API for Wearable Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::AlphaFunction API for Mobile Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::AlphaFunction API for Wearable Native</a></li>\r
+ <li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li> \r
</ul>\r
</div></div>\r
</div>\r
\r
<div id="container"><div id="contents"><div class="content">\r
-<h1>Animation: Making Your Actors Alive</h1>\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
\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
\r
+<h2 id="basic" name="basic">Creating a Basic Animation</h2>\r
+\r
+<p>Create an animation object that takes place over 3 seconds:</p>\r
+<pre class="prettyprint">\r
+Dali::Animation animation = Animation::New(3.0f);\r
+</pre>\r
+\r
+<h2 id="properties" name="properties">Animating Properties</h2>\r
+\r
+<p>There are two distinct methods to animate the properties within DALi:</p>\r
+<ul>\r
+ <li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: The property animates TO the value in the given time.</li>\r
+ <li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: The property animates BY the value in the given time.</li>\r
+</ul>\r
+\r
+<p>In the following example, it is assumed that <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> are at position 10.0f, 10.0f, 0.0f at the start of the animation.</p>\r
+<pre class="prettyprint">\r
+// Animate the position of actor1 TO 10.0f, 50.0f, 0.0f\r
+animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
+// End Position: 10.0f, 50.0f, 0.0f\r
+\r
+// Animate the position of actor2 BY 10.0f, 50.0f, 0.0f\r
+animation.AnimateBy(Property(actor2, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
+// End Position: 20.0f, 60.0f, 0.0f\r
+</pre>\r
+\r
+<h2 id="playback" name="playback">Playback Control</h2>\r
+\r
+<p>When an animation is created, it can be played using the <span style="font-family: Courier New,Courier,monospace;">Play()</span> method.</p>\r
+<pre class="prettyprint">\r
+animation.Play();\r
+</pre>\r
+<p>This is not a synchronous method. The <span style="font-family: Courier New,Courier,monospace;">Play()</span> method returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>\r
+<p><span style="font-family: Courier New,Courier,monospace;">Stop()</span> and <span style="font-family: Courier New,Courier,monospace;">Pause()</span> methods are also supported.</p>\r
+<pre class="prettyprint">\r
+animation.Stop();\r
+animation.Pause();\r
+</pre> \r
+\r
+<h2 id="notifications" name="notifications">Notifications</h2>\r
+<p>Using DALi's signal framework applications can be notified when the animation finishes. The Dali::Animation API supports "fire and forget" behavior, which means that an animation continues to play if the handle is discarded. Note that in the following example, the "Finish" signal is emitted.</p>\r
+<pre class="prettyprint">\r
+void ExampleCallback(Animation& source)\r
+{\r
+ std::cout << "Animation has finished" << std::endl;\r
+}\r
+\r
+void ExampleAnimation(Actor actor)\r
+{\r
+ Animation animation = Animation::New(2.0f); // Duration 2 seconds\r
+ animation.AnimateTo(Property(actor, Actor::Property::POSITION), 10.0f, 50.0f, 0.0f);\r
+ animation.FinishedSignal().Connect(ExampleCallback);\r
+ 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 "Animation has finished" is printed after 2 seconds\r
+</pre>\r
+\r
+<h2 id="alpha" name="alpha">Alpha Functions</h2>\r
+\r
+<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/###.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/###.html">wearable</a> applications).</p>\r
+<pre class="prettyprint">\r
+animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);\r
+</pre>\r
+<p>You can also create your own alpha function:</p>\r
+<pre class="prettyprint">\r
+float MyAlphaFunction(float progress)\r
+{\r
+ return progress;\r
+}\r
+\r
+AlphaFunction alphaFunction(&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
+<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
+\r
+<h2 id="other" name="other">Other Actions</h2>\r
+\r
+<p>An animation can be looped:</p>\r
+<pre class="prettyprint">\r
+animation.SetLooping(true);\r
+</pre>\r
+<p>By default, when an animation ends, the properties that it was animating are baked (saved). Using the following function, the property changes can be discarded when the animation ends or is stopped:</p>\r
+<pre class="prettyprint">\r
+animation.SetEndAction(Animation::Discard);\r
+</pre>\r
+\r
+\r
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
</div></div></div>\r
<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 Realizable with DALi</title> \r
+ <title>Types of Animations: Various Animations Supported by DALi</title> \r
</head>\r
\r
<body onload="prettyPrint()" style="overflow: auto;">\r
</div>\r
\r
<div id="container"><div id="contents"><div class="content">\r
-<h1>Types of Animations: Various Animations Realizable with DALi</h1>\r
+<h1>Types of Animations: Various Animations Supported by DALi</h1>\r
\r
<h2 id="frame" name="frame">Frame Animation</h2>\r
\r
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
-<head>\r
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
- <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
- <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
- <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
- <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
- <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
- <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
- <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>Basic Framework</title> \r
-</head>\r
-\r
-<body onload="prettyPrint()" style="overflow: auto;">\r
-\r
-<div id="toc-navigation">\r
- <div id="profile">\r
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
- </div>\r
- <div id="toc_border"><div id="toc">\r
- <p class="toc-title">Content</p>\r
- <ul class="toc">\r
- <li><a href="#basic">Creating a Basic Animation</a></li>\r
- <li><a href="#properties">Animating Properties</a></li>\r
- <li><a href="#playback">Playback Control</a></li>\r
- <li><a href="#notifications">Notifications</a></li>\r
- <li><a href="#alpha">Alpha Functions</a></li>\r
- <li><a href="#other">Other Actions</a></li>\r
- </ul>\r
- <p class="toc-title">Related Info</p>\r
- <ul class="toc">\r
- <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>\r
- <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::AlphaFunction API for Mobile Native</a></li>\r
- <li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>\r
- <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>\r
- <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::AlphaFunction API for Wearable Native</a></li>\r
- <li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li> \r
- </ul>\r
- </div></div>\r
-</div>\r
-\r
-<div id="container"><div id="contents"><div class="content">\r
-<h1>Basic Framework</h1>\r
-\r
-<h2 id="basic" name="basic">Creating a Basic Animation</h2>\r
-\r
-<p>Create an animation object that takes place over 3 seconds:</p>\r
-<pre class="prettyprint">\r
-Dali::Animation animation = Animation::New(3.0f);\r
-</pre>\r
-\r
-<h2 id="properties" name="properties">Animating Properties</h2>\r
-\r
-<p>There are two distinct methods to animate the properties within DALi:</p>\r
-<ul>\r
- <li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: The property animates TO the value in the given time.</li>\r
- <li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: The property animates BY the value in the given time.</li>\r
-</ul>\r
-\r
-<p>In the following example, it is assumed that <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> are at position 10.0f, 10.0f, 0.0f at the start of the animation.</p>\r
-<pre class="prettyprint">\r
-// Animate the position of actor1 TO 10.0f, 50.0f, 0.0f\r
-animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
-// End Position: 10.0f, 50.0f, 0.0f\r
-\r
-// Animate the position of actor2 BY 10.0f, 50.0f, 0.0f\r
-animation.AnimateBy(Property(actor2, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
-// End Position: 20.0f, 60.0f, 0.0f\r
-</pre>\r
-\r
-<h2 id="playback" name="playback">Playback Control</h2>\r
-\r
-<p>When an animation is created, it can be played using the <span style="font-family: Courier New,Courier,monospace;">Play()</span> method.</p>\r
-<pre class="prettyprint">\r
-animation.Play();\r
-</pre>\r
-<p>This is not a synchronous method. The <span style="font-family: Courier New,Courier,monospace;">Play()</span> method returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>\r
-<p><span style="font-family: Courier New,Courier,monospace;">Stop()</span> and <span style="font-family: Courier New,Courier,monospace;">Pause()</span> methods are also supported.</p>\r
-<pre class="prettyprint">\r
-animation.Stop();\r
-animation.Pause();\r
-</pre> \r
-\r
-<h2 id="notifications" name="notifications">Notifications</h2>\r
-<p>Using DALi's signal framework applications can be notified when the animation finishes. The Dali::Animation API supports "fire and forget" behavior, which means that an animation continues to play if the handle is discarded. Note that in the following example, the "Finish" signal is emitted.</p>\r
-<pre class="prettyprint">\r
-void ExampleCallback(Animation& source)\r
-{\r
- std::cout << "Animation has finished" << std::endl;\r
-}\r
-\r
-void ExampleAnimation(Actor actor)\r
-{\r
- Animation animation = Animation::New(2.0f); // Duration 2 seconds\r
- animation.AnimateTo(Property(actor, Actor::Property::POSITION), 10.0f, 50.0f, 0.0f);\r
- animation.FinishedSignal().Connect(ExampleCallback);\r
- 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 "Animation has finished" is printed after 2 seconds\r
-</pre>\r
-\r
-<h2 id="alpha" name="alpha">Alpha Functions</h2>\r
-\r
-<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/###.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/###.html">wearable</a> applications).</p>\r
-<pre class="prettyprint">\r
-animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);\r
-</pre>\r
-<p>You can also create your own alpha function:</p>\r
-<pre class="prettyprint">\r
-float MyAlphaFunction(float progress)\r
-{\r
- return progress;\r
-}\r
-\r
-AlphaFunction alphaFunction(&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
-<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
-\r
-<h2 id="other" name="other">Other Actions</h2>\r
-\r
-<p>An animation can be looped:</p>\r
-<pre class="prettyprint">\r
-animation.SetLooping(true);\r
-</pre>\r
-<p>By default, when an animation ends, the properties that it was animating are baked (saved). Using the following function, the property changes can be discarded when the animation ends or is stopped:</p>\r
-<pre class="prettyprint">\r
-animation.SetEndAction(Animation::Discard);\r
-</pre>\r
-\r
-\r
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
-<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
-</div></div></div>\r
-\r
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
-\r
-<div id="footer">\r
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
-</div>\r
-\r
-<script type="text/javascript">\r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-25976949-1']);\r
-_gaq.push(['_trackPageview']);\r
-(function() {\r
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();\r
-</script>\r
-\r
-</body>\r
-</html>\r
-\r
<li><a href="textfield_n.htm">TextField: Typing Your Text</a></li>
<li><a href="textlabel_n.htm">TextLabel: Displaying Text Labels</a></li>
</ul>
- <li><a href="animation_n.htm">Animation: Making Your Actors Alive</a>
+ <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="advanced_animation_n.htm">Types of Animations: Various Animations Realizable with DALi</a></li>
+ <li><a href="animation_types_n.htm">Types of Animations: Various Animations Supported by DALi</a></li>
<li><a href="constraints_n.htm">Constraints: Imposing Your Own Constraints on Actors</a></li>
<li><a href="multi_threading_n.htm">Multi-Threading Notes: The Secret of High-Performance Animation in DALi</a></li>
</ul>
projects / sdk / online-doc.git / commitdiff