首先附上Lottie iOS的地址,集成方式参见README Lottie
在集成Lottie的时候首先第一步是熟悉基本使用
首先将美工给的JSON文件导入到工程(本人通过此文顺利指导公司美工导出JSON,亲测有效:https://www.jianshu.com/p/94f7a0102be5),直接拖动进来:
选择相应的选项:
然后在工程中就可以看到这个JSON文件了
很简单的几行代码就可以实现图片的动画效果
//指定加载的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中可以设置)
在美工电脑上显示无任何问题,开始在自己电脑上测试,打开Lottie官方测试地址:Lottie官方测试地址
点击右上角,这个性感按钮:
直接将美工的JSON文件拖入,发现了问题
???这是个锤子🔨,图片呢?怎么变成了展位图。这时候发现美工那里有一个文件夹,里面还有图片资源没有给我,拿到图片资源后,怎么加成了问题,从网上找了很多文章没有答案,只能去查官方文档。果然发现了,哦豁!
这是啥?没错,Lottie官方已经说了,如果你的动画包含位图,第三方图片不是纯动画绘制效果,那就需要从文件中读取,才能正确显示!这个方法就是ImageProvider
其实早就有考虑过这个问题,但是当时很蠢的把图片加到了Assets文件夹
NO~NO~NO~这不是正确的打开方式!因为我们最终要使用Bundle读取,直接和JSON文件一样,拖入工程
(似曾相识对吧)OK!这时候JSON文件和图片资源都准备好了加上那关键的一行代码(
img_0
是你的图片名称,相应替换)
//加载图片资源
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "img_0")
//添加到相应动画视图
fishBubble.imageProvider = imageProvider
启动后正确显示所有动画效果!
以上代码均以swift实现,OC相应替换即可。Lottie动画内容丢失的各个测试方案也在文中说明,总体来说Lottie是一个非常强大和好用的库,虽然很多功能还不支持,但还是期待一下😄