情景复现
在iOS应用开发中,发现LottieFiles文件存在显示重叠的问题,比如我搜索的“piggy bank”相关的很多LottieFiles动画的json文件都存在这个问题,显示效果如下:
![](https://fangjunyu.com/wp-content/uploads/2024/06/1-8.png)
在测试代码过程中,发现之前导入的Lottie文件显示正常,后面添加的”piggy bank”动画大部分都存在显示重叠的问题,个别简单动画没有这个问题。
问题排查
前面主要还是对于Json文件的排查,反复对比后,问题没有得到解决。
后来在文件的展示页面中,发现可以使用链接的形式展示Lottie文件,于是在之前一个显示重叠的动画文件中生成了一个JSON文件链接,并将这个文件下载到本地。
![](https://fangjunyu.com/wp-content/uploads/2024/06/2-8.png)
下载到本地后的文件,是原文件,无法修改颜色。
因此,在查看官方教程时,有提到考虑使用iOS端扫描动画的二维码,以便检查动画是否可以在iOS端正常运行,以及检查设备是否能够适配动画。
在文件中找到移动设备调试的二维码。
![](https://fangjunyu.com/wp-content/uploads/2024/06/3-8.png)
并在iOS的Apple Store中,找到lottiefiles应用。
![](https://fangjunyu.com/wp-content/uploads/2024/06/4-5.png)
可以使用iOS手机扫描下面的二维码跳转到Apple Store进行LottieFiles的下载。
![](https://fangjunyu.com/wp-content/uploads/2024/06/5-4.png)
下载应用后,登录账户,点击底部导航栏的二维码功能,然后扫描刚才打开的LottieFiles网页二维码。
![](https://fangjunyu.com/wp-content/uploads/2024/06/6-4.png)
就可以跳转到手机端LottieFiles动画展示页,在这个页面中,我们选择编辑按钮修改动画颜色,相关信息修改完成后,点击右上角的下载按钮,选择Lottie JSON文件并下载到本地。
![](https://fangjunyu.com/wp-content/uploads/2024/06/7.png)
JSON文件下载完成后,会弹出提示框,通过苹果的隔空投送功能,将这个JSON文件发给Mac。
![](https://fangjunyu.com/wp-content/uploads/2024/06/8.png)
最后,将这个JSON文件导入到Xcode项目中,一切正常。
![](https://fangjunyu.com/wp-content/uploads/2024/06/9.png)
问题总结
目前来看,问题应该是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