https://github.com/takecx/Xamarin.Forms.AnimationsPack

Visual Element Animation library for Xamarin.Forms. BackgroundColor,Opacity,Margin,FontSize,CornerRadius and so on.
https://github.com/takecx/Xamarin.Forms.AnimationsPack

animation animation-library xamarin xamarin-forms xamarin-library

Last synced: 7 months ago
JSON representation

Visual Element Animation library for Xamarin.Forms. BackgroundColor,Opacity,Margin,FontSize,CornerRadius and so on.

• Host: GitHub
• URL: https://github.com/takecx/Xamarin.Forms.AnimationsPack
• Owner: takecx
• License: mit
• Created: 2018-10-11T15:44:57.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T15:38:00.000Z (about 7 years ago)
• Last Synced: 2025-04-13T09:44:12.485Z (8 months ago)
• Topics: animation, animation-library, xamarin, xamarin-forms, xamarin-library
• Language: C#
• Homepage: https://www.nuget.org/packages/Xamarin.Forms.AnimationsPack/
• Size: 386 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-xamarin-forms - Xamarin.Forms.AnimationsPack ★11

README

          
# Xamarin.Forms.AnimationsPack

Xamarin.Forms.AnimationsPack is Animation library for Xamarin.Forms.

This library contains [Animations](#animation-list).

# How to Install

Install from NuGet.

```

> Install-Package Xamarin.Forms.AnimationsPack

```

[https://www.nuget.org/packages/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

~~~XAML

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

~~~

## Apply Animation

### EventTrigger

Simple code sample for Xamrin.Forms.Entry control.

~~~XAML

  

    

      

      

      

    

  

~~~

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

```XAML

  

    

      

        

        

        

      

      

        

        

        

      

    

  

```

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](#common-property) property

# Dependencies

Xamarin.Forms : 3.2.0.871581

# Common Property

~~~C#

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