You can use animations to allow objects to move around and change their properties for a specified duration. NUI implements an easy-to-use animation framework that allows you to create visually rich applications. The
Tizen.NUI.Animation class can be used to animate the animatable properties for any number of
NUI animations occur in a dedicated thread. This allows animations to run smoothly, regardless of the time taken to process the input, events, and other factors in the application code.
Some view properties are
animatable, such as
For more information on the animatable properties, see the
Remarks section of each property in Tizen.NUI.BaseComponents.View.
Basic Animation Methods
To animate a property in NUI, you can use two distinct methods:
AnimateTo(): Animates a property to the target value during a given time.C#Copy
// Animates PositionX to 50 var animation = new Animation(2000/*duration*/); animation.AnimateTo(view, "PositionX", 50); animation.Play();
AnimateBy(): Animates a property by the specified amount during a given time.C#Copy
// Animates PositionX to x + 50 var animation = new Animation(2000/*duration*/); animation.AnimateBy(view, "PositionX", 50); animation.Play();
You can define multiple animating behaviors in a single animation:
// Animate ScaleX of View1 and PositionY of View2 at once var animation = new Animation(2000/*duration*/); animation.AnimateBy(view1, "ScaleX", 2); animation.AnimateBy(view2, "PositionY", 100); animation.Play();
By defining the
KeyFrames object, NUI supports animation between several different values for a
The following code shows how to create
KeyFrames keyFrames = new KeyFrames(); keyFrames.Add(0.0f /* 0%*/, new Position(0, 0)); keyFrames.Add(0.25f/* 25%*/, new Position(200, 0)); keyFrames.Add(0.5f /* 50%*/, new Position(200, 100)); keyFrames.Add(0.75f/* 75%*/, new Position(0, 100)); keyFrames.Add(1.0f /*100%*/, new Position(0, 0));
You can add it to your animation by using
animation.AnimateBetween(view, "Position", keyFrames); animation.Play();
Following is the output of the executed command:
For more information on animatable properties and methods, see the following:
Playback and Events
After the animation is created, you can control its playback:
To play the animation:C#Copy
To pause or stop the animation:C#Copy
To loop the animation:C#Copy
animation.Looping = true;
By default, when the animation ends, the properties that animate are saved. Use the following code to discard the property changes when the animation either ends or stops:C#Copy
animation.EndAction = Animations.EndActions.Discard;
During the playback, you can receive notifications at various stages of the animation, such as the following:
ProgressReached: Notifies when the animation progress has reached a specific percentage.C#Copy
// Trigger the 'ProgressReached' event to 50% of animation time animation.ProgressNotification = 0.5; animation.ProgressReached += progressReachedCallback;
Finished: Notifies when the animation finishes.C#Copy
animation.Finished += animationFinishedCallback;
In animations, alpha functions are used to specify an animation progresses over time. The alpha function allows the animation to be accelerated, decelerated, repeated, or bounced.
Built-in Alpha Function
The simplest way to define an alpha function is to use built-in alpha function that NUI provides for the convenience. For more information on a supporting list, see Tizen.NUI.AlphaFunction.BuiltinFunctions.
The following example shows how to create an AlphaFunction with a built-in item:
var easeOut = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseOut);
You can apply it to the animation by setting it as a
var animation = new Animation(2000/*duration*/); animation.DefaultAlphaFunction = easeOut; animation.AnimateBy(view, "PositionX", 200); animation.Play();
The following image shows how
EaseOut animation works when compared with other built-in functions:
You can also specify the alpha function for each animation method:
// Animation in 0 ~ 500ms : speeds up animation.AnimateBy(view, "PositionX", 100, 0, 500, easeIn); // Animation in 500 ~ 1000ms : slows to a gradual stop animation.AnimateBy(view, "PositionX", 100, 500, 1000, easeOut);
Create Your Own Alpha Function
You can create your own alpha function using
Bézier Curves, by setting two control points, C1 and C2. The control points are for a Bézier curve whose end points are fixed at (0, 0) and (1, 1) respectively.
// Define two control points C1, C2 var c1 = new Vector2(0.0f, 0.5f); var c2 = new Vector2(0.5f, 1.0f); var customAlphaFunction = new AlphaFunction(c1, c2);
In the first graph shown in the following figure, the control points
C1(0, 0.5) and
C2(0.5, 1) make a curve that increases rapidly in the start and then slows down to the end. This means that the animation with this alpha function will have constant speed progress. You can see how the circle animates in the following graph:
You can use an
animation-hello-world-tutorial.cs sample to practice and understand how the
AnimateBy() and the
AnimateTo() methods, and alpha functions work.
After setting up your NUI development environment and building the NUI source code, follow these steps:
- Download the sample file.
- Copy the sample file to your
- Run the sample application.
- Tizen 4.0 and Higher