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 的使用方法就介紹到這里，歡迎有興趣的開發者多多交流！