Animations

This page tells about animations and how to work with them.

Default Animations

The plugin has default animations which you can use very simply. There are all default animations in the Rg.Plugins.Popup.Animations.

All default animations have these properties:

• DurationIn - Duration of the appearing animation
• DurationOut - Duration of the disappearing animation
• EasingIn - Easing of the appearing animation
• EasingOut - Easing of the disappearing animation
• HasBackgroundAnimation - Enables or disables a background animation.

Default Animations

• FadeAnimation - the simplest animation. It just changes opacity Content of PopupPage and opacity of background.
• MoveAnimation - The move animation. You can set left, top, right, bottom and center for appearing and disappearing.
  • PositionIn - Start position for the appearing animation
  • PositionOut - End position for the disappearing animation
• ScaleAnimation - Scale and move animations in the one animation.
  • PositionIn - Start position for the appearing animation
  • PositionOut - End position for the disappearing animation
  • ScaleIn - Start scale for appearing animation
  • ScaleOut - End scale for the disappearing animation

Custom Animations

To create a custom animation you should create a class which implements Rg.Plugins.Popup.Interfaces.Animations.IPopupAnimation.

IPopupAnimation methods

• Preparing - Invoked before a PopupPage appears
• Disposing - Invoked after a PopupPage disappers
• Appearing - Invoked when an appearing animation should animate a PopupPage
• Disappearing - Invoked when an disappearing animation should animate a PopupPage

Apply Animations

You can apply default or custom animations in a xaml file or a csharp code-behind file of the PopupPage.

Example

Applying a default or a custom animations in a xaml file:

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
    xmlns:myAnimations="clr-namespace:MyProject.Animations;assembly=MyProject"
    x:Class="MyProject.MyPopupPage">
    <!--Default Animation-->
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"/>
    </pages:PopupPage.Animation>
    <!--Or Custom Animation-->
    <pages:PopupPage.Animation>
        <myAnimations:myAnimations:MyCustomAnimation/>
    </pages:PopupPage.Animation>
    <!--Content-->
</pages:PopupPage>

Applying a default or a custom animations in a csharp code-behind file:

namespace MyProject
{
    public partial class MyPopupPage : PopupPage
    {
        public MyPopupPage()
        {
            InitializeComponent();

            // Default animation
            Animation = new Rg.Plugins.Popup.Animations.ScaleAnimation();

            // Or your custom animation
            Animation = new MyProject.Animations.MyCustomAnimation();
        }
    }
}