Posts

Showing posts with the label #animation

Animation in .net MAUI

Image
 Animation will add more good looking UI of the mobile application. Let's see how to add animation using lottie file. Lottie is a mobile library for andriod and IOS that prases Adobe After Effects animations exported as JSON. Lottie Animation in .NetMaui You can go through the lottie website. This lottie provide pently of cool animation and also you can create own animation. Please, support my blog by clicking on our sponsors ad! Let's get started First add install "SkiaSharp.Extended.UI.MAUI" in your project using nugget manager. This nugget is prerelease so please check "Include Prerelease". Lottie animation in .net Maui Next step is to Bootstrap Skiasharp plugin in MAUIProgram file and add UseSkiaSharp() to the app builder.  Below is the code: public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder

Scale Transition in xamarin form

Image
  scale animation in xamarin form The animation in Xamarin will help you to make attractive and smooth transition.There are many method for animation. There are some example of method which will help you learn basic steps. The scale method increases or decreases the size of an element . Scaling refers to the resizing of an element. Scaling is used to change the visual appearance of an image, to alter the quantity of information stored in a scene representation, or as a low-level preprocessor in multi-stage image processing chain which operates on features of a particular scale. If you want to see result of scaling animation of this blog then click  here . ScaleTransition.xaml scale animation in xamarin form.  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PageEffectUIDesigns.Views.ScaleTransition"> <ContentPage.Content> <Stack

Different Type of Transition Effect in Xamarin Form

Image
  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" VerticalOptio

Navigate your page with animation

Image
 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&