首先附上Lottie iOS的地址，集成方式参见README Lottie
在集成Lottie的时候首先第一步是熟悉基本使用
首先将美工给的JSON文件导入到工程（本人通过此文顺利指导公司美工导出JSON，亲测有效：https://www.jianshu.com/p/94f7a0102be5），直接拖动进来：
选择相应的选项：
image.png
然后在工程中就可以看到这个JSON文件了
image.png
很简单的几行代码就可以实现图片的动画效果
//指定加载的JSON文件
let animation = Animation.named("fishJson")
//将动画添加到AnimationView
fishBubble.animation = animation
//填充模式（拉伸模式）
fishBubble.contentMode = .scaleAspectFit
//开启动画
fishBubble.play()
//动画循环播放
fishBubble.loopMode = .loop
//动画位置
fishBubble.frame = CGRect(x: 0, y: -10, width: 0.092*K_ScreenW, height: 0.653*0.108*K_ScreenW)
此处就实现了JSON文件的动画效果，可以运行模拟器调试。
按理说此处已经成功加载了动画效果，但是部分童鞋的动画效果可能没有显示出来，别急，本人测试第一步：
让公司美工导出时选择Demo选项，导出为html文件，直接网页测试(插件导出时，在Settings中可以设置)
image.png
在美工电脑上显示无任何问题，开始在自己电脑上测试，打开Lottie官方测试地址：Lottie官方测试地址
点击右上角，这个性感按钮：
image.png
直接将美工的JSON文件拖入，发现了问题
image.png
？？？这是个锤子🔨，图片呢？怎么变成了展位图。这时候发现美工那里有一个文件夹，里面还有图片资源没有给我，拿到图片资源后，怎么加成了问题，从网上找了很多文章没有答案，只能去查官方文档。果然发现了，哦豁！
image.png
这是啥？没错，Lottie官方已经说了，如果你的动画包含位图，第三方图片不是纯动画绘制效果，那就需要从文件中读取，才能正确显示！这个方法就是ImageProvider
其实早就有考虑过这个问题，但是当时很蠢的把图片加到了Assets文件夹
image.png
NO～NO～NO～这不是正确的打开方式！因为我们最终要使用Bundle读取，直接和JSON文件一样，拖入工程
image.png
（似曾相识对吧）OK！这时候JSON文件和图片资源都准备好了加上那关键的一行代码(
img_0是你的图片名称，相应替换)
//加载图片资源
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "img_0")
//添加到相应动画视图
fishBubble.imageProvider = imageProvider
启动后正确显示所有动画效果！
以上代码均以swift实现，OC相应替换即可。Lottie动画内容丢失的各个测试方案也在文中说明，总体来说Lottie是一个非常强大和好用的库，虽然很多功能还不支持，但还是期待一下😄
网友评论