[UWP]在UWP平臺中使用Lottie動畫

最近QQ影音久違的更新了，由於記得QQ影音以前體驗還算不錯（FFmepg的事另說），我也第一時間去官網下載體驗了一下，結果發現一些有趣的事情。

是的，你沒看錯，QQ影音主界面上這個動畫效果是使用Lottie動畫實現的！

這讓我大爲驚奇，我對Lottie瞭解還算是比較多的，可是Lottie常見應用於移動端APP和網頁，在傳統桌面端見到仍是第一次。

那就趁這個機會，來分享點關於Lottie動畫的東西吧！

Lottie動畫的UWP實現

Lottie是Airbnb開源的一個面向IOS、Android、React Native的動畫庫，它能夠解析保存爲json格式的由Bodymovin導出的使用AE製做的動畫效果，並在移動端/Web端呈現它們！官方支援平臺爲IOS、Android和React Native，很遺憾，並不包含UWP平臺。

可是，這並非說UWP平臺沒法使用Lottie動畫了。Lottie動畫在UWP平臺上有兩套很是棒的實現：

• Lottie-Windows：這是由微軟官方開發的一套Lottie實現，使用的是Composition Api，性能表現很棒。另外還提供一個易用的LottieViewer示例應用，不只能夠預覽Lottie動畫，還能夠將Lottie文件轉爲C# Composition動畫類（.cs文件）保存，將這個文件引用到你的項目中便可使用這個動畫類播放動畫，黑科技！可是美中不足的是，因爲剛剛推出預覽版，使用了更新的API，只支持Win10 1809 (17763)及之後的系統版本，且穩定性欠佳，須要等待正式版本。
• LottieUWP：這是由azchohfi（維護Windows Community Toolkit的做者之一，供職於微軟）使用Win2D實現的一套Lottie實現，源代碼移植自Lottie官方的Android版本（我查看源代碼瞭解到的，項目中某些方法還保留了Android項目的註釋），如今已經基本進入穩定維護階段，現階段更加推薦使用。

我在開發中已經使用LottieUWP一段時間了，基本能夠知足使用，而且我也向LottieUWP項目貢獻過一點bugfix代碼。現階段我更推薦你們使用LottieUWP來實現相關需求。

長期的話，我更看好Lottie-Windows項目，畢竟微軟官方團隊維護，性能也更好，只不過你們須要給它一點時間，讓它完善穩定下來，到時候系統版本要求應該也不是問題了😆。

使用Lottie動畫

這裏我只介紹下如何在UWP中使用LottieUWP播放Lottie動畫，以後等Lottie-Windows正式版發佈我們再來說它。

使用LottieUWP咱們須要在應用中引入LottieUWP Nuget包，支持的最低系統版本爲10586。

直接在XAML文件使用LottieAnimationView控件便可使用它播放Lottie動畫。

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

獲取Lottie動畫相關信息

在LottieUWP中，Lottie動畫的相關信息能夠在LottieComposition類中得到，咱們能夠經過LottieAnimationView.Composition屬性，或者直接使用LottieCompositionFactory 中的靜態方法獲取LottieComposition對象。

結尾

這篇博文僅是簡單的介紹了在UWP應用中如何使用Lottie動畫，更多介紹你們能夠直接前往LottieUWP Github主頁。

那麼這就是所有了？固然不是，期待一下個人下篇博文《[UWP]緩存Lottie動畫幀》，分享點有關於Lottie的不太經常使用可是比較好玩的東西。

本篇博客到此結束！謝謝你們閱讀！