Post
Ask Question

Xamarin.Forms Simple Animation

Xamarin.Forms Animation

Hello friends! Animation is a great way to help you make your app even more attractive and smooth. Note that there is no XAML interface for the Xamarin.Forms animation classes. However, animations can be encapsulated in behaviors and then referenced from XAML.

The ViewExtensions class provides the following extension methods that can be used to create simple animations.

  • TranslateTo animates the TranslationX and TranslationY properties of a VisualElement.
  • ScaleTo animates the Scale property of a VisualElement.
  • RotateTo animates the Rotation property of a VisualElement.
  • RotateXTo animates the RotationX property of a VisualElement.
  • RotateYTo animates the RotationY property of a VisualElement.
  • FadeTo animates the Opacity property of a VisualElement.

Simple Animations

Each extension method in the ViewExtensions implements a single animation operation that progressively changes a property from one value to another value over a period of time.

Scaling

The scale method increases or decreases the size of an element (according to the parameters given for the width and height). Scaling refers to the resizing of an element. Scaling is used to change the visual appearance of an image, to alter the quantity of information stored in a scene representation, or as a low-level preprocessor in multi-stage image processing chain which operates on features of a particular scale.

  1. await image.ScaleTo (2, 2000);  

Rotation

A rotation is a circular movement of an object around a center (or point) of rotation. The rotate method rotates an element clockwise or counter-clockwise according to a given degree.

  1. await image.RotateTo (360, 2000);  

Translation

The translate method moves an element from its current position (according to the parameters given for the X-axis or TranslationX and the Y-axis or TranslationY).

  1. await image.TranslateTo (-100, -100, 1000);  

Fading

There is no property such as transparency. But, you can achieve transparency by inserting a pseudo element with regular opacity the exact size of the element behind it. The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

The opacity property specifies the opacity/transparency of an element. The opacity property can take a value between 0.0 - 1.0.

  1. image.Opacity = 0; await image.FadeTo (1, 4000);  

Compound Animations

A compound animation is a sequential combination of animations and can be created with the await operator.

Composite Animations

A composite animation is a combination of animations where two or more animations run simultaneously. Composite animations can be created by mixing awaited and non-awaited animations.

  1. await Task.WhenAll(image.RotateTo(307 * 360, 2000), image.RotateXTo(251 * 360, 2000), image.RotateYTo(199 * 360, 2000)); 

Canceling Animations

An application can cancel one or more animations with a call to the static ViewExtensions.CancelAnimations method.

  1. ViewExtensions.CancelAnimations (image);  

Let`s start Animation Demo.

Create an XAML and design:

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  3.              x:Class="DemoApp.DemoAnimation"  
  4.              Title="Animation Demo">  
  5.     <ContentPage.Content>  
  6.         <StackLayout BackgroundColor="Gray" Padding="10" VerticalOptions="FillAndExpand">  
  7.             <StackLayout BackgroundColor="LawnGreen" Padding="10" VerticalOptions="Start" >  
  8.                 <Image x:Name="Translaeimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>  
  9.                 <Image x:Name="Scallimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>  
  10.                 <Image x:Name="Fadimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>  
  11.                 <Image x:Name="Rotateimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>  
  12.                 <Image x:Name="CompImg" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>  
  13.                 <ScrollView Orientation="Horizontal" VerticalOptions="End">  
  14.                     <StackLayout VerticalOptions="End" Orientation="Horizontal">  
  15.                     <Button Text="Fad" Clicked="Fad_Clicked"/>  
  16.                     <Button Text="Scall" Clicked="Scall_Clicked"/>  
  17.                     <Button Text="Rotate" Clicked="Rotate_Clicked"/>  
  18.                     <Button Text="Trans." Clicked="Translate_Clicked"/>  
  19.                     <Button Text="Compound" Clicked="Compound_Clicked"/>  
  20.                     </StackLayout>  
  21.                 </ScrollView>  
  22.             </StackLayout>  
  23.         </StackLayout>  
  24.     </ContentPage.Content>  

Now, let us write the C# code:

  1. public partial class DemoAnimation : ContentPage  
  2.     {  
  3.         public DemoAnimation()  
  4.         {  
  5.             InitializeComponent();  
  6.         }  
  7.   
  8.         private async void Fad_Clicked(object sender, EventArgs e)  
  9.         {  
  10.             Fadimage.Opacity = 0;           //Opacity Change to 0 meanse element fully Hide     
  11.            await Fadimage.FadeTo(1, 2000);  //Opacity Change to 1 meanse element fully Appear in 2 sec  
  12.         }  
  13.         private async void Scall_Clicked(object sender, EventArgs e)  
  14.         {  
  15.             await Scallimage.ScaleTo(2, 2000);// Resize the Element  
  16.             await Task.Delay(1000);           //1 Sec interval time  
  17.             await Scallimage.ScaleTo(1, 2000);// Resize the Element  
  18.         }  
  19.   
  20.         private async void Rotate_Clicked(object sender, EventArgs e)  
  21.         {  
  22.             await Rotateimage.RotateTo(360, 2000);//Element Rotate to 360 degree in 2 sec  
  23.         }  
  24.         private async void Translate_Clicked(object sender, EventArgs e)  
  25.         {  
  26.             await Translaeimage.TranslateTo(100, 100, 2000);// Move to down Element  
  27.             await Task.Delay(1000);                          //1 Sec interval time  
  28.             await Translaeimage.TranslateTo(0, 0, 2000);    // Move to down Element  
  29.         }  
  30.   
  31.         private async void Compound_Clicked(object sender, EventArgs e)  
  32.         {  
  33.             await CompImg.TranslateTo(0, 200, 2000, Easing.BounceIn);// Move to down Element  
  34.             await CompImg.ScaleTo(2, 2000, Easing.CubicIn);          // Resize the Element  
  35.             await CompImg.FadeTo(0, 1000);                           //Opacity Change to 0 meanse element fully Hide     
  36.             await CompImg.FadeTo(1, 1000);                           //Opacity Change to 1 meanse element fully Appear  
  37.             await CompImg.RotateTo(360, 2000, Easing.SinInOut);      //Element Rotate to 360 degree  
  38.             await CompImg.ScaleTo(1, 2000, Easing.CubicOut);         //Again Resize the Element  
  39.             await CompImg.TranslateTo(0, 0, 2000, Easing.BounceOut); // Move to up the Element  
  40.         }  
  41.     }  

Animation In Android
Next Recommended Reading Xamarin.Forms Lottie Animations