Animations
In this lesson, you will learn:
- How to animate element properties such as position, size, rotation, opacity, etc.
- How to animate multiple properties at the same time.
- How to implement advanced timing using the standard .NET async programming features.
- How to configure advanced animation settings such as easing algorithm and factor.
- How to add entry animations declaratively in your markup file without C# code.
Animation API
You can use the Animate() method of the View class to change any of its attributes as an animation.
Example 1 - Basic use:
The following code will animate the view to move to the right side by 100 pixels. The duration of the animation will be based on the static value of Animation.DefaultDuration which is 300ms.
Example 2 - Explicit duration:
The following example is the same as Example A, but it runs the animation in exactly 100ms.
The following example will animate two properties, so you get a diagonal moving effect.
Example 4 - Advanced
You can create an Animation object to specify the full details of the animation and pass that to the Animate() method of a view. In fact, all the examples above are just shortcuts to the following:
{
Duration = TimeSpan.From....(...),
Change = v => { /* Modify the view to its target state */ },
Delay = TimeSpan.From....(...), // Optional
Easing = AnimationEasing.[EaseIn | EaseInOut | EaseOut | Linear ]
});
One of the optional settings of animation is Easing. Easing is an Enum that determines the velocity of the changes during the course of animation. For example if it set to Linear, the speed of the transition will be fixed during the hole the animation. The default value is EaseOut which means the transition starts fast and then it slows down as the approach end of the animation.
There is a box which is dyed blue:
Style="width:50; height:50px; background: blue" />"
Sample 1:
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
)};
Sample 2:
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.Linear
)};
Sample 3:
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.EaseInOut
)};
Sample 4:
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.EaseInOut
EasingFactor = EasingFactor.Quintic
)};
Advance Timing
Now we want to run multiple animations in parallel. For this, we use Task.WhenAll() function in C#.
<TextView Id="Text" Text="Color:black" />
Box.Animate(2.seconds(), x => x.Margin(left: 100)),
Text.Animate(1.Seconds(), x=> x.TextColor(Color.Red))
);
// This line runs after 2 seconds
To wait, or not to wait?
The Animate() method returns a Task. You can await it if you want the rest of the calling code to run after the animation is completed. But often this is not the case, and you want to fire the animation to run whilst then doing other things. In that case, you should not await it.
Visual Studio Warning?
If you don't await the task Visual Studio might show you a warning. To get rid of it, you should do something with the Task that doesn't really do anything. For example, just call RunInParallel().
AddWithAnimation
You can use View.AddWithAnimation() method instead of the Add() method to dynamically add objects on the screen.
Example:
We are setting the "z-animate-to" attribute to specify the final state of the object which is x=100 pixels and opacity is one for visible.
Style="width:50; height:50px; background: blue; left:-50; opacity:0;"
z-animate-to="X=100; Opacity=1;"
z-animate-duration="1000" />
This is telling the rendering engine that my box is initially invisible and out side of screen, but as soon as the page is shown, then it will fly in.
There is no C# code here and we achieved this with only setting the "z-animate-to" and "z-animate-duration" attributes.
We can implement this sample in C#:
initialState: v=>v.X = -v.ActualWidth,
change: v => v.X = 0);