鸿蒙 Next 实现仿抖音点赞动画功能
实现目标: 抖音小视频播放时,双击屏幕会在手指点击位置出现一个小红心,由大变小,然后放大渐变消失,并且点击速度快,可以出现多个小红心动画,每次出现的小红心会有一个小角度的旋转。
实现思路:
1.双击屏幕,在手指点击位置会出现小心心,因此需要监听双击手势,并且获取到点击坐标
2.快速点击,会产生多个小心心的动画,因此需要动态添加 view
3.动画过程,大概是出现后先缩小后放大逐渐消失
实现结果:

实现过程:
1.在需要展示动画的父布局中,添加占位组件 ContentSlot()用于动态添加点赞动画 2.之前一篇介绍了动态添加布局,需要定一个布局,和一个参数对象
4.使用动画,需要对 Image 的属性进行修改,但是 buildHeartView 不支持内部定义参数,所以需要修改 params 的值,这时需要用到 BuilderNode 的 update 方法更新参数。这里不能直接在 buildHeartView 内里修改参数,否侧会报错。例如在 onAppear 中修改透明度的值,会闪退:

实现优化:
这里我们需要展示 2 个动画,需要在主布局中维护想要调整的属性值,后期如果修改或者复用,一点也不方便,如何将动画的控制让 Image 自己控制呢? 主布局中我只要触发动画就行。实现也很简单,只要再定义一个全局的 Component,动画相关的事情让这个子组件去实现,buildHeartView 中引用这个全局 Component。动态节点只需要负责展示定位和角度就可以了。最后加一个动画结束的回调用于移除节点。
最终源码:
版权声明: 本文为 InfoQ 作者【auhgnixgnahz】的原创文章。
原文链接:【http://xie.infoq.cn/article/86990313a51c65b537a33e30b】。文章转载请联系作者。
评论