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
