Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 30 days ago
JSON representation

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

Awesome Lists containing this project

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