Lottie-iOS图片遮罩类型引起的BUG

本文讲述了在使用Lottie-iOS库播放.json动画时遇到的图片遮罩问题,通过调整遮罩类型(tt从2改为1)解决了金币看起来被塞在箱子内的视觉错误。最终通过UI的反向遮罩处理,实现了预期的漂浮效果。
摘要由CSDN通过智能技术生成

由于项目需要,需要添加动态图,我们的UI大佬说用Lottie播放Json实现。目标是实现UI图1这种币在箱子里漂浮的效果。

图1

于是UI给了我一张箱子图和一张金币的图以及一个.json类型的动画文件。

接着我就用Lottie-ios库里的方法调用json文件播放动画了,[LOTAnimationView animationNamed:@"box.json"];

然后运行的图就成了图2这样的了。

图2

研究了好久,发现是.json文件动画里加了遮罩(红、黑两块遮罩),从而看起来那个金币像是塞在箱子里面了。为了视觉效果看不出遮罩,我发现修改.json文件里的''tt''类型,也就是遮罩类型,把2改成1就好了。(如图3、4)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
lottie-web是一个开源的JavaScript库,用于在Web上渲染和播放Lottie动画。Lottie动画是由Adobe After Effects创建的矢量动画,可以使用Bodymovin插件导出为JSON格式,然后在网页上使用lottie-web库进行渲染和播放。 lottie-web库提供了很多功能和选项,以便开发者可以根据自己的需求使用和定制动画。它可以用于创建交互式的动画效果,如按钮的点击动画、加载动画、进度条动画等。此外,它还支持设置动画的循环次数、播放速度、淡入淡出效果等。 在使用lottie-web时,我们需要引入相关的CSS和JavaScript文件,并通过HTML的canvas元素来创建动画的容器。然后,我们可以使用lottie.loadAnimation()方法来加载并初始化动画,在loadAnimation()方法中,我们可以传入一些参数,如JSON文件路径、容器元素、循环次数等。 一旦动画加载完成,我们就可以使用lottie.play()方法来播放动画,使用lottie.stop()方法来停止动画。此外,还有一些其他的方法,如lottie.pause()方法暂停动画,lottie.setSpeed()方法设置播放速度等。 值得一提的是,lottie-web还支持事件监听,我们可以通过lottie.addEventListener()方法来监听动画的各种事件,如动画加载完成、播放完成等,以便于我们在合适的时机进行相应的处理。 总之,lottie-web文档提供了全面的使用说明和示例代码,可供开发者参考和学习。使用lottie-web,我们可以轻松地在Web上使用Lottie动画,为网页添加更加生动和有趣的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值