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:

	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="DemoApp.DemoAnimation"
	Title="Animation Demo">
	<ContentPage.Content>
	<StackLayout BackgroundColor="Gray" Padding="10" VerticalOptions="FillAndExpand">
	<StackLayout BackgroundColor="LawnGreen" Padding="10" VerticalOptions="Start" >
	<Image x:Name="Translaeimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>
	<Image x:Name="Scallimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>
	<Image x:Name="Fadimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>
	<Image x:Name="Rotateimage" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>
	<Image x:Name="CompImg" Source="icon" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start"/>
	<ScrollView Orientation="Horizontal" VerticalOptions="End">
	<StackLayout VerticalOptions="End" Orientation="Horizontal">
	<Button Text="Fad" Clicked="Fad_Clicked"/>
	<Button Text="Scall" Clicked="Scall_Clicked"/>
	<Button Text="Rotate" Clicked="Rotate_Clicked"/>
	<Button Text="Trans." Clicked="Translate_Clicked"/>
	<Button Text="Compound" Clicked="Compound_Clicked"/>
	</StackLayout>
	</ScrollView>
	</StackLayout>
	</StackLayout>
	</ContentPage.Content>

view raw DemoAnimation.xaml hosted with ❤ by GitHub

Now we write c# code:

	public partial class DemoAnimation : ContentPage
	{
	public DemoAnimation()
	{
	InitializeComponent();
	}
	private async void Fad_Clicked(object sender, EventArgs e)
	{
	Fadimage.Opacity = 0; //Opacity Change to 0 meanse element fully Hide
	await Fadimage.FadeTo(1, 2000); //Opacity Change to 1 meanse element fully Appear in 2 sec
	}
	private async void Scall_Clicked(object sender, EventArgs e)
	{
	await Scallimage.ScaleTo(2, 2000);// Resize the Element
	await Task.Delay(1000); //1 Sec interval time
	await Scallimage.ScaleTo(1, 2000);// Resize the Element
	}
	private async void Rotate_Clicked(object sender, EventArgs e)
	{
	await Rotateimage.RotateTo(360, 2000);//Element Rotate to 360 degree in 2 sec
	}
	private async void Translate_Clicked(object sender, EventArgs e)
	{
	await Translaeimage.TranslateTo(100, 100, 2000);// Move to down Element
	await Task.Delay(1000); //1 Sec interval time
	await Translaeimage.TranslateTo(0, 0, 2000); // Move to down Element
	}
	private async void Compound_Clicked(object sender, EventArgs e)
	{
	await CompImg.TranslateTo(0, 200, 2000, Easing.BounceIn);// Move to down Element
	await CompImg.ScaleTo(2, 2000, Easing.CubicIn); // Resize the Element
	await CompImg.FadeTo(0, 1000); //Opacity Change to 0 meanse element fully Hide
	await CompImg.FadeTo(1, 1000); //Opacity Change to 1 meanse element fully Appear
	await CompImg.RotateTo(360, 2000, Easing.SinInOut); //Element Rotate to 360 degree
	await CompImg.ScaleTo(1, 2000, Easing.CubicOut); //Again Resize the Element
	await CompImg.TranslateTo(0, 0, 2000, Easing.BounceOut); // Move to up the Element
	}
	}

view raw DemoAnimation.cs hosted with ❤ by GitHub

TADDA !

Animation In Android

 

Xamarin Forms Lottie Animations

What is Lottie ?

Lottie is an iOS, Android, and Xamarin.Forms Native library that renders After Effects animations in real time,allowing apps to use animations as easily as they use static images with the Json file.

Why Lottie?

• This tool or library is very effective and flexible to use.
• Make your animation efficient in any way.
• Small Jason File Size.
• To use the Lite Library is terrible and easy, now also available on Xamarin form. Below I'm  mentioned important URL To check the Git Repository, I want to very thank Martijn van Dijk
https://github.com/martijn00/LottieXamarin 

NuGet package:https://www.nuget.org/packages/Com.Airbnb.Xamarin.Forms.Lottie/2.3.4

Available on NuGet! 

Install-Package Com.Airbnb.Xamarin.Forms.Lottie -Version 2.3.4 

Now i am Install the Lottie Package in all your projects:

 

Here initialize Lottie plugin in both project Android(In MainActivity) and Ios(In AppDelegate) using AnimationViewRenderer.Init(); 
you initialize Lottie plugin in Android Project in MainActivity.

you initialize Lottie plugin in Ios Project AppDelegate.

  

Now we use json, if you don’t have one you can choose  JSON file from here:https://www.lottiefiles.com/

Now you add json in iOS  project and make sure you have the build action in Bundle Resource
select animation json and right, click then click on property.

In Android, add your json and make sure you have the build action in Android Asset.

select animation json and right click, then click on the property. 

Now we write code in xaml and Add the reference  

xmlns:forms=“clr-namespace:Lottie.Forms;assembly=Lottie.Forms“

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:LottieSample"
	x:Class="LottieSample.MainPage"
	xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
	<ContentPage.Content>
	<StackLayout>
	<forms:AnimationView
	x:Name="AnimationView"
	Animation="motorcycle.json"
	AutoPlay="True"
	Loop="True"
	OnPlay="AnimationView_OnPlay"
	OnPause="AnimationView_OnPause"
	VerticalOptions="FillAndExpand"
	HorizontalOptions="FillAndExpand" />
	</StackLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

TADAA!,

you should have your animation working!!

 

Lottie Animation In Android

  Click Here to Complete Source

Lottie Animation in Ios

Click Here to Complete Source Code

Xamarin.Forms Floating Action Button

Xamarin.Forms Floating Action Button

Hello Xamarians,

This is my first post and I do not know how much better it will be for other people. If I see some mistake then please let me know that.
In this, I am talking about FloatingActionButton or “FAB” from how we can use xamarin forms with the help of the plugin.

Here are some links:https://github.com/keannan5390/Xamarin.Plugin.FAB 

NuGet package:https://www.nuget.org/packages/FAB.Forms/2.2.0-pre1

Now Available on NuGet!

Install-Package FAB.Forms -Version 2.2.0-pre1  

Install the NuGet package and then you we include it in your XAML or call it from C#.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:App1"
	xmlns:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
	x:Class="App1.MainPage">
	<ContentPage.Content>
	<RelativeLayout>
	<ContentView RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
	RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
	<ListView x:Name="MainList"
	BackgroundColor="White">
	<ListView.ItemTemplate>
	<DataTemplate>
	<TextCell Text="{Binding .}" />
	</DataTemplate>
	</ListView.ItemTemplate>
	</ListView>
	</ContentView>
	<fab:FloatingActionButton
	x:Name="fabBtn"
	Source="icon.png"
	Size="Normal"
	Clicked="Handle_FabClicked"
	NormalColor="Green"
	RippleColor="Red"
	HasShadow="True"
	RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
	RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
	</RelativeLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

 Here is some code behind c# code:

	using System.Collections.Generic;
	using Xamarin.Forms;
	namespace App1
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	PreList();
	}
	private void PreList()
	{
	var items = new List<string>();
	for (int i = 0; i < 50; i++)
	{
	items.Add(string.Format("Item {0}", i));
	}
	MainList.ItemsSource = items;
	}
	void Handle_FabClicked(object sender, System.EventArgs e)
	{
	this.DisplayAlert("Floating Action Button", "You clicked the FAB!", "Awesome!");
	}
	}
	}

view raw MainPage.cs hosted with ❤ by GitHub

Android Example:

 

Ios Example:

 

Make it more flexible: 

if you want to add different type of Background color in FAB so you can use NormalColor="Green" property.
you can Adjust Height and Width with the using of HeightRequest="90"    
WidthRequest="90"
And showing Shadow to use HasShadow="True" and etc.

Click Here to Complete Source Code