Xamarin.Forms.AnimationsPack

Xamarin.Forms.AnimationsPack is Animation library for Xamarin.Forms. This library contains Animations.

How to Install

Install from NuGet.

> Install-Package Xamarin.Forms.AnimationsPack

https://www.nuget.org/packages/Xamarin.Forms.AnimationsPack

Demo Project

Demo project applying this library is located to the following path of this repository.

demo/XFAnimationDemo.sln

Let's build and run demo application!

How to Use

Namespace Declaration

xmlns:animationsPack="clr-namespace:Xamarin.Forms.AnimationsPack;assembly=Xamarin.Forms.AnimationsPack"

Apply Animation

EventTrigger

Simple code sample for Xamrin.Forms.Entry control.

<Entry Text="Welcome to Xamarin.Forms!" TextColor="Black" FontSize="20" BackgroundColor="Gray">
  <Entry.Triggers>
    <EventTrigger Event="Focused">
      <animationsPack:EntryTextColorAnimation From="Black" To="Lime" Length="1000" Easing="Linear"/>
      <animationsPack:EntryFontSizeDoubleAnimation To="30" Length="3000"/>
      <animationsPack:BackgroundColorAnimation To="Teal" Easing="CubicInOut"/>
    </EventTrigger>
  </Entry.Triggers>
</Entry>

This example shows following animation.

• Animation starts when Entry is focused.
  • TextColor property : Black > Lime, 1000 millisecond, Linear easing-function
  • FontSize property : 20 > 30, 3000 millisecond, Linear easing-function
  • BackgroundColor property : Gray > Teal, 1000 millisecond, CubicInOut easing-function

DataTrigger

In the DataTrigger sample, we assume that BindingContext is already set, and that ViewModel contains bool type property named IsAnimationWorking.

<Button Command="{Binding RunAnimation}" Text="RunAnimation"/>
<Entry Text="Welcome to Xamarin.Forms!" TextColor="Black" FontSize="20" BackgroundColor="Gray" VerticalOptions="FillAndExpand">
  <Entry.Triggers>
    <DataTrigger TargetType="Entry" Binding="{Binding Path=IsAnimationWorking,Mode=OneWay,UpdateSourceEventName=PropertyChanged}" Value="true">
      <DataTrigger.EnterActions>
        <animationsPack:EntryTextColorAnimation From="Black" To="Yellow" Length="1000" Easing="BounceIn"/>
        <animationsPack:EntryFontSizeDoubleAnimation To="50" Length="2000"/>
        <animationsPack:BackgroundColorAnimation To="Red" Easing="SinIn"/>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
        <animationsPack:EntryTextColorAnimation To="Black"/>
        <animationsPack:EntryFontSizeDoubleAnimation To="20"/>
        <animationsPack:BackgroundColorAnimation To="Gray"/>
      </DataTrigger.ExitActions>
    </DataTrigger>
  </Entry.Triggers>
</Entry>

This example shows following animation.

• Animation starts when Button is clicked (IsAnimationWorking is set to true when Button is clicked).
  • TextColor property : Black > Yellow, 1000 millisecond, BounceIn easing-function
  • FontSize property : 20 > 50, 2000 millisecond, Linear easing-function
  • BackgroundColor property : Gray > Red, 1000 millisecond, SinIn easing-function
• After 2 seconds, another animation starts (IsAnimationWorking is force change to false after 2 seconds).
  • TextColor property : Yellow > Black, 1000 milliseconds, Linear easing-function
  • FontSize property : 50 > 20, 1000 milliseconds, Linear easing-function
  • BackgroundColor property : Red > Gray, 1000 milliseconds, Linear easing-function

Note : (Bold Property) is explicitly specified property. (Italic property) is unspecified and apply to default-value property

Dependencies

Xamarin.Forms : 3.2.0.871581

Common Property

public T From { get; set; } = default(T); // Animation starting value
public T To { get; set; } = default(T); // Animation ending value
public uint Length { get; set; } = 1000; // Animation Length (milliseconds)
public string Easing { get; set; } = "Linear"; // Animation EasingFunction name

• From : Optional
  • If From do not set, then use current property value
• To : Required
• Length : Optional
• Easing : Optional
  • https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.easing?view=xamarin-forms

Animation List

Property Owner	Property	Animation Class Name	T	Implemented
VisualElement	BackgroundColor	BackgroundColorAnimation	Color	✓
	Opacity	OpacityDoubleAnimation	double	✓
	HeightRequest	HeightRequestDoubleAnimation	double	✓
	WidthRequest	WidthRequestDoubleAnimation	double	✓
	Rotation	(RotationTo)	double	-
	Scale	(ScaleTo)	double	-
View	Margin	MarginThicknessAnimation	Thickness	✓
Label	FontSize	LabelFontSizeDoubleAnimation	double	✓
	TextColor	LabelTextColorAnimation	Color	✓
	LineHeight	LabelLineHeightDoubleAnimation	double	✓
ActivityIndicator	Color	ActivityIndicatorColorAnimation	Color	△
BoxView	Color	BoxViewColorAnimation	Color	✓
	CornerRadius	BoxViewCornerRadiusAnimation	CornerRadius	✓
Button	BorderColor	ButtonBorderColorAnimation	Color	✓
	BorderWidth	ButtonBorderWidthDoubleAnimation	double	✓
	CornerRadius	ButtonCornerRadiusAnimation	CornerRadius	✓
	FontSize	ButtonFontSizeDoubleAnimation	double	✓
	Padding	ButtonPaddingThicknessAnimation	Thickness	✓
	TextColor	ButtonTextColorAnimation	Color	✓
DatePicker	FontSize	DatePickerFontSizeDoubleAnimation	double	✓
	TextColor	DatePickerTextColorAnimation	Color	✓
Layout	Padding	LayoutPaddingThicknessAnimation	Thickness	✓
AbsoluteLayout	LayoutBounds	AbsoluteLayoutBoundsRectangleAnimation	Rectangle	?
Grid	ColumnSpacing	GridColumnSpacingDoubleAnimation	double	✓
	RowSpacing	GridRowSpacingDoubleAnimation	double	✓
StackLayout	Spacing	StackLayoutSpacingDoubleAnimation	double	✓
Picker	TextColor	PickerTextColorAnimation	Color	✓
	FontSize	PickerFontSizeDoubleAnimation	double	✓
ProgressBar	ProgressColor	ProgressBarColorAnimation	Color	✓
Slider	MaximumTrackColor	SliderMaximumTrackColorAnimation	Color	✓
	MinimumTrackColor	SliderMinimumTrackColorAnimation	Color	✓
	ThumbColor	SliderThumbColorAnimation	Color	✓
Switch	OnColor	SwitchOnColorAnimation	Color	✓
TableView	RowHeight	TableViewRowHeightIntAnimation	int	✕
TimePicker	FontSize	TimePickerFontSizeDoubleAnimation	double	✓
	TextColor	TimePickerTextColorAnimation	Color	✓
Editor	FontSize	EditorFontSizeDoubleAnimation	double	✓
	PlaceholderColor	EditorPlaceholderColorAnimation	Color	✓
	TextColor	EditorTextColorAnimation	Color	✓
Entry	FontSize	EntryFontSizeDoubleAnimation	double	✓
	PlaceholderColor	EntryPlaceholderColorAnimation	Color	✓
	TextColor	EntryTextColorAnimation	Color	✓
ListView	RowHeight	ListViewRowHeightDoubleAnimation	double	✕
	SeparatorColor	ListViewSeparatorColorAnimation	Color	✓
Frame	BorderColor	FrameBorderColorAnimation	Color	✓
	CornerRadius	FrameCornerRadiusAnimation	CornerRadius	✓
	OutlineColor(Obsolete)	FrameOutlineColorAnimation	Color	✓

Xamarin.Forms namespace Class Diagram

https://drive.google.com/file/d/1cYChmthboGXX__Rg5pFC1O2pTNE7vWGy/view?usp=sharing