In this lesson, you will learn:
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
)};
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
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().
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);