ravisinghunnao / xamarin.forms.propertyanimation

Library to animate Xamarin forms views property.

# Xamarin.forms.PropertyAnimation

This is an animation library for xamarin forms controls. We can animate any property with supported type. Currenlty this library has three types which can be animated.These are double, Integer and color. So if any control has any property with these types, we can animate that.

We can download Nuget package for this library from https://www.nuget.org/packages/Xamarin.Forms.PropertyAnimation.

This library has two type of animations.

1- Sequentional.

2- Parallel.

In sequential property animation, each animation will start after completion of its previous animation but if we want to animate multiple properties simultaneously, We can use parellel property animation. Parallel property animation provides more feature including features of Sequentional property animation.

This animator has few basic properties which need to understand.

1. StartValue : Initial value from where animation need to start:
2. EndValue: Last value where animation will finish.
3. PropertyName: Name of property which we want to animate.
4. Target: Which control's property need to animate.
   
   Except these properties there are few optional properties which also can be used to customize animation behaviour.
   
   
5. Toggle: This property instructs animator to reverse animation from EndValue to StartValue.
6. Duration: How long animation should run.
7. AnimationEasing: Animation Easing.
8. Rate: Frame rate of animation.
9. Delay: Not yet Implemented.

Usage:

Install Nuget package Xamarin.Forms.PropertyAnimation in shared project.

Add Reference in xaml file or C# file.

Xaml Example:

xmlns:PA="clr-namespace:Animation;assembly=Animation"

C# Example

using Animation;

After importing animation namespace, we can use animation library as following:

Xaml:

PropertyAnimation:

<Button Text="Property Animation" BackgroundColor="#ffff0000" x:Name="btn" >
<Button.Triggers>
<EventTrigger Event="Clicked" >
<PA:PropertyAnimator Toggle="True">
<PA:PropertyAnimator.PropertyAnimations >
<PA:ColorAnimation StartValue="#ffff0000" EndValue="#ffffff00" PropertyName="BackgroundColor" Target="{x:Reference btn}" Length="500"></PA:ColorAnimation>
<PA:ColorAnimation StartValue="#00000000" EndValue="#ffffffff" PropertyName="TextColor" Target="{x:Reference btn}" Length="500" ></PA:ColorAnimation>
</PA:PropertyAnimator.PropertyAnimations>
</PA:PropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

 

Parellel Property Animation:

<Button Text="Parallel Property Animation" BackgroundColor="#ffff0000" x:Name="btn2" BorderColor="Black">
<Button.Triggers>
<EventTrigger Event="Clicked" >
<PA:ParellelPropertyAnimator Toggle="True">
<PA:ParellelPropertyAnimator.ParallelAnimations >
<PA:ParallelAnimation Target="{x:Reference btn2}">
<PA:ParallelAnimation.PropertyAnimations >
<PA:ColorAnimation Target="{x:Reference btn2}" StartValue="#ff0000" EndValue="#ffff00" PropertyName="BackgroundColor" Length="100"></PA:ColorAnimation>
<PA:ColorAnimation Target="{x:Reference btn2}" StartValue="#ffffffff" EndValue="#000000" PropertyName="TextColor" Length="100" ></PA:ColorAnimation>
<PA:IntegerAnimation Target="{x:Reference btn2}" StartValue="5" EndValue="25" PropertyName="CornerRadius" Length="100" ></PA:IntegerAnimation>
<PA:DoubleAnimation StartValue="1" EndValue="5" PropertyName="BorderWidth" Length="100" Target="{x:Reference btn2}"></PA:DoubleAnimation>
</PA:ParallelAnimation.PropertyAnimations>
</PA:ParallelAnimation>
</PA:ParellelPropertyAnimator.ParallelAnimations>
</PA:ParellelPropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

 

Complete Code of Demo Image

 

<StackLayout VerticalOptions="CenterAndExpand" Padding="20">
<Button Text="Property Animation" BackgroundColor="#ffff0000" x:Name="btn" >
<Button.Triggers>
<EventTrigger Event="Clicked" >
<PA:PropertyAnimator Toggle="True">
<PA:PropertyAnimator.PropertyAnimations >
<PA:ColorAnimation StartValue="#ffff0000" EndValue="#ffffff00" PropertyName="BackgroundColor" Target="{x:Reference btn}" Length="250"></PA:ColorAnimation>

 

</PA:PropertyAnimator.PropertyAnimations>
</PA:PropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

<Button Text="Parallel Property Animation" BackgroundColor="#ffff0000" x:Name="btn2" BorderColor="Black">
<Button.Triggers>
<EventTrigger Event="Clicked" >
<PA:ParellelPropertyAnimator Toggle="True">
<PA:ParellelPropertyAnimator.ParallelAnimations >
<PA:ParallelAnimation Target="{x:Reference btn2}">
<PA:ParallelAnimation.PropertyAnimations >
<PA:ColorAnimation Target="{x:Reference btn2}" StartValue="#ff0000" EndValue="#ffff00" PropertyName="BackgroundColor" Length="150"></PA:ColorAnimation>
<PA:ColorAnimation Target="{x:Reference btn2}" StartValue="#ffffffff" EndValue="#000000" PropertyName="TextColor" Length="150" ></PA:ColorAnimation>
<PA:IntegerAnimation Target="{x:Reference btn2}" StartValue="5" EndValue="25" PropertyName="CornerRadius" Length="150" ></PA:IntegerAnimation>
<PA:DoubleAnimation StartValue="1.0" EndValue="5.0" PropertyName="BorderWidth" Length="150" Target="{x:Reference btn2}"></PA:DoubleAnimation>

</PA:ParallelAnimation.PropertyAnimations>
</PA:ParallelAnimation>
</PA:ParellelPropertyAnimator.ParallelAnimations>
</PA:ParellelPropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>
<BoxView Color="Green" x:Name="bv1" HeightRequest="100" WidthRequest="200" HorizontalOptions="CenterAndExpand" >

</BoxView>
<Button Text="Animate BoxView (Property Animation)" x:Name="aniboxview" >
<Button.Triggers>
<EventTrigger Event="Clicked">
<PA:PropertyAnimator Toggle="True">
<PA:PropertyAnimator.PropertyAnimations>
<PA:ColorAnimation Target="{x:Reference bv1}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="Color" Length="250"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference bv1}" StartValue="0" EndValue="360.0" PropertyName="Rotation" Length="250"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference bv1}" StartValue="1.0" EndValue="0.5" PropertyName="Scale" Length="250"></PA:DoubleAnimation>
<PA:CornerRadiusAnimation Target="{x:Reference bv1}" StartValue="0" EndValue="20" PropertyName="CornerRadius" Length="250"></PA:CornerRadiusAnimation>
</PA:PropertyAnimator.PropertyAnimations>
</PA:PropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

<BoxView Color="Green" x:Name="bv2" HeightRequest="100" WidthRequest="200" HorizontalOptions="CenterAndExpand" >

</BoxView>
<Button Text="Animate BoxView (Parellel Property Animation)" x:Name="aniboxview2" >
<Button.Triggers>
<EventTrigger Event="Clicked">
<PA:ParellelPropertyAnimator Toggle="True">
<PA:ParellelPropertyAnimator.ParallelAnimations>
<PA:ParallelAnimation Target="{x:Reference bv2}">
<PA:ParallelAnimation.PropertyAnimations>
<PA:ColorAnimation Target="{x:Reference bv2}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="Color" Length="150"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference bv2}" StartValue="0" EndValue="360.0" PropertyName="Rotation" Length="150"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference bv2}" StartValue="1.0" EndValue="0.5" PropertyName="Scale" Length="150"></PA:DoubleAnimation>
<PA:CornerRadiusAnimation Target="{x:Reference bv2}" StartValue="0" EndValue="20" PropertyName="CornerRadius" Length="150"></PA:CornerRadiusAnimation>

</PA:ParallelAnimation.PropertyAnimations>
</PA:ParallelAnimation>
</PA:ParellelPropertyAnimator.ParallelAnimations>
</PA:ParellelPropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<BoxView Color="Green" x:Name="boxview" HeightRequest="100" WidthRequest="200" HorizontalOptions="Center" >

</BoxView>
<Entry x:Name="entry" Text="Sample Text" HorizontalOptions="Center"></Entry>

</StackLayout>
<Button x:Name="animul2" Text="Animate multiple (Property Animation)">
<Button.Triggers>
<EventTrigger Event="Clicked">
<PA:PropertyAnimator Toggle="True" >

<PA:PropertyAnimator.PropertyAnimations >
<PA:ColorAnimation Target="{x:Reference boxview}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="Color" Length="250"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference boxview}" StartValue="0" EndValue="360.0" PropertyName="Rotation" Length="250"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference boxview}" StartValue="1.0" EndValue="0.5" PropertyName="Scale" Length="250"></PA:DoubleAnimation>
<PA:CornerRadiusAnimation Target="{x:Reference boxview}" StartValue="0,0,0,0" EndValue="10,20,30,20" PropertyName="CornerRadius" Length="250"></PA:CornerRadiusAnimation>
<PA:ColorAnimation Target="{x:Reference entry}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="BackgroundColor" Length="250"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference entry}" StartValue="1.0" EndValue="10.0" PropertyName="CharacterSpacing" Length="250"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference entry}" StartValue="1.0" EndValue="1.5" PropertyName="Scale" Length="250"></PA:DoubleAnimation>
</PA:PropertyAnimator.PropertyAnimations>

</PA:PropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

<Button x:Name="animul1" Text="Animate multiple (Parallel Animation)">
<Button.Triggers>
<EventTrigger Event="Clicked">
<PA:ParellelPropertyAnimator Toggle="True" >
<PA:ParellelPropertyAnimator.ParallelAnimations>
<PA:ParallelAnimation Target="{x:Reference animul1}">
<PA:ParallelAnimation.PropertyAnimations >
<PA:ColorAnimation Target="{x:Reference boxview}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="Color" Length="50"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference boxview}" StartValue="0" EndValue="360" PropertyName="Rotation" Length="50"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference boxview}" StartValue="1" EndValue="0.5" PropertyName="Scale" Length="50"></PA:DoubleAnimation>
<PA:CornerRadiusAnimation Target="{x:Reference boxview}" StartValue="0,0,0,0" EndValue="10,20,30,20" PropertyName="CornerRadius" Length="50"></PA:CornerRadiusAnimation>
<PA:ColorAnimation Target="{x:Reference entry}" StartValue="#00ff00" EndValue="#ff0000" PropertyName="BackgroundColor" Length="50"></PA:ColorAnimation>
<PA:DoubleAnimation Target="{x:Reference entry}" StartValue="1" EndValue="10" PropertyName="CharacterSpacing" Length="50"></PA:DoubleAnimation>
<PA:DoubleAnimation Target="{x:Reference entry}" StartValue="1" EndValue="1.5" PropertyName="Scale" Length="50"></PA:DoubleAnimation>
</PA:ParallelAnimation.PropertyAnimations>
</PA:ParallelAnimation>
</PA:ParellelPropertyAnimator.ParallelAnimations>
</PA:ParellelPropertyAnimator>
</EventTrigger>
</Button.Triggers>
</Button>

</StackLayout>

References