动效给的效果是一个头耳朵话筒胳膊都在动的摇摆效果,这个不能传视频,大体图片展示如下
紧靠前端css实现这种动效比较难,因此决定采用Lottie实现。
后面才了解到,产品希望小猴子的脸是孩子的头像图片,于是修改了Lottie的json文件,将动效里面的头像换成自己的,但是实现效果如下
看了很多关于lottie的文章,查找每一个属性的作用,找到一个 tm(剪裁路径) 的属性,但是都仅仅是提到这个属性,具体怎么用完全不知道,看一下里面的json结构,想去实现剪裁效果简直一脸蒙。
只能另辟蹊径,有什么办法获取头像之后把它变成圆的呢?后端处理返回圆形头像
前端剪裁头像,然后替换
后端处理的话,也不太现实,还要后端实现,而且会占用服务器处理。
前端处理,忽然想到之前用canvas生成海报图,那是否可以绘制圆形图片呢?搜了一下果然可以,大喜过望。
关键在于是clip()API,这个API,可以用你指定的形状在画布上裁剪一部分出来,然后,接下来你在画布上的操作只有在该形状区域内可见,