Simple Way for UWP to create an animation-LottieUWP, uwplottieuwp

Simple Way for UWP to create an animation-LottieUWP, uwplottieuwp

When it comes to creating animations in UWP, most of the first thought is StoryBoard. Because both UWP and WPF interfaces are based on the XAML language, it is very convenient to implement StoryBoard.

Let's look at a simple StoryBoard example:

<Page...>    <Grid x:Name="grid">        <Grid.Resources>            <Storyboard x:Key="demoStoryBoard" AutoReverse="True" RepeatBehavior="Forever">                <DoubleAnimation Duration="0:0:1" To="500" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>                <DoubleAnimation Duration="0:0:1" To="500" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>            </Storyboard>        </Grid.Resources>        <Ellipse x:Name="ellipse" Width="100" Height="100" Fill="LightBlue" HorizontalAlignment="Left" VerticalAlignment="Top">            <Ellipse.RenderTransform>                <CompositeTransform/>            </Ellipse.RenderTransform>        </Ellipse>    </Grid></Page>

This is a typical and simple StoryBoard implementation. I believe developers who have worked on WPF or UWP are familiar with it. If the RepeatBehavior is Forever, you can use the settings of TranslateX and TranslateY in StoryBoard to duplicate the displacement animation.

Of course, more complex animations can be implemented with Blend and then imported to VS for use. However, Blend is relatively unfamiliar to most designers, and the animation files exported by Blend can only be used in XAML-based animations, which may cause problems across platforms. Of course, you can use Xamarin for cross-platform development, but most Mobile developers are still developing in Native language. In addition, there are two types of Animation: gif or png sequence, but they all have problems with large file sizes and poor resolution adaptation. The Lottie we introduced today can solve the above problems perfectly.

LottieUWP

Overview

Lottie is a set of open-source animation creation and playback solutions developed and developed by the Airbnb R & D team. It can achieve high-quality animation on the entire platform and support Android, iOS, Web, and UWP. The designer designs an animation in AE (After Effects) and exports it as a JSON file through the BodyMovin plug-in AE. The Lottie SDK can directly read this JSON file and control the playing of the animation through simple code.

Lottie official address: https://airbnb.design/lottie/. here are some official Lottie animation examples:

 

Development Process

You may also see that there is no UWP In the SDK provided by Lottie, but we want to use the UWP version SDK adapted by a developer based on Android Lottie SDK. In fact, it cannot be regarded as a personal developer. This person is a Microsoft employee and is responsible for the development of Microsoft developers. This includes Porting some sdks that do not support UWP to UWP.

Here is the Git address of Lottie UWP: https://github.com/azchohfi/lottieuwp. next, let's take a look at how to use the Lottie uwp sdk:

Create a C # UWP project and find and install the LottieUWP package in the Nuget manager.

The usage is very simple. You only need to introduce LottieUWP in xaml to use the LottieAnimationView control. Here the B. json file is downloaded on the LottieFiles website, LottieFiles is a community site for Lottie animation files: https://www.lottiefiles.com/

<Page ...    xmlns:lottieUwp="using:LottieUWP">    <Grid>        <lottieUwp:LottieAnimationView FileName="Assets/b.json" RepeatCount="-1" 
                                       AutoPlay="True" VerticalAlignment="Center" HorizontalAlignment="Center"/>    </Grid></Page>

 

Of course, you can also load and play an animation in the C # code:

using LottieUWP;...await lottieAnimationView.SetAnimationAsync("Assets/b.json");lottieAnimationView.RepeatCount = LottieDrawable.Infinite;lottieAnimationView.PlayAnimation();

Furthermore, we can make more control over the animation:

We removed the automatic playback of LottieAnimationView and used a Slider to control the playback progress of the animation. The value range of the animation progress is [0.0, 1.0].

LottieAnimationView. Progress = (float) slider. Value; 

We can see that LottieUWP supports the playback of specified frames and playback with variable speed, which facilitates the playback of animation pause, playback speed change, and playback at specific time points.

In addition, you can alsoAnimatorUpdateEvent listening and processing, such as displaying the current progress when the animation is updated, or updating the progress value of the playback progress bar. Or callCancelAnimation() Method to cancel the current animation.

Summary

LottieUWP SDK is very simple to use, and the animation Performance Based on Win2D is very good. In addition, the author of this great god is updated frequently and keeps up with the pace of Android, so there is no need to worry about unsupported new functions.

The author also gave a prompt on How to Improve the animation performance:

Of course, because the LottieUWP project has not been developed for a long time and there are some areas for further optimization, the author also lists the classes to be optimized:

Animator. cs BitmapCanvas. cs ColorFilter. cs DashPathEffect. cs Gradient. cs ImageAssetBitmapManager. cs LinearGradient. cs LottieAnimationView. cs LottieDrawable. cs Paint. cs Path. cs PathEffect. cs PathMeasure. cs PorterDuff. cs porterduxfermode. cs RadialGradient. cs Shader. cs porterducolorfilter. cs ValueAnimator. cs

If you have a good optimization method, you can also participate in this project and submit PR to the author.

 

The following describes how to use LottieUWP. You are welcome to have more discussions with developers!