android图片局部替换,如何动态修改Lottie动画里的部分图片?

本文介绍了如何在Lottie动画中替换图片,通过前端处理实现孩子的头像替换小猴子脸部的动效。利用canvas的clip() API绘制圆形头像,并解决跨域问题和多页面资源路径问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

动效给的效果是一个头耳朵话筒胳膊都在动的摇摆效果,这个不能传视频,大体图片展示如下bVcHUKn

紧靠前端css实现这种动效比较难,因此决定采用Lottie实现。

后面才了解到,产品希望小猴子的脸是孩子的头像图片,于是修改了Lottie的json文件,将动效里面的头像换成自己的,但是实现效果如下

bVcHUKp

看了很多关于lottie的文章,查找每一个属性的作用,找到一个 tm(剪裁路径) 的属性,但是都仅仅是提到这个属性,具体怎么用完全不知道,看一下里面的json结构,想去实现剪裁效果简直一脸蒙。

bVcHUKE

只能另辟蹊径,有什么办法获取头像之后把它变成圆的呢?后端处理返回圆形头像

前端剪裁头像,然后替换

后端处理的话,也不太现实,还要后端实现,而且会占用服务器处理。

前端处理,忽然想到之前用canvas生成海报图,那是否可以绘制圆形图片呢?搜了一下果然可以,大喜过望。

关键在于是clip()API,这个API,可以用你指定的形状在画布上裁剪一部分出来,然后,接下来你在画布上的操作只有在该形状区域内可见,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值