Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/ravisinghunnao/Xamarin.forms.PropertyAnimation

Library to animate Xamarin forms views property.
https://github.com/ravisinghunnao/Xamarin.forms.PropertyAnimation
property-animation
Last synced: 29 days ago
JSON representation
Library to animate Xamarin forms views property.
Host: GitHub
URL: https://github.com/ravisinghunnao/Xamarin.forms.PropertyAnimation
Owner: ravisinghunnao
License: mit
Created: 2020-03-10T14:55:47.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-02-17T06:16:37.000Z (10 months ago)
Last Synced: 2024-10-14T04:35:22.071Z (2 months ago)
Topics: property-animation
Language: C#
Homepage: https://ravisinghunnao.github.io/Xamarin.forms.PropertyAnimation/
Size: 1.08 MB
Stars: 3
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

awesome-xamarin-forms - Xamarin.Forms.PropertyAnimation ★3
README

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





StartValue : Initial value from where animation need to start:



EndValue: Last value where animation will finish.



PropertyName: Name of property which we want to animate.



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.







Toggle: This property instructs animator to reverse animation from EndValue to StartValue.



Duration: How long animation should run.



AnimationEasing: Animation Easing.



Rate: Frame rate of animation.



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