
鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程 原创
鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程
本教程适合HarmonyOS初学者,通过简单到复杂的步骤,一步步实现类似哔哩哔哩APP中的点赞及一键三连效果。
开发环境准备
- DevEco Studio 5.0.3
- HarmonyOS Next API 15
最终效果预览
我们将实现以下两个效果:
- 点击点赞按钮:实现点赞/取消点赞的切换效果,包含图标变色和缩放动画
- 长按点赞按钮:实现一键三连效果,包含旋转、缩放和粒子动画
一、基础布局实现
首先,我们需要创建基本的界面布局。这一步非常简单,只需要放置一个点赞图标。
这一步实现了最基础的布局,我们使用了Stack布局使元素居中,并添加了一个点赞图标。点赞图标大家可以去 iconfont.cn 平台下载一个,通过 $()
函数导入资源$r('app.media.ic_public_like')
。
二、添加状态和颜色切换
接下来,我们添加状态变量来跟踪点赞状态,并实现点击时的颜色切换效果。
这一步我们添加了:
isLiked
状态变量,用于跟踪是否已点赞- 两个颜色变量
unlikeColor
和likeColor
- 在图标上添加
fillColor
属性,根据点赞状态切换颜色 - 为图标添加
onClick
事件,实现点击时切换点赞状态
现在点击图标时,图标会在灰色和蓝色之间切换,实现了基本的点赞/取消点赞效果。
三、添加点击动画效果
点击时的颜色变化已经实现了,但用户体验还不够好。我们需要添加一些动画效果,让点赞操作更加生动。
这一步我们添加了:
scaleValue
状态变量,用于控制图标的缩放比例- 图标添加
scale
属性,绑定到scaleValue
状态 - 创建了
toggleLike
方法,实现点赞状态切换和动画效果 - 使用
animateTo
方法创建两段动画:先放大,再恢复原大小
现在点击图标时,不仅会变色,还会有一个放大再缩小的动画效果,让交互更加生动。
四、添加长按手势识别
接下来,我们要实现长按触发一键三连的功能,首先需要添加长按手势识别。
这一步我们添加了:
isTripleAction
状态变量,用于标记是否触发了一键三连效果- 使用
gesture
方法添加长按手势识别 - 在长按触发时设置相关状态
- 注意图片添加
draggable(false)
,防止用户拖拽图片,导致点赞按钮无法长按
现在,长按图标后,会将点赞状态设为已点赞,并触发三连状态,但还没有具体的动画效果。
五、添加长按动画效果
下一步,我们为长按添加更丰富的动画效果,包括旋转和缩放。
这一步我们添加了:
rotation
状态变量,用于控制图标的旋转角度- 图标添加
rotate
属性,实现旋转效果 - 创建了
triggerTripleAction
方法,实现三连动画效果 - 三段连续动画,实现放大旋转、缩小恢复的动画序列
现在,长按图标会触发一系列动画:图标先放大并顺时针旋转,然后缩小并恢复原始角度,最后恢复原始大小,整个过程非常流畅。
六、添加粒子爆炸效果
最后,我们添加粒子爆炸效果,让一键三连的视觉效果更加丰富。
这一步我们添加了:
iconOpacity
状态变量,用于控制粒子的透明度- 在Stack中添加粒子效果容器
- 使用ForEach和条件渲染,当触发三连效果时创建并显示粒子
- 使用三角函数计算粒子在圆周上的位置
- 添加粒子的动画效果,包括出现和消失
七、完整实现
最后,我们来看一下最终的完整代码实现。这里整合了前面所有的步骤,并添加了一些额外的细节优化。
拓展与优化
以上是基本的实现,如果想进一步优化,可以考虑:
- 添加声音效果:在点赞和三连时添加声音反馈
- 添加震动反馈:利用设备振动提供触觉反馈
- 优化粒子效果:使用更复杂的粒子系统,例如随机大小、颜色和速度
- 添加投币和收藏图标:真正实现完整的"一键三连"效果,显示投币和收藏图标
总结
通过这个教程,我们从零开始实现了哔哩哔哩的点赞和一键三连效果。主要用到了以下技术:
- HarmonyOS的ArkUI布局系统
- 状态管理(@State)
- 手势处理(点击、长按)
- 动画系统(animateTo)
- 条件渲染
- 数学计算(用于粒子位置)
这些技术和概念不仅适用于这个特定效果,还可以应用于各种交互设计中。希望这个教程能帮助你更好地理解HarmonyOS开发,并创建出更加精美的应用界面!
