最近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的不太常用但是比較好玩的東西。

本篇博客到此結束！謝謝大家閱讀！

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