docs/content/shared-javascript-and-cpp-documentation/animation.md

   1 <!--
   2 /**-->
   3
   4 # Animation {#animation}
   5
   6 DALi provides a rich and easy to use animation framework which allows the creation of visually rich applications.
   7 Dali::Animation can be used to animate the properties of any number of objects, typically Actors.
   8
   9 ## Creating a basic Animation {#animation-basics}
  10
  11 Create an animation object that will take place over 3 seconds:
  12 ~~~{.cpp}
  13 Dali::Animation animation = Animation::New( 3.0f );
  14 ~~~
  15
  16 ### Animating Properties
  17
  18 There are two distint ways in which properties can be animated within DALi:
  19 - **AnimateTo:** The property will animate **TO** the value in the given time.
  20 - **AnimateBy:** The property will animate **BY** the value in the given time.
  21
  22 (Assume actor1 & actor2 are at position 10.0f, 10.0f, 0.0f at the start of the animation)
  23 ~~~{.cpp}
  24 // Animate the position of actor1 TO 10.0f, 50.0f, 0.0f
  25 animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ), Vector3(10.0f, 50.0f, 0.0f) ); // End Position: 10.0f, 50.0f, 0.0f
  26
  27 // Animate the position of actor2 BY 10.0f, 50.0f, 0.0f
  28 animation.AnimateBy( Property( actor2, Dali::Actor::Property::POSITION ), Vector3(10.0f, 50.0f, 0.0f) ); // End Position: 20.0f, 60.0f, 0.0f
  29 ~~~
  30
  31 ### Playback Control
  32
  33 When an animation is created, it can be played:
  34 ~~~{.cpp}
  35 animation.Play();
  36 ~~~
  37
  38 Stop and Pause are also supported.
  39 ~~~{.cpp}
  40 animation.Stop();
  41 animation.Pause();
  42 ~~~
  43
  44 ### Notifications
  45
  46 Using DALi's signal framework, applications can be notified when the animation finishes:
  47
  48 ~~~{.cpp}
  49
  50 void ExampleCallback( Animation& source )
  51 {
  52   std::cout << "Animation has finished" << std::endl;
  53 }
  54 ...
  55 animation.FinishedSignal().Connect( ExampleCallback );
  56 ~~~
  57
  58 ### Alpha Functions
  59
  60 Alpha functions are used in animations to specify the rate of change of the animation parameter over time.
  61 The built in supported functions can be viewed in Dali::AlphaFunction::BuiltinFunction.
  62
  63 It is possible to specify a different alpha function for each animator in an Animation object:
  64 ~~~{.cpp}
  65 animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ), Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN );
  66 ~~~
  67
  68 ### Other Actions
  69
  70 An animation can be looped:
  71 ~~~{.cpp}
  72 animation.SetLooping( true );
  73 ~~~
  74
  75 By default, when an animation ends, the properties that it was animating are BAKED.
  76 However, the property changes can be **discarded** when the animation ends (or is stopped):
  77 ~~~{.cpp}
  78 animation.SetEndAction( Animation::Discard );
  79 ~~~
  80
  81 ## Key-Frame Animation {#animation-key-frame}
  82
  83 DALi provides support for animating between several different values, i.e. key-frames.
  84 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.
  85 You can create several key frames:
  86 ~~~{.cpp}
  87 Dali::KeyFrames keyFrames = Dali::KeyFrames::New();
  88 keyFrames.Add( 0.0f, Vector3( 10.0f, 10.0f, 10.0f ) );
  89 keyFrames.Add( 0.7f, Vector3( 200.0f, 200.0f, 200.0f ) );
  90 keyFrames.Add( 1.0f, Vector3( 100.0f, 100.0f, 100.0f ) );
  91 ~~~
  92 And then add them to your animation.
  93 ~~~{.cpp}
  94 animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
  95 ~~~
  96 When you play the animation, DALi will animate the position of actor1 between the key-frames specified.
  97 'actor1' will animate from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time,
  98 and then spend the remaining time animating back to (100.0f, 100.0f, 100.0f).
  99
 100 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).
 101 If AnimateTo was used, then the start position would have been actor1's current position.
 102
 103 ## Path Animations {#animation-paths}
 104
 105 A Dali::Path can be used to animate the position and orientation of actors.
 106
 107 ![ ](animation/animated-path.png)
 108
 109 The black points in the diagram are points where the DALi logo will travel to.
 110 The red points are the control points which express the curvature of the path on the black points.
 111
 112 This, in code will be represented as follows:
 113 ~~~{.cpp}
 114 Path path = Path::New();
 115 path.AddPoint( Vector3( 50.0f, 10.0f, 0.0f ));
 116 path.AddPoint( Vector3( 90.0f, 50.0f, 0.0f ));
 117 path.AddPoint( Vector3( 10.0f, 90.0f, 0.0f ));
 118 ~~~
 119 The control points can be added manually using Dali::Path::AddControlPoint or Path can auto-generate them for you:
 120 ~~~{.cpp}
 121 path.GenerateControlPoints(0.25f);
 122 ~~~
 123 Here 0.25f represents the curvature of the path you require. Please see Dali::Path::GenerateControlPoints for more information.
 124
 125 To animate actor1 along this path:
 126 ~~~{.cpp}
 127 animation.Animate( actor1, path, Vector3::ZERO );
 128 ~~~
 129 The third parameter is the forward vector (in local space coordinate system) that will be oriented with the path's tangent direction.