Xamarin.Forms Animation

Hello friends animation is a great way to help you make your app even more attractive and smoother.
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.

Scalling

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 a 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.

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.

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).

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 from 0.0 - 1.0.

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.

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.

ViewExtensions.CancelAnimations (image);

Let`s Start Animation Demo
Create a XAML and design:

Now we write c# code:

TADDA !

Animation In Android