[UWP/XAML] using Microsoft.Toolkit for Implicit animations using ScalarAnimation, OpacityAnimation, TranslationAnimation

Do you hate having to use Compositor?

_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

From and To are based on the x-y-z axis
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.