Different Type of Transition Effect in Xamarin Form

 

Transition Effect in xamarin form

Animation

Animation is a method in which figure is manipulated to appear as moving object.

Today we will get to know following method:

• TranslateTo
• It will move object from one position to another
• FadeTo
• It will fade object
• ScaleTo
• It will expand the size of the object
• RotateTo
• It will rotate the object

I have explain in short, for more information please read here

FrameView.xaml

    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PageEffectUIDesigns.Control.FrameView">
    <ContentView.Content>
        <StackLayout Padding="0">
            <Frame x:Name="frame" HasShadow="True"  CornerRadius="20" HeightRequest="90"  Padding="0">
                <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Label x:Name="lbl" TextColor="White" FontAttributes="Bold" FontSize="20" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
                </StackLayout>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Let see the XAML Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:control="clr-namespace:PageEffectUIDesigns.Control"
             x:Class="PageEffectUIDesigns.Views.MainPage"
             BackgroundColor="White"
              Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <StackLayout Grid.Row="0" x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20">
                <control:FrameView x:Name="frameRight" BGColor = "#F15168" Text="Go Right">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnToRight_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameLeft" BGColor = "#F4724E" Text="Go Left">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnToLeft_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameUp" BGColor = "#F7D45D" Text="Go Up">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnToUp_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameDown" BGColor = "#40C9C4" Text="Go Down">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnGoDown_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameRotate" BGColor = "#009A8E" Text="Rotate">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnRotate_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameScale" BGColor = "#AE45C6" Text="Scale">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnScale_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>

                <control:FrameView x:Name="frameFade" BGColor = "#8639BA" Text="Fade">
                    <control:FrameView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="btnFade_Clicked"></TapGestureRecognizer>
                    </control:FrameView.GestureRecognizers>
                </control:FrameView>
            </StackLayout>
            <StackLayout Grid.Row="0"  x:Name="sl1" IsVisible="false" Padding="20">
                <Label Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 
                       TextColor="Black" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand"></Label>
                <Button x:Name="btnGoBack" Text="Go Back" Clicked="btnGoBack_Clicked" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"></Button>
            </StackLayout>
        </Grid>
        
    </ContentPage.Content>
</ContentPage>

Let the code

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private async void clickEffect(FrameView view)
        {
            double _scale = 0;
            _scale = view.Scale;
            await view.ScaleTo(0.5, 50);
            await view.ScaleTo(_scale, 300);
        }

        private async void btnToRight_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameRight);

            Helper.Transition = TransitionEnum.Right;
            await sl.TranslateTo(380, 0, 500);
            await sl1.TranslateTo(-350, 0, 0);
            SL1GetToOriginalPosition();
        }

        private async void btnToLeft_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameLeft);
            Helper.Transition = TransitionEnum.Left;
            await sl.TranslateTo(-380, 0, 500);
            await sl1.TranslateTo(350, 0, 0);
            SL1GetToOriginalPosition();
        }

        private async void btnToUp_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameUp);
            Helper.Transition = TransitionEnum.Top;
            await sl.TranslateTo(0, -700, 500);
            await sl1.TranslateTo(0, 450, 0);
            SL1GetToOriginalPosition();
        }

        private async void btnGoDown_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameDown);
            Helper.Transition = TransitionEnum.Bottom;
            await sl.TranslateTo(0, 770, 500);
            await sl1.TranslateTo(0, -500, 0);
            SL1GetToOriginalPosition();
        }

        private async void btnRotate_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameRotate);
            await sl.RotateYTo(360, 800);
        }

        private async void btnScale_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameScale);
            double _scale = 0;
            _scale = sl.Scale;
            await sl.ScaleTo(0, 50);
            await sl.ScaleTo(_scale, 300);
        }

        private async void btnFade_Clicked(object sender, EventArgs e)
        {
            clickEffect(frameFade);
            await sl.FadeTo(0, 1000, Easing.Linear);
            await sl.FadeTo(1, 1000, Easing.Linear);
        }

        private async void btnGoBack_Clicked(object sender, EventArgs e)
        {
            if (Helper.Transition == TransitionEnum.Right)
            {
                await sl1.TranslateTo(-600, 0, 500);
            }
            else if (Helper.Transition == TransitionEnum.Left)
            {
                await sl1.TranslateTo(600, 0, 500);
            }
            else if (Helper.Transition == TransitionEnum.Top)
            {
                await sl1.TranslateTo(0, 500, 500);
            }
            else if (Helper.Transition == TransitionEnum.Bottom)
            {
                await sl1.TranslateTo(0, -500, 500);
            }
            sl1.IsVisible = false;
            SLGetToOriginalPosition();
        }

        private async void SLGetToOriginalPosition()
        {
            await sl.TranslateTo(0, 0, 500);
        }

        private async void SL1GetToOriginalPosition()
        {
            sl1.IsVisible = true;
            await sl1.TranslateTo(0, 0, 500);
        }
    }