Awesome

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

Xamarin.Forms namespace Class Diagram

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