Lottie 動畫是一種以 json 文件保存的動畫文件. 相比 gif 在文件體積和動畫流暢度上有很大的優勢,而且是圖形是矢量的,放大不會糊.
Lottie 的官方提供了web,android,iOS 的實現, 微軟提供了 UWP 的實現 Lottie-Windows. WPF 則沒有找到可用的實現.下有 https://github.com/ascora/LottieSharp 不過我測試了幾輪,發現其依賴的 sharpDx 經常報錯,而且我完全不熟悉 sharpDx,不知道如何解決.
那么作為 WPF 開發者,想要使用 Lottie 動畫看來還是要自己動手.
想要在 WPF 上使用 Lottie 動畫,主要需要攻克以下問題:
- 解析 Lottie 的 json 文件,了解其中所有數據的意義,也就是得到需要繪制的圖形對象,包括各種圓形,矩形,顏色,模糊效果,遮罩,緩動,軌跡,關鍵幀等.
- 將上面得到的數據轉換為具體的繪圖參數.
- 在 WPF 中進行高幀率的繪制.
截至2022-02-10,覺得可行的方案為:
- 微軟提供的 UWP 的實現中,有現成的解析模塊,可直接將 Json 文件讀取為一個數據類,且該模塊並沒有依賴 UWP,所以可以直接拿來用.雖然還有一些 Bug(測試了幾十個動畫文件,有3個無法正常播放),但當前該庫還比較活躍,可以期待其改進.
- SkiaSharp 的功能非常全面,覆蓋 Lottie 動畫所需的功能應該不成問題,而且其跨平台,所以按照數據要求使用 SkiaSharp 進行繪制即可.
- SkiaSharp 官方提供的 WPF 畫布即使開啟 GPU 繪圖模式,其速度依然無法達到1080p 60幀,不過之前進行其它項目時對 GLWpfControl 進行了改進,實測 2k 144 幀占會用 RTX 2070 23%,達到可用程度,雖然有少量內存泄漏,但問題不大.
如果成功實現的話,應該可以同時支持 WinForm WPF UnoPlatform(GTK) Avalonia Blazor(Wasm) 以及所有 SkiaSharp 和 .Net Core 3.0+ 可以運行的平台上.
當前仍然處於探索驗證階段,無實用價值.
當前處於預覽狀態, 示例: https://github.com/xiejiang2014/Xiejiang.SKLottie.Samples
本文發布於https://www.cnblogs.com/8u7tgyjire7890/p/15881159.html
以下會持續更新成功實現的動畫,每次更新都說明支持了更多的 lottie 特性
2022-02-10 選了幾個簡單的動畫進行測試.
https://lottiefiles.com/93494-step-loader
https://lottiefiles.com/87474-duo-cubes-loader-2
混合模式
https://lottiefiles.com/89023-loading-circles
2022-02-12 稍微復雜一點的例子:
https://lottiefiles.com/84848-polar-bear
Lottie-Windows 沒有實現 PolyStar 的數據解析,所以缺少黃色的星星,只能等待 Lottie-Windows 繼續實現
路徑動畫.
https://lottiefiles.com/88348-blob
路徑偏移
https://lottiefiles.com/86095-frequencies-fork
2022-02-16:
層級關系,旋轉
https://lottiefiles.com/85410-wifi
2022-02-18
處理 PreCompLayer,LayerCollectionAsset
https://lottiefiles.com/88964-snowman
更復雜的路徑動畫. 對比 Lottie Viewer 提示需要 UAP11,我已經升級到 Windows10 21H2了 依然無法播放,不清楚具體原因.
https://lottiefiles.com/87491-liquid-blobby-loader-green
2022-02-19
https://lottiefiles.com/93748-camera-roll
ImageAsset 和 ImageLayer
https://lottiefiles.com/93795-dog-car-ride
Opacity
https://lottiefiles.com/94910-greenish-arrow-down
2022-02-26
https://lottiefiles.com/87670-satisfied-bear
https://lottiefiles.com/96051-tta-certificate
更復雜的例子
https://lottiefiles.com/96388-tiger
2022-02-27
路徑的FillType
https://lottiefiles.com/96511-listening-animation
2022-03-02
https://lottiefiles.com/97409-404-page-animation
蒙版 (+模式)
https://lottiefiles.com/88967-food-delivery-service
蒙版(-模式)
https://lottiefiles.com/83667-arty-chat
https://lottiefiles.com/99804-backend-blue
遮罩(+模式)
https://lottiefiles.com/96957-lock
https://lottiefiles.com/89881-smiling-star
2020-04-01
https://lottiefiles.com/83395-addland-heatfav-v2
https://lottiefiles.com/96939-files
2022-04-17
https://lottiefiles.com/96245-success
https://lottiefiles.com/88282-rocket
https://github.com/CommunityToolkit/Lottie-Windows/files/8182417/Lottie.Animation.zip
https://lottiefiles.com/102516-growth
