LottieFiles动画显示异常问题
LottieFiles动画显示异常问题

LottieFiles动画显示异常问题

情景复现

在iOS应用开发中,发现LottieFiles文件存在显示重叠的问题,比如我搜索的“piggy bank”相关的很多LottieFiles动画的json文件都存在这个问题,显示效果如下:

在测试代码过程中,发现之前导入的Lottie文件显示正常,后面添加的”piggy bank”动画大部分都存在显示重叠的问题,个别简单动画没有这个问题。

问题排查

前面主要还是对于Json文件的排查,反复对比后,问题没有得到解决。

后来在文件的展示页面中,发现可以使用链接的形式展示Lottie文件,于是在之前一个显示重叠的动画文件中生成了一个JSON文件链接,并将这个文件下载到本地。

下载到本地后的文件,是原文件,无法修改颜色。

因此,在查看官方教程时,有提到考虑使用iOS端扫描动画的二维码,以便检查动画是否可以在iOS端正常运行,以及检查设备是否能够适配动画。

在文件中找到移动设备调试的二维码。

并在iOS的Apple Store中,找到lottiefiles应用。

可以使用iOS手机扫描下面的二维码跳转到Apple Store进行LottieFiles的下载。

下载应用后,登录账户,点击底部导航栏的二维码功能,然后扫描刚才打开的LottieFiles网页二维码。

就可以跳转到手机端LottieFiles动画展示页,在这个页面中,我们选择编辑按钮修改动画颜色,相关信息修改完成后,点击右上角的下载按钮,选择Lottie JSON文件并下载到本地。

JSON文件下载完成后,会弹出提示框,通过苹果的隔空投送功能,将这个JSON文件发给Mac。

最后,将这个JSON文件导入到Xcode项目中,一切正常。

问题总结

目前来看,问题应该是Mac端的部分LottieFiles动画的JSON文件和dotLottie文件存在显示重叠问题,将这些问题动画以Gif或者其他方式下载时,显示重叠效果没有复现,因此问题可能是出现在这两种文件的格式或其他方面。

文件解决的方案,目前来看只有通过iOS端扫描二维码下载并传回Mac端,以解决该问题。

参考资料

How to Add Lottie Animations in iOS Apps (Swift):https://lottiefiles.com/blog/working-with-lottie-animations/how-to-add-lottie-animation-ios-app-swift

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注