UWP 创建动画的极简方式 — LottieUWP

时间：2022-03-31 06:07:34

提到 UWP 中创建动画，第一个想到的大多都是 StoryBoard。因为 UWP 和 WPF 的界面都是基于 XAML 语言的，所以实现 StoryBoard 会非常方便。

来看一个简单的 StoryBoard 例子：

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

UWP 创建动画的极简方式 — LottieUWP

这是一个很典型也很简单的 StoryBoard 实现，相信做过 WPF 或 UWP 的开发者们都很熟悉了。一个椭圆，通过 StoryBoard 中 TranslateX 和 TranslateY 的设置，在 RepeatBehavior 为 Forever 的情况下，重复做位移动画。

当然，更复杂的动画，可以借助 Blend 来实现，然后导入到 VS 中使用。但是，Blend 对于大部分设计师来说，是相对陌生的，而且 Blend 导出的动画文件，也只能在基于 XAML 的动画中使用，对于跨平台会有些问题。当然你可以使用 Xamarin 来跨平台，但是绝大部分 Mobile 开发者还是在用 Native 语言进行开发的。除此之外，还有两种动画方式：gif 或 png 序列，但是他们都存在文件体积大，分辨率适配不好的问题。而我们今天介绍的 Lottie，可以完美的解决上面的问题。

LottieUWP

概述

Lottie 是 Airbnb 研发团队研发并开源的一套创建和播放动画的方案，可以非常方面的在全平台实现高质量的动画，支持 Android, iOS, Web, UWP。设计师在 AE (After Effects) 中设计动画，通过 AE 中的 BodyMovin 插件导出为一个 JSON 文件，Lottie SDK 可以直接读取这个 JSON 文件，并通过简单代码控制播放动画。

Lottie 官方地址：https://airbnb.design/lottie/，来看几个 Lottie 官方的动画示例：

UWP 创建动画的极简方式 — LottieUWP

开发过程

或许大家也看到了，Lottie 官方提供的 SDK 中并没有 UWP，而我们要使用的是一个个人开发者根据 Android Lottie SDK 改写的 UWP 版本 SDK。其实也不能算个人开发者，这位大神是微软的员工，负责的就是帮助微软开发者的开发工作，其中就包括把一些不支持 UWP 的 SDK 移植到 UWP 中。

这里是 Lottie UWP 的 Git 地址：https://github.com/azchohfi/LottieUWP，下面实际看一下 Lottie UWP SDK 的使用方法：

创建一个 C# UWP 项目，然后在 Nuget 管理器中查找 LottieUWP 包并安装它。

UWP 创建动画的极简方式 — LottieUWP

使用方式非常简单，只需要在 XAML 中引入 LottieUWP，就可以使用 LottieAnimationView 控件了。这里的 b.json 文件是我们在 LottieFiles 网站下载的，LottieFiles 是 Lottie 动画文件的一个社区网站：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>

UWP 创建动画的极简方式 — LottieUWP

当然也可以在 C# 代码中加载和播放动画：

using LottieUWP;

...

await lottieAnimationView.SetAnimationAsync("Assets/b.json");

lottieAnimationView.RepeatCount = LottieDrawable.Infinite;

lottieAnimationView.PlayAnimation();

更进一步，我们可以对动画做更多的控制：

我们去掉 LottieAnimationView 的自动播放，改为使用一个 Slider 来控制动画播放进度，动画进度的取值范围是 [0.0, 1.0] 。

lottieAnimationView.Progress = (float)slider.Value;

可以看到 LottieUWP 可以支持指定帧播放，变速播放等功能的，这对我们控制动画的播放暂停，播放变速，特定时间点的播放等都提供了便利。

除此之外，还可以针对 LottieAnimationView 的 AnimatorUpdate event 进行监听和处理，比如在动画更新时，显示当前进度，或更新播放进度条的进度值。或者调用 CancelAnimation() 方法来取消当前动画。

UWP 创建动画的极简方式 — LottieUWP

小结

LottieUWP SDK 的使用非常简单，而且基于 Win2D 的动画性能很不错，另外这位大神作者更新频率很高，紧跟 Android 的步伐，不用担心新功能不受支持。

作者关于如何提高动画性能也做了提示：

  1. 对于没有 masks 或 mettes 的 JSON 文件，性能和内存占用都会很理想，因为不存在 bitmap 的创建过程；
  2. 如果有 mattes，2-3 个 bitmap 会被创建为控件尺寸，自动添加到窗口中，并在移除时被回收。所以不建议在 RecyclerView 中使用带有 masks 或者 mattes 的 JSON 文件，因为会伴有频繁的创建和销毁过程，动画播放的效果会降低。
  3. 建议在 LottieAnimationView.setAnimation(String, CacheStrategy) 使用 CacheStrategy，这样可以避免每次反复的加载动画。

当然，因为 LottieUWP 项目开发的时间并不长，还有一些需要继续优化的地方，作者也列出了接下来确定会优化的类：

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 PorterDuffXfermode.cs RadialGradient.cs Shader.cs PorterDuffColorFilter.cs ValueAnimator.cs

如果大家有好的优化方法，也可以参与到这个项目中，给作者提 PR。

LottieUWP 的使用方法就介绍到这里，欢迎有兴趣的开发者多多交流！

相关文章