• .Net MAUI如何使用Lottie动画
  • 发布于 2个月前
  • 657 热度
    0 评论
预览效果:

教程:
1..Net MAUI项目安装nuget包
NuGet\Install-Package SkiaSharp.Extended.UI.Maui -Version 2.0.0-preview.61
2.将lottie的json文件添加到项目Resources/Raw目录内
3.设置lottie的json文件属性Build Action为MauiAsset
4.配置程序启动使用SkiaSharp相关组件
于MauiProgram.cs文件内调用UseSkiaSharp()函数
5.在需要显示动画的xaml界面文件指定命名空间
xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
6.设定显示(RepeatCount="-1"说明动画自动循环播放)
<skia:SKLottieView RepeatCount="-1"  HeightRequest="200" WidthRequest="200" Source="panda.json"></skia:SKLottieView>
其他资料:
.Net MAUI演示Lottie动画的Sample的源码:
https://github.com/jingliancui/DotNetLottieSample
Sklottieview组件文档
https://mono.github.io/SkiaSharp.Extended/api/ui-maui/sklottieview.html
官方Demo界面代码调用参考
https://github.com/mono/SkiaSharp.Extended/blob/f205dd6201a0f08749308bd72fe0adbbdc7f4c05/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml
官方Demo cs代码调用参考
https://github.com/mono/SkiaSharp.Extended/blob/f205dd6201a0f08749308bd72fe0adbbdc7f4c05/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml.cs
官方Demo启动设置代码调用参考
https://github.com/mono/SkiaSharp.Extended/blob/f205dd6201a0f08749308bd72fe0adbbdc7f4c05/samples/Maui/SkiaSharpDemo/MauiProgram.cs
动画自动循环播放代码使用说明
https://github.com/mono/SkiaSharp.Extended/issues/151
在开发产品时,经常会遇到产品中需要显示UI/UX设计师做的动画文件的需求,那Lottie文件的使用就变得十分方便了。
而需求上经常会遇到自动循环播放动画的需求,但文档并没有写明,后来通过issue和社区的人沟通才知道设置RepeatCount="-1"就是自动循环播放了。
用户评论