(Programming Guide) KeyFrame Animation, Path Animation, Constraints 75/40275/1
authorAdeel Kazmi <adeel.kazmi@samsung.com>
Mon, 1 Jun 2015 14:18:27 +0000 (15:18 +0100)
committerAdeel Kazmi <adeel.kazmi@samsung.com>
Mon, 1 Jun 2015 17:12:23 +0000 (18:12 +0100)
Change-Id: I2d9fac7129340ea72c7467c3d51bfaf3b31678c7

docs/content/images/animation/animated-path.png [new file with mode: 0644]
docs/content/main.md
docs/content/programming-guide/constraints.h
docs/content/shared-javascript-and-cpp-documentation/animation.md
docs/content/shared-javascript-and-cpp-documentation/fundamentals.md

diff --git a/docs/content/images/animation/animated-path.png b/docs/content/images/animation/animated-path.png
new file mode 100644 (file)
index 0000000..04ae2a6
Binary files /dev/null and b/docs/content/images/animation/animated-path.png differ
index d2dd55a..29aea03 100644 (file)
@@ -14,8 +14,7 @@
   + [Signals](@ref signals)
   + [Properties](@ref properties)
   + [Actions](@ref actions)
- + Tutorial
-  + [Hello World](@ref hello-world)
+ + [Tutorial: Hello World](@ref hello-world)
 
 ### Getting Started
  + [How to build DALi on Ubuntu Desktop](@ref build-ubuntu)
@@ -26,7 +25,7 @@
   + [JavaScript](@ref java-script-support)
   + [JSON](@ref json-support)
  + [Application](@ref dali-application)
- + Actors
+ + [Actors](@ref actors-and-stage)
   + [Positioning](@ref positioning-actors)
   + [Event Handling](@ref event-system)
   + [Layouting](@ref size-negotiation)
  + [Animation](@ref animation)
   + [Basic Framework](@ref animation-basics)
   + [Key Frame Animations](@ref animation-key-frame)
-  + Path Animations
+  + [Path Animations](@ref animation-paths)
   + [Constraints](@ref constraints)
-   + Equal To Constraint
-   + Relative To Constraint
-   + Linear Constrainer
-   + Path Constrainer
+   + [Equal To Constraint](@ref constraints-equal-to)
+   + [Relative To Constraint](@ref constraints-relative-to)
   + [Multi-threading Notes](@ref animation-multi-threading-notes)
   + [Shader Animation](@ref animation-shader)
 
@@ -53,7 +50,7 @@
  + Keyboard Focus
  + Accessibility
 
-### UI Controls
+### UI Components
  + [Text Label](@ref text-label)
  + [Text Field](@ref text-field)
  + Buttons
@@ -75,7 +72,6 @@
  + Environment Variables
  + [Resource Tracking](@ref resourcetracking)
  + Logging
- + GUI Builder
  + [Stagehand - DALi Visual Debugger](@ref stagehand)
 
 ### Viewing Modes
@@ -83,7 +79,7 @@
 
 ### Extending DALi
  + Control Base Class Services
- + How to write Custom UI Controls
+ + How to write Custom UI Components
   + [Size Negotiation for Controls](@ref size-negotiation-controls)
   + [Type Registration](@ref type-registration)
   + How to make Controls Scriptable
index 9394b3c..183e0d7 100644 (file)
@@ -228,5 +228,24 @@ actor.RemoveConstraints(); // Removes ALL constraints applied to an actor
 actor.RemoveConstraint( tag ); // All constraints with the tag are removed from the actor (tag can be set using SetTag)
 @endcode
 
+\section constraints-equal-to Equal To Constraint
+
+The built in Dali::EqualToConstraint can be used if all that is required is setting a property equal to another property:
+@code
+Dali::Constraint constraint = Dali::Constraint::New< Vector3 >( actor, Dali::Actor::Property::POSITION, Dali::EqualToConstraint() );
+constraint.AddSource( Dali::Source( anotherActor, Dali::Actor::Property::POSITION ) );
+constraint.Apply();
+@endcode
+Here actor's position is set to equal the position of anotherActor.
+
+\section constraints-relative-to Relative To Constraint
+
+The built in Dali::RelativeToConstraint and Dali::RelativeToConstraintFloat can be used if all that is required is setting a property relative to another property:
+@code
+Dali::Constraint constraint = Dali::Constraint::New< Vector3 >( actor, Dali::Actor::Property::POSITION, Dali::RelativeToConstraint( 2.0f ) );
+constraint.AddSource( Dali::Source( anotherActor, Dali::Actor::Property::POSITION ) );
+constraint.Apply();
+@endcode
+Here actor's position is relative to the position of anotherActor, i.e., if anotherActor is at (10.0f, 20.0f, 30.0f), actor will be at (20.0f, 40.0f, 60.0f).
 *
 */
index fcca831..889106c 100644 (file)
@@ -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
index 8ea1257..2442180 100644 (file)
@@ -5,10 +5,14 @@
 
 ## Actors and the Stage {#actors-and-stage}
 
-A DALi application uses a hierachy of Dali::Actor objects to position visible content.  An actor inherits a position relative to its parent, and can be moved relative to this point.  UI controls can be built by combining multiple actors.
-  
-To display the contents of an actor, it must be connected to the Dali::Stage.  This provides an invisible root (top-level) actor, to which all other actors are added.  A direct or indirect child of the root actor is considered "on-stage".  Multi-touch events are received through signals emitted by on-stage actors.
-  
+Actor is the primary object with which DALi applications interact.
+A DALi application uses a hierachy of Dali::Actor objects to position visible content.
+An actor inherits a position relative to its parent, and can be moved relative to this point.
+UI controls can be built by combining multiple actors.
+
+The Stage is a top-level object used for displaying a tree of Actors.
+To display the contents of an actor, it must be added to the Dali::Stage,
+
 The following example shows how to connect a new actor to the stage:
 
 ~~~{.cpp}