admin管理员组

文章数量:1443526

鸿蒙特效教程04

鸿蒙特效教程04-直播点赞动画效果实现教程

在时下流行的直播、短视频等应用中，点赞动画是提升用户体验的重要元素。当用户点击屏幕时，屏幕上会出现飘动的点赞图标。

本教程适合HarmonyOS初学者，通过简单到复杂的步骤，通过HarmonyOS的Canvas组件，一步步实现时下流行的点赞动画效果。

开发环境准备

  • DevEco Studio 5.0.3
  • HarmonyOS Next API 15

下载代码仓库

效果预览

我们将实现的效果是：用户点击屏幕时，在点击位置生成一个emoji表情图标，逐步添加了以下动画效果：

  1. 向上移动：让图标从点击位置向上飘移
  2. 非线性运动：使用幂函数让移动更加自然
  3. 渐隐效果：让图标在上升过程中逐渐消失
  4. 放大效果：让图标从小变大
  5. 左右摆动：增加水平方向的微妙摆动

1. 基础结构搭建

首先，我们创建一个基本的页面结构和数据模型，用于管理点赞图标和动画。

定义图标数据结构

代码语言：typescript复制
// 定义点赞图标数据结构
interface LikeIcon {
  x: number // X坐标
  y: number // Y坐标
  initialX: number // 初始X坐标
  initialY: number // 初始Y坐标
  radius: number // 半径
  emoji: string // emoji表情
  fontSize: number // 字体大小
  opacity: number // 透明度
  createTime: number // 创建时间
  lifespan: number // 生命周期(毫秒)
  scale: number // 当前缩放比例
  initialScale: number // 初始缩放比例
  maxScale: number // 最大缩放比例
  maxOffset: number // 最大摆动幅度
  direction: number // 摆动方向 (+1或-1)
}

这个接口定义了每个点赞图标所需的所有属性，从位置到动画参数，为后续的动画实现提供了数据基础。

组件基本结构

代码语言：typescript复制
@Entry
@Component
struct CanvasLike {
  // 用来配置CanvasRenderingContext2D对象的参数，开启抗锯齿
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  // 创建CanvasRenderingContext2D对象
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State likeIcons: LikeIcon[] = [] // 存储所有点赞图标
  private animationId: number = 0 // 动画ID
  // emoji表情数组
  private readonly emojis: string[] = [
    '❤️', '

                本文标签：
                鸿蒙特效教程04

                        版权声明：本文标题：鸿蒙特效教程04 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1748149045a2816616.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。