Understanding Animation with the Trigger in Xamarin

iFour Team -July 07, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Understanding Animation with the Trigger in Xamarin

Table of Content

1.What is the trigger?
2.Type of Trigger
- 2.1.Property Trigger
- 2.2.Event Trigger
- 2.3.Data-trigger
- 2.4.Multi trigger
3.Animations
4.Event Trigger
5.Conclusion

In this post, we have created an example of animation using Trigger but first, we will learn what Trigger is.

What is the trigger?

A trigger is a tool that is used to change the behavior of something when a particular set of actions has been performed. You can add a true or false condition in control to set the animation. If the condition is true then the control will remain in normal position or else the design of the control will be changed or will be something else. This is the basic definition of a trigger.

Type of Trigger

1. Property Trigger

The property Trigger will be applied to the property of a control. When we apply the trigger on the property then it should have its properties which are set to the trigger. So the behavior of the trigger will be as the property set to the control.

Example

2. Event Trigger

When the state of the control will be changed for some execution then this trigger will be fired.

3. Data-trigger

This trigger is the same as the property Trigger the only difference between this and property Trigger is we have to bind the data in the data Trigger we cannot execute data directly in this Trigger.

4. Multi trigger

This trigger is the same as the trigger, but in this Trigger, you can write multiple conditions and if all the conditions will be satisfied then and only then this trigger will be executed.

Example

If(condition-1 && condition-2&& condition-3)
{
    //Trigger Setter
}

Animations

Animation means to change the control from the original state to another temporary state and revert it to as it was that is called Animation.

For example, to play bouncing ball on your screen and when refreshing the page, it will be in its original state or to set it to some another status after some time which is great if you are doing development for Android.

Xamarin animation supports cross-platform which runs on multiple platforms without hesitation. As some of the packages will not work on Xamarin and for some animations, you have to install third-party packages and many ready-to-use built-in packages make writing the code easy.

By default, the animation will run by itself but you can modify it and run it as you want. Yes in many apps that use animations and it is very normal nowadays to use animation in your application.

Xamarin will provide its own infrastructure to create an animation which will help you to create simple or complex animations. Generally, animation changes the value of the property as it is given in the rotation value like scale, rotate, fade, translate, etc. which works on X and Y values.

Now we know all the basics of Trigger, so now let's try to create some animations with help of Trigger.

Let's see an example

In this example, we will add animation on controls like the login screen, reset the password, and register as a new user. If the user is registered then we will be redirected to the next screen with animations and when returning to the main page we will return the same animation.

In animation, the xamarin.forms message UIElement will accept the request and send it to their APP.cs files which send information in return and that animation will be shown in UI which works as a screen handling. It means the APP.cs file changes the control's property which is available on the main page and the animation is shown. As you know that animations given in in APP.cs file can be used in our project.

First, we will divide the animations into four-part and we'll run it on different files and we will execute it on the grid of stack layout. We will handle it animation in the stack layout with a program and we will also see that which agreed to show at what time and hide it as well.

Example



 

    


    





3, 10, 3, 3
3, 0, 3, 0
4, 0, 4, 0














    
        Small
    





 Small

Note: Style defined App.xaml as follows:

App.xaml

You can see four names of stacklayout: sLogin, sRegister, sForgetpassword, sChangepassword.

As you can see that every layout is bind with visibility with different Boolean property in the login view model which means you have set the control programmatically which will be displayed on the stack layout. It will bind some property when accepting the user input. In animations, some scenarios will be generated which are not suitable like show different output as it runs. At the time it is important to keep in mind the time duration.

In another scenario, we are performing animations at the time of user input so the animations must be proper and suitable by which the user won't get bored and it doesn't feel bad but that is a UI part. You also have to keep in mind the resolution. Make such a long animation which takes a very long time to load, time duration also must be accurate. All these things should be formed behind the class.

Searching for the Best Xamarin App Development Company ? Your Search ends here.

Reach out us

Event Trigger

Let's write event Trigger which divides the code in different parts and can be usable again which is a good way like this:

Example

public class SwitchLoginEventTrigger :TriggerAction

Add click event like this

Add property to the direction of animation

public enumeDirection
{
    Left,
    Right
}

public eDirection Direction { get; set; }

And use like this

In this, we have used the type of variable and parameters of stacklayout. It can unchanged again other control.

Below is the code which we need to perform the trigger animation based on these properties:

Example

protected override async void Invoke(Button s)
{
    View hideanimation = null;
    View showanimation = null;

    if (Target != null)
    {
        // Find showanimation based on property set in xaml
showanimation = ((View)s.Parent.Parent).FindByName(Target);

        if (showanimation != null)
        {
            // Find hideanimation based on property set in xaml
            if (Source != null)
            {
hideanimation =
                    ((View)s.Parent.Parent)
.FindByName(Source);

                    if (hideanimation != null)
                    {
                        await PerformAnimation(hideanimation, showanimation);
                    }
            }
        }
    }
}

As we have seen in the example that the Steak layout will search for the source and target property and later will add the animations.

The code and ended up Example

private async Task PerformAnimation(View pHideAnimation, View pShowAnimation)
{
    int hideStarts = 0;
    int hideStops = (Direction == eDirection.Left ? -90 : 90);
    int showStarts = (Direction == eDirection.Left ? 90 : 270);
    int showStops = (Direction == eDirection.Left ? 0 : 360);


    await pHideAnimation.RotateYTo(hideStarts, 0);
    await pShowAnimation.RotateYTo(showStarts, 0);
    await pShowAnimation.ScaleTo(0.2, 0);
pShowAnimation.IsVisible = true;    // This is rotated at 90 or 270

    // Animate

pHideAnimation.FadeTo(0.5, 100, Easing.SinOut);
pHideAnimation.ScaleTo(0.2, 100, Easing.Linear);
    await pHideAnimation.RotateYTo(hideStop, 360, Easing.Linear);

pShowAnimation.FadeTo(1, 100, Easing.SinIn);
pShowAnimation.ScaleTo(1, 270, Easing.Linear);
    await pShowAnimation.RotateYTo(showStop, 360, Easing.Linear);

    // Tidy up
pHideAnimation.IsVisible = false;   // This can now be hidden as it's
                                 // already out of sight
}

The first 3 line itself shows that the animation works perfectly on the stack layout which will rotate the animation on x and y axis at zero degrees. Time to milliseconds. It rotates the stacklayout to 90 degrees or 270 degrees. This will flip our screen from the left side and set a new screen.

Fig: Output

Conclusion

Trigger and animation are used fully for design which creates an attractive UI design that can be crate by its method and element. Because trigger and animation are an important topic for Projectwhich we learned in this blog. We hope that you get a little bit of knowledge of trigger and animation.