Navigate your page with animation
Hello Friends,
I hope you are fine, Today I have come with navigation page with animation.
What is Animation?
Animation is a method in which figure are manipulated to appear as moving images.
There are huge scope of animation in IT industry. So we will start with very small part of animation.
In this animation we are using TranslateTo effect.
It will move figure from one position to another.
Below is the image, How UI looks.
Below is video which show animation:
There are two page:
- Page1:
- Page2:
Let start with code:
Page1.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigateUIDesign.Views.Page1"
NavigationPage.HasNavigationBar="False"
Shell.NavBarIsVisible="False"
BackgroundColor="White">
<ContentPage.Content>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Path x:Name="path1" Data="m227.86012,121.39499l213.9999,0l0,139.99998l-107.00002,35.00003l-107,-35.00003l0.00012,-139.99998z"
Stroke="#FD516B" Fill="#FD516B" HeightRequest="550" HorizontalOptions="FillAndExpand" Aspect="Fill">
</Path>
<Path x:Name="path2" Margin="0,-630,0,0" Data="m227.86012,121.39499l213.9999,0l0,139.99998l-107.00002,35.00003l-107,-35.00003l0.00012,-139.99998z"
Stroke="#06112A" Fill="#06112A" HeightRequest="350" HorizontalOptions="FillAndExpand" Aspect="Fill"></Path>
</StackLayout>
<Grid Grid.Row="0" VerticalOptions="Start" Padding="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Path Grid.Row="0" Grid.Column="0" Data="m280.98471,210.08365l-16.33242,13.9959l16.33242,13.99588l-9.33381,8.00328l-25.66621,-21.99916l25.66621,-22.00084"
Stroke="white" Fill="white" Margin="-130,0,0,0" HeightRequest="30" HorizontalOptions="Start" Aspect="Uniform"></Path>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" FontAttributes="Bold" Text="Vanessa Angel" FontSize="30" HorizontalOptions="Center" TextColor="White"></Label>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0" HeightRequest="2" WidthRequest="50" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="LightGray"></BoxView>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="Vanessa Madeline Angel is an English actress and former model.She played the role of Lisa on the television series Weird Science. She is also known for her role as Claudia in the film Kingpin." TextColor="White"></Label>
<Label Grid.Row="4" Padding="0,120,0,0" Grid.Column="0" HorizontalTextAlignment="Center" TextColor="White">
<Label.FormattedText>
<FormattedString>
<Span Text="7700 " FontAttributes="Bold" FontSize="25" />
<Span Text="Follower" FontAttributes="Italic" FontSize="Small" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="4" Padding="0,120,0,0" Grid.Column="1" HorizontalTextAlignment="Center" TextColor="White">
<Label.FormattedText>
<FormattedString>
<Span Text="77 " FontAttributes="Bold" FontSize="25" />
<Span Text="Following" FontAttributes="Italic" FontSize="Small" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="5" Padding="0,10,0,0" Grid.Column="0" HorizontalTextAlignment="Center" TextColor="White">
<Label.FormattedText>
<FormattedString>
<Span Text="4200 " FontAttributes="Bold" FontSize="25" />
<Span Text="Likes" FontAttributes="Italic" FontSize="Small" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="5" Padding="0,10,0,0" Grid.Column="1" HorizontalTextAlignment="Center" TextColor="White">
<Label.FormattedText>
<FormattedString>
<Span Text="12 " FontAttributes="Bold" FontSize="25" />
<Span Text="Comments" FontAttributes="Italic" FontSize="Small" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="6" Padding="0,120,0,0" Grid.Column="0" Grid.ColumnSpan="2" 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">
</Label>
<Path x:Name="path3" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Data="m232.1115,160.81l-18.74688,-11.25l0,5.625l-20.12218,0l0,-16.875l54,0l0,45l-54,0l0,-16.875l20.12218,0l0,5.625l18.74688,-11.25z"
Stroke="#F75C1E" Fill="#F75C1E" Margin="-130,0,0,10" HeightRequest="30" HorizontalOptions="Start" VerticalOptions="End" Aspect="Uniform">
<Path.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Path.GestureRecognizers>
</Path>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>Page1.cs
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
var path1Anim = new Animation(_ => path1.TranslateTo(0, 0, 500));
var path2Anim = new Animation(_ => path2.TranslateTo(0, 0, 500));
var path3Anim = new Animation(_ => path3.TranslateTo(0, 0, 500));
var masterAnimation = new Animation
{
{ 0, 1, path1Anim },
{ 0, 1, path2Anim },
{ 0, 1, path3Anim }
};
masterAnimation.Commit(this, "MyAnim");
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var path1Anim = new Animation(_ => path1.TranslateTo(1000, 0, 500));
var path2Anim = new Animation(_ => path2.TranslateTo(0, -500, 500));
var path3Anim = new Animation(_ => path3.TranslateTo(1000, 0, 500));
var masterAnimation = new Animation
{
{ 0, 1, path1Anim },
{ 0, 1, path2Anim },
{ 0, 1, path3Anim }
};
Action<double, bool> finished = InvokePage;
masterAnimation.Commit(this, "MyAnim", rate: 100, length: 600, easing: Easing.Linear, finished);
}
async void InvokePage(double d, bool b)
{
await Navigation.PushModalAsync(new Page2(), true);
}
private async void NavigatePage()
{
await Navigation.PushModalAsync(new Page2(), true);
}
}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigateUIDesign.Views.Page2"
xmlns:views="clr-namespace:NavigateUIDesign.Views.Template"
BackgroundColor="White">
<ContentPage.Content>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Path x:Name="path2" Margin="0,0,0,0" Data="m227.86012,121.39499l213.9999,0l0,139.99998l-107.00002,35.00003l-107,-35.00003l0.00012,-139.99998z"
Stroke="#06112A" Fill="#06112A" HeightRequest="300" HorizontalOptions="FillAndExpand" Aspect="Fill">
<Path.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Path.GestureRecognizers>
</Path>
</StackLayout>
<Grid Grid.Row="0" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Path Grid.Row="0" Grid.Column="0" Data="m280.98471,210.08365l-16.33242,13.9959l16.33242,13.99588l-9.33381,8.00328l-25.66621,-21.99916l25.66621,-22.00084"
Stroke="white" Fill="white" Margin="10,20,0,0" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start" Aspect="Uniform"></Path>
<Label Margin="20" Grid.Row="1" Grid.Column="0" Text="Vanessa Madeline Angel is an English actress and former model.She played the role of Lisa on the television series Weird Science. She is also known for her role as Claudia in the film Kingpin."></Label>
<Label Margin="20,0" Grid.Row="2" Grid.Column="0" Text="Vanessa Madeline Angel is an English actress and former model.She played the role of Lisa on the television series Weird Science. She is also known for her role as Claudia in the film Kingpin."></Label>
<ListView Grid.Row="3" Grid.Column="0" Margin="0,70,0,0" x:Name ="listView" HasUnevenRows="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SeparatorVisibility="None" ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<views:Page2Template></views:Page2Template>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage><ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigateUIDesign.Views.Template.Page2Template">
<ContentView.Content>
<StackLayout Padding="5" >
<Frame x:Name="frame" HasShadow="True" CornerRadius="20" Padding="0">
<SwipeView>
<SwipeView.RightItems>
<SwipeItems>
<SwipeItem Text="Favorite" BackgroundColor="LightGray" IconImageSource="favorite.png"/>
</SwipeItems>
</SwipeView.RightItems>
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="White" Padding="10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" HasShadow="False" VerticalOptions="Start" HeightRequest="70" WidthRequest="70" CornerRadius="100" Padding="0">
<Image Source="{Binding Img}" Aspect="AspectFill"></Image>
</Frame>
<StackLayout Grid.Column="1" Spacing="0" Padding="5" >
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="FillAndExpand" TextColor="Black"></Label>
<Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="Black"></Label>
</StackLayout>
<StackLayout Grid.Column="2" Spacing="0" WidthRequest="60" Padding="0" VerticalOptions="CenterAndExpand">
<Label Text="{Binding Day}" FontAttributes="Bold" FontSize="20" TextColor="Black" HorizontalOptions="Center"></Label>
<Label Text="{Binding Month}" TextColor="Black" HorizontalOptions="Center" ></Label>
</StackLayout>
</Grid>
</SwipeView>
</Frame>
</StackLayout>
</ContentView.Content>
</ContentView>Page2.cs
public partial class Page2 : ContentPage
{
public Page2()
{
InitializeComponent();
listView.ItemsSource = new ItemModel().Get();
}
private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (listView.SelectedItem != null)
listView.SelectedItem = null;
}
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
await Navigation.PopModalAsync(true);
}
}Watch video to understand code.Conclusion:Today we learn how to navigate page with animation.
Comments
Post a Comment