_compositor = new Compositor();
_root = ElementCompositionPreview.GetElementVisual(RootGrid);
Well Microsoft.Toolkit.Uwp.UI.Animations is here to save you (and me). The toolkit has added implicit animation which will allow you to easily add animations to your elements. You wont need to use Storyboard animation!
In this example we are going to see how to:
- Add a translation to an element
- Show and hide an element using Opacity
- Scale an element
The advantage of using an Implicit animation is that it can for example be execute when you change the visibility of a component using:
<animations:Implicit.ShowAnimations>
Or
<animations:Implicit.HideAnimations>
Animations
To move an element in your app using implicit animation you have 2 options either you use ScalarAnimation or TranslationAnimation.
TranslationAnimation
Has 3 main properties that you are going to want to set:
- From
- To
- Duration
Duration uses a h:m:s format
<animations:TranslationAnimation From="500,300,0" To="0" Duration="0:0:1" />
This means we are going to add 500 to the x position, 300 to the y postion and 0 to the z. The To=0 will take the element from its current position and the translation will take 1 second.
OpacityAnimation
Same as the translation this also takes 3 properties, however the From and To only takes one value as the opacity property is only based on one value.<animations:OpacityAnimation From="0" To="1" Duration="0:0:2" />
ScalarAnimation
If you wish to have more control on your animation you can also use ScalarAnimation which will allow you to more precisely (I find) to set the values to the property you wish to change.<animations:ScalarAnimation Target="Translation.Y" From="100" To="0" Duration="0:0:1"/>
First you need to set your Target, which is the property you are going to want to change. Then depending on your target like the other animations you will set the From, To, Duration
Combining Animations
Now we are going to combine 2 animations using the ShowAnimations and HideAnimations. We will use ScalarAnimation and OpacityAnimation to move and change the opacity of our object.Here is the full XAML:
<Button Click="Button_Click" Content="Hit me" /> <Rectangle x:Name="MyRec" Grid.Row="0" Height="45" Margin="0,0,0,0" VerticalAlignment="Bottom" Fill="Red" Visibility="Collapsed"> <animations:Implicit.ShowAnimations> <!--<animations:TranslationAnimation From="100,0,0" To="0,0,0" Duration="0:0:1" />--> <animations:ScalarAnimation Target="Translation.Y" From="100" To="0" Duration="0:0:1"> </animations:ScalarAnimation> <animations:OpacityAnimation From="0" To="1" Duration="0:0:2" /> </animations:Implicit.ShowAnimations> <animations:Implicit.HideAnimations> <animations:OpacityAnimation From="1" To="0" Duration="0:0:2" /> <animations:ScalarAnimation Target="Translation.Y" From="0" To="100" Duration="0:0:1"> </animations:ScalarAnimation> <!--<animations:TranslationAnimation From="0,0,0" To="100,0,0" Duration="0:0:1" />--> </animations:Implicit.HideAnimations> </Rectangle>
C# Code:
private void Button_Click(object sender, RoutedEventArgs e) { if (MyRec != null) { MyRec.Visibility = MyRec.Visibility == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed; } }
Happy Coding.