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

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

这是一个很典型也很简单的 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 官方的动画示例:

 

开发过程

或许大家也看到了,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 包并安装它。

使用方式非常简单,只需要在 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>

 

当然也可以在 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() 方法来取消当前动画。 

 小结

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 的使用方法就介绍到这里,欢迎有兴趣的开发者多多交流!

 

posted @ 2018-03-19 19:08  shaomeng  阅读(1709)  评论(14编辑  收藏