Lottie 集成动画缺失部分 解决方法

首先附上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是一个非常强大和好用的库,虽然很多功能还不支持,但还是期待一下?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值