From: Adeel Kazmi Date: Mon, 1 Jun 2015 14:18:27 +0000 (+0100) Subject: (Programming Guide) KeyFrame Animation, Path Animation, Constraints X-Git-Tag: dali_1.0.43~7 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=e3f6ef9404f35aed638b5de626ca430265054e59;ds=sidebyside (Programming Guide) KeyFrame Animation, Path Animation, Constraints Change-Id: I2d9fac7129340ea72c7467c3d51bfaf3b31678c7 --- diff --git a/docs/content/images/animation/animated-path.png b/docs/content/images/animation/animated-path.png new file mode 100644 index 0000000..04ae2a6 Binary files /dev/null and b/docs/content/images/animation/animated-path.png differ diff --git a/docs/content/main.md b/docs/content/main.md index d2dd55a..29aea03 100644 --- a/docs/content/main.md +++ b/docs/content/main.md @@ -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) @@ -34,12 +33,10 @@ + [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 diff --git a/docs/content/programming-guide/constraints.h b/docs/content/programming-guide/constraints.h index 9394b3c..183e0d7 100644 --- a/docs/content/programming-guide/constraints.h +++ b/docs/content/programming-guide/constraints.h @@ -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). * */ 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 diff --git a/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md b/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md index 8ea1257..2442180 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md +++ b/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md @@ -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}