ViewExtensions<\/code> class in Xamarin.Forms to create compelling animations that run on iOS, Android, and Windows.<\/p>\nIntroduction to Animations<\/h2>\n
The ViewExtensions<\/code> class provides a number of extension methods that can be used to create simple animations that rotate, scale, translate, and fade VisualElement<\/code> instances. By default, each animation takes 250 milliseconds. However, a duration for each animation can be specified when creating the animation.<\/p>\nThe extension methods provided by the ViewExtensions<\/code> class are TranslateTo<\/code>, ScaleTo<\/code>, RelScaleTo<\/code>, RotateTo<\/code>, RelRotateTo<\/code>, RotateXTo<\/code>, RotateYTo<\/code>, and FadeTo<\/code>. Each method is asynchronous and returns a Task<bool><\/code> object. The return value is false<\/code> if the animation completes, and true<\/code> if the animation is cancelled. The animation methods should typically be used with the await<\/code> operator, which makes it possible to easily determine when an animation has completed. However, if there’s a requirement to let an animation complete in the background, then the await<\/code> operator can be omitted. In this scenario, the animation extension methods will quickly return after initiating the animation, with the animation occurring in the background.<\/p>\nThe ViewExtensions<\/code> class also includes a CancelAnimations<\/code> method that can be used to cancel any animations.<\/p>\nPerforming Simple Animations<\/h2>\n
Each extension method in the ViewExtensions<\/code> implements a single animation operation that progressively changes a property from one value to another value over a period of time.<\/p>\nRotation<\/h3>\n
The following code example from the sample application<\/a> demonstrates using the RotateTo<\/code> method to animate the Rotation<\/code> property of an Image<\/code>:<\/p>\nawait image.RotateTo (360, 2000);<\/pre>\nThis code animates the Image<\/code> instance by rotating up to 360 degrees over 2 seconds (2000 milliseconds). The RotateTo<\/code> method obtains the current Rotation<\/code> property value for the start of the animation, and then rotates from that value to its first argument (360).<\/p>\nIn addition, Xamarin.Forms supports relative rotation and rotation with anchors. For more information, see Relative Rotation<\/a> and Scaling and Rotation with Anchors<\/a>.<\/p>\nScaling<\/h3>\n
The following code example from the sample application<\/a> demonstrates using the ScaleTo<\/code> method to animate the Scale<\/code> property of an Image<\/code>:<\/p>\nawait image.ScaleTo (2, 2000);<\/pre>\nThis code animates the Image<\/code> instance by scaling up to twice its size over 2 seconds (2000 milliseconds). The ScaleTo<\/code> method obtains the current Scale<\/code> property value (default value of 1) for the start of the animation, and then scales from that value to its first argument (2). This has the effect of expanding the size of the image to twice its size.<\/p>\nIn addition, Xamarin.Forms supports relative scaling and scaling with anchors. For more information, see Relative Scaling<\/a> and Scaling and Rotation with Anchors<\/a>.<\/p>\nTranslation<\/h3>\n
The following code example from the sample application<\/a> demonstrates using the TranslateTo<\/code> method to animate the TranslationX<\/code> and TranslationY<\/code> properties of an Image<\/code>:<\/p>\nawait image.TranslateTo (-100, -100, 1000);<\/pre>\nThis code animates the Image<\/code> instance by translating it horizontally and vertically over 1 second (1000 milliseconds). The TranslateTo<\/code> method simultaneously translates the image 100 pixels to the left, and 100 pixels upwards. This is because the first and second arguments are both negative numbers. Providing positive numbers would translate the image to the right, and down.<\/p>\nFading<\/h3>\n
The following code example from the sample application<\/a> demonstrates using the FadeTo<\/code> method to animate the Opacity<\/code> property of an Image<\/code>:<\/p>\nawait image.FadeTo (1, 4000);<\/pre>\nThis code animates the Image<\/code> instance by fading it in over 4 seconds (4000 milliseconds). The FadeTo<\/code> method obtains the current Opacity<\/code> property value for the start of the animation, and then fades in from that value to its first argument (1).<\/p>\nCancelling Animations<\/h2>\n
An application can cancel one or more animations with a call to the static ViewExtensions.CancelAnimations<\/code> method, as demonstrated in the following code example from the sample application<\/a>:<\/p>\nViewExtensions.CancelAnimations (image);<\/pre>\nThis will immediately cancel all animations that are currently running on the Image<\/code> instance.<\/p>\nCompound Animations<\/h2>\n
It\u2019s also possible to create sequential animations with subsequent animation methods executing after the previous method has completed. These can be created with the await<\/code> operator, as demonstrated in the following code example from the sample application<\/a>:<\/p>\nawait image.TranslateTo (-100, 0, 1000);\u00a0\u00a0\u00a0 \/\/ Move image left\nawait image.TranslateTo (-100, -100, 1000); \/\/ Move image up\nawait image.TranslateTo (100, 100, 2000);\u00a0\u00a0 \/\/ Move image diagonally down and right\nawait image.TranslateTo (0, 100, 1000);\u00a0\u00a0\u00a0\u00a0 \/\/ Move image left\nawait image.TranslateTo (0, 0, 1000);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Move image up<\/pre>\nIn this example, the Image<\/code> is translated over 6 seconds (6000 milliseconds). The translation of the Image<\/code> uses five translation animations, with the await<\/code> operator indicating that each animation executes sequentially. Therefore, subsequent animation methods execute after the previous method has completed.<\/p>\nComposite Animations<\/h2>\n
Composite animations can be created by mixing awaited and non-awaited animations and using the Task.WhenAny<\/code> and Task.WhenAll<\/code> methods to run multiple asynchronous methods concurrently. Both methods return a Task<\/code> object and accept a collection of methods that each return a Task<\/code> object.<\/p>\nThe following code example, from the sample application<\/a>, demonstrates using the Task.WhenAll<\/code> method to run multiple asynchronous animation methods concurrently:<\/p>\n\/\/ 10 minute animation\nuint duration = 10 * 60 * 1000;\n\nawait Task.WhenAll (\n\u00a0 image.RotateTo (307 * 360, duration),\n\u00a0 image.RotateXTo (251 * 360, duration),\n\u00a0 image.RotateYTo (199 * 360, duration)\n);<\/pre>\nIn this example, the Task.WhenAll<\/code> method call contains three tasks, each of which executes over 10 minutes. Each Task<\/code> makes a different number of 360 degree rotations: 307 rotations for RotateTo<\/code>, 251 rotations for RotateXTo<\/code>, and 199 rotations for RotateYTo<\/code>. These values are prime numbers, therefore ensuring that the rotations aren’t synchronized and hence won’t result in repetitive patterns.<\/p>\nThe following screenshots show the multiple rotations in progress on each platform:![\"multiple-rotations\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/multiple-rotations.png\")
<\/p>\n
Controlling Velocity Changes<\/h2>\n
The animation extension methods in the ViewExtensions<\/code> class allow an easing function to be specified as the final method parameter. The easing function, specified by the Easing<\/code> class, controls how an animation speeds up or slows down as it runs.<\/p>\nThe following code example\u00a0demonstrates specifying different easing functions in a compound animation:<\/p>\n
await image.TranslateTo(0, 200, 2000, Easing.BounceIn);\nawait image.ScaleTo(2, 2000, Easing.CubicIn);\nawait image.RotateTo(360, 2000, Easing.SinInOut);\nawait image.ScaleTo(1, 2000, Easing.CubicOut);\nawait image.TranslateTo(0, -200, 2000, Easing.BounceOut);<\/pre>\nBy specifying an easing function for an animation, the animation velocity becomes non-linear and produces the effect provided by the easing function. For example, the BounceIn<\/code> easing function bounces the animation at the beginning, the CubicIn<\/code> easing function slowly accelerates the animation, and the SinInOut<\/code> easing function smoothly accelerates the animation at the beginning and smoothly decelerates the animation at the end.<\/p>\nOmitting an easing function when creating an animation causes the animation to use the default Linear<\/code> easing function, which produces a linear velocity.<\/p>\nIn addition, custom easing functions can be created. For more information, see Custom Easing Functions<\/a>.<\/p>\nWrapping Up<\/h2>\n
The ViewExtensions<\/code> class provides extension methods that can be used to create simple animations that rotate, scale, translate, and fade VisualElement<\/code> instances. In addition, the ViewExtensions<\/code> class also includes a CancelAnimations<\/code> method that can be used to cancel any animations.<\/p>\nThe animation extension methods in the ViewExtensions<\/code> class also allow an easing function to be specified as the final method parameter. The easing function, specified by the Easing<\/code> class, controls how an animation speeds up or slows down as it runs.<\/p>\n