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:
To move an element in your app using implicit animation you have 2 options either you use ScalarAnimation or TranslationAnimation.
Has 3 main properties that you are going to want to set:
Duration uses a h:m:s format
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.
OpacityAnimationSame 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.
ScalarAnimationIf 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.
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 AnimationsNow 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: