鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程 ...

哔哩哔哩点赞与一键三连效果实现教程

   本教程得当HarmonyOS初学者，通过简单到复杂的步骤，一步步实现类似哔哩哔哩APP中的点赞及一键三连效果。
  最终效果预览

我们将实现以下两个效果：

• 点击点赞按钮：实现点赞/取消点赞的切换效果，包含图标变色和缩放动画
  
• 长按点赞按钮：实现一键三连效果，包含旋转、缩放和粒子动画
  

一、基础布局实现

起首，我们必要创建根本的界面布局。这一步非常简单，只必要放置一个点赞图标。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   build() {
5.     // 使用Stack布局，使元素居中对齐
6.     Stack({ alignContent: Alignment.Center }) {
7.       // 点赞图标
8.       Image($r('app.media.ic_public_like'))
9.         .width(50) // 设置图标宽度
10.         .aspectRatio(1) // 保持宽高比为1:1
11.         .objectFit(ImageFit.Contain) // 设置图片适应方式
12.     }
13.     .width('100%') // 容器占满宽度
14.     .height('100%') // 容器占满高度
15.     .backgroundColor('#f1f1f1') // 设置背景颜色为浅灰色
16.   }
17. }

复制代码

这一步实现了最基础的布局，我们使用了Stack布局使元素居中，并添加了一个点赞图标。点赞图标各人可以去 iconfont.cn 平台下载一个，通过 $() 函数导入资源$r('app.media.ic_public_like')。
二、添加状态和颜色切换

接下来，我们添加状态变量来跟踪点赞状态，并实现点击时的颜色切换效果。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   // 是否已点赞状态
5.   @State isLiked: boolean = false
6.   // 未点赞时的颜色(灰色)
7.   @State unlikeColor: string = '#757575'
8.   // 点赞后的颜色(蓝色)
9.   @State likeColor: string = '#4eabe6'
11.   build() {
12.     Stack({ alignContent: Alignment.Center }) {
13.       Image($r('app.media.ic_public_like'))
14.         .width(50)
15.         .aspectRatio(1)
16.         .objectFit(ImageFit.Contain)
17.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor) // 根据点赞状态设置颜色
18.         .onClick(() => {
19.           // 点击时切换点赞状态
20.           this.isLiked = !this.isLiked
21.         })
22.     }
23.     .width('100%')
24.     .height('100%')
25.     .backgroundColor('#f1f1f1')
26.   }
27. }

复制代码

这一步我们添加了：

• isLiked 状态变量，用于跟踪是否已点赞
  
• 两个颜色变量 unlikeColor 和 likeColor
  
• 在图标上添加 fillColor 属性，根据点赞状态切换颜色
  
• 为图标添加 onClick 变乱，实现点击时切换点赞状态
  

现在点击图标时，图标会在灰色和蓝色之间切换，实现了根本的点赞/取消点赞效果。
三、添加点击动画效果

点击时的颜色变化已经实现了，但用户体验还不敷好。我们必要添加一些动画效果，让点赞操作更加生动。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   @State isLiked: boolean = false
5.   @State unlikeColor: string = '#757575'
6.   @State likeColor: string = '#4eabe6'
7.   // 添加控制缩放的状态变量
8.   @State scaleValue: number = 1
10.   build() {
11.     Stack({ alignContent: Alignment.Center }) {
12.       Image($r('app.media.ic_public_like'))
13.         .width(50)
14.         .aspectRatio(1)
15.         .objectFit(ImageFit.Contain)
16.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor)
17.         .scale({ x: this.scaleValue, y: this.scaleValue }) // 添加缩放效果
18.         .onClick(() => {
19.           this.toggleLike() // 调用点赞切换方法
20.         })
21.     }
22.     .width('100%')
23.     .height('100%')
24.     .backgroundColor('#f1f1f1')
25.   }
27.   // 处理点赞动画效果
28.   toggleLike() {
29.     // 切换点赞状态
30.     this.isLiked = !this.isLiked
32.     // 点赞动画 - 第一阶段：放大
33.     animateTo({
34.       duration: 300, // 动画持续300毫秒
35.       curve: Curve.Friction, // 使用摩擦曲线，效果更自然
36.       delay: 0 // 无延迟立即执行
37.     }, () => {
38.       this.scaleValue = 1.5 // 图标放大到1.5倍
39.     })
41.     // 点赞动画 - 第二阶段：恢复原大小
42.     animateTo({
43.       duration: 100, // 动画持续100毫秒
44.       curve: Curve.Friction, // 使用摩擦曲线
45.       delay: 300 // 延迟300毫秒执行，等第一阶段完成
46.     }, () => {
47.       this.scaleValue = 1 // 图标恢复到原始大小
48.     })
49.   }
50. }

复制代码

这一步我们添加了：

• scaleValue 状态变量，用于控制图标的缩放比例
  
• 图标添加 scale 属性，绑定到 scaleValue 状态
  
• 创建了 toggleLike 方法，实现点赞状态切换和动画效果
  
• 使用 animateTo 方法创建两段动画：先放大，再恢复原大小
  

现在点击图标时，不仅会变色，还会有一个放大再缩小的动画效果，让交互更加生动。
四、添加长按手势辨认

接下来，我们要实现长按触发一键三连的功能，起首必要添加长按手势辨认。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   @State isLiked: boolean = false
5.   @State unlikeColor: string = '#757575'
6.   @State likeColor: string = '#4eabe6'
7.   @State scaleValue: number = 1
8.   // 添加一个标记三连效果的状态
9.   @State isTripleAction: boolean = false
11.   build() {
12.     Stack({ alignContent: Alignment.Center }) {
13.       Image($r('app.media.ic_public_like'))
14.         .width(50)
15.         .aspectRatio(1)
16.         .objectFit(ImageFit.Contain)
17.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor)
18.         .scale({ x: this.scaleValue, y: this.scaleValue })
19.         // 添加长按手势
20.         .gesture(
21.           LongPressGesture({ repeat: false }) // 长按手势，不重复触发
22.             .onAction(() => {
23.               console.info("检测到长按事件")
24.               // 设置状态
25.               this.isTripleAction = true
26.               this.isLiked = true
27.             })
28.         )
29.         .onClick(() => {
30.           this.toggleLike()
31.         })
32.     }
33.     .width('100%')
34.     .height('100%')
35.     .backgroundColor('#f1f1f1')
36.   }
38.   // 点赞动画方法保持不变
39.   toggleLike() {
40.     // 代码同上...
41.   }
42. }

复制代码

这一步我们添加了：

• isTripleAction 状态变量，用于标记是否触发了一键三连效果
  
• 使用 gesture 方法添加长按手势辨认
  
• 在长按触发时设置相关状态
  

现在，长按图标后，会将点赞状态设为已点赞，并触发三连状态，但还没有具体的动画效果。
五、添加长按动画效果

下一步，我们为长按添加更丰富的动画效果，包罗旋转和缩放。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   @State isLiked: boolean = false
5.   @State isTripleAction: boolean = false
6.   @State scaleValue: number = 1
7.   @State unlikeColor: string = '#757575'
8.   @State likeColor: string = '#4eabe6'
9.   // 添加旋转角度状态
10.   @State rotation: number = 0
12.   build() {
13.     Stack({ alignContent: Alignment.Center }) {
14.       Image($r('app.media.ic_public_like'))
15.         .width(50)
16.         .aspectRatio(1)
17.         .objectFit(ImageFit.Contain)
18.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor)
19.         .scale({ x: this.scaleValue, y: this.scaleValue })
20.         .rotate({ z: 1, angle: this.rotation }) // 添加旋转效果
21.         .gesture(
22.           LongPressGesture({ repeat: false })
23.             .onAction(() => {
24.               this.triggerTripleAction() // 调用三连效果方法
25.             })
26.         )
27.         .onClick(() => {
28.           this.toggleLike()
29.         })
30.     }
31.     .width('100%')
32.     .height('100%')
33.     .backgroundColor('#f1f1f1')
34.   }
36.   // 点赞动画方法保持不变
37.   toggleLike() {
38.     // 代码同上...
39.   }
41.   // 处理一键三连动画效果
42.   triggerTripleAction() {
43.     // 设置三连状态和点赞状态
44.     this.isTripleAction = true
45.     this.isLiked = true
47.     // 阶段一：点赞按钮放大并旋转
48.     animateTo({
49.       duration: 200, // 动画持续200毫秒
50.       curve: Curve.EaseInOut // 使用缓入缓出曲线
51.     }, () => {
52.       this.scaleValue = 1.8 // 图标放大到1.8倍
53.       this.rotation = 20 // 图标旋转20度
54.     })
56.     // 阶段二：点赞按钮缩小并恢复角度
57.     animateTo({
58.       duration: 100, // 动画持续100毫秒
59.       curve: Curve.EaseInOut, // 使用缓入缓出曲线
60.       delay: 200 // 延迟200毫秒，等阶段一完成
61.     }, () => {
62.       this.scaleValue = 1.2 // 图标缩小到1.2倍
63.       this.rotation = 0 // 图标恢复原始角度
64.     })
66.     // 阶段三：点赞按钮恢复原始大小
67.     animateTo({
68.       duration: 100, // 动画持续100毫秒
69.       curve: Curve.EaseInOut, // 使用缓入缓出曲线
70.       delay: 300 // 延迟300毫秒，等阶段二完成
71.     }, () => {
72.       this.scaleValue = 1 // 图标恢复原始大小
73.     })
75.     // 重置三连状态
76.     setTimeout(() => {
77.       this.isTripleAction = false
78.     }, 1000) // 延迟1000毫秒(1秒)执行
79.   }
80. }

复制代码

这一步我们添加了：

• rotation 状态变量，用于控制图标的旋转角度
  
• 图标添加 rotate 属性，实现旋转效果
  
• 创建了 triggerTripleAction 方法，实现三连动画效果
  
• 三段连续动画，实现放大旋转、缩小恢复的动画序列
  

现在，长按图标会触发一系列动画：图标先放大并顺时针旋转，然后缩小并恢复原始角度，最后恢复原始大小，整个过程非常流畅。
六、添加粒子爆炸效果

最后，我们添加粒子爆炸效果，让一键三连的视觉效果更加丰富。

1. @Entry
2. @Component
3. struct BilibiliLike {
4.   @State isLiked: boolean = false
5.   @State isTripleAction: boolean = false
6.   @State scaleValue: number = 1
7.   @State rotation: number = 0
8.   @State unlikeColor: string = '#757575'
9.   @State likeColor: string = '#4eabe6'
10.   // 添加粒子透明度状态
11.   @State iconOpacity: number = 0
13.   build() {
14.     Stack({ alignContent: Alignment.Center }) {
15.       // 粒子效果容器
16.       Column() {
17.         // 当触发三连效果时显示粒子
18.         if (this.isTripleAction) {
19.           // 创建8个粒子，均匀分布在圆周上
20.           ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item: number) => {
21.             Circle()
22.               .width(8) // 粒子宽度
23.               .height(8) // 粒子高度
24.               .fill(this.likeColor) // 使用点赞颜色填充粒子
25.               // 使用三角函数计算粒子在圆周上的位置
26.               .position({ x: 25 + 50 * Math.cos(item * Math.PI / 4), y: 25 + 50 * Math.sin(item * Math.PI / 4) })
27.               .opacity(this.iconOpacity) // 控制粒子的透明度
28.           })
29.         }
30.       }
31.       .width(50) // 设置容器宽度
32.       .height(50) // 设置容器高度
34.       // 点赞按钮
35.       Image($r('app.media.ic_public_like'))
36.         .width(50)
37.         .aspectRatio(1)
38.         .objectFit(ImageFit.Contain)
39.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor)
40.         .scale({ x: this.scaleValue, y: this.scaleValue })
41.         .rotate({ z: 1, angle: this.rotation })
42.         .gesture(
43.           LongPressGesture({ repeat: false })
44.             .onAction(() => {
45.               this.triggerTripleAction()
46.             })
47.         )
48.         .onClick(() => {
49.           this.toggleLike()
50.         })
51.     }
52.     .width('100%')
53.     .height('100%')
54.     .backgroundColor('#f1f1f1')
55.   }
57.   // 点赞动画方法保持不变
58.   toggleLike() {
59.     // 代码同上...
60.   }
62.   // 处理一键三连动画效果
63.   triggerTripleAction() {
64.     // 设置三连状态和点赞状态
65.     this.isTripleAction = true
66.     this.isLiked = true
68.     // 点赞按钮动画部分保持不变
69.     // ...
71.     // 添加粒子出现动画
72.     animateTo({
73.       duration: 500, // 动画持续500毫秒
74.       curve: Curve.EaseOut, // 使用缓出曲线，开始快结束慢
75.       delay: 200 // 延迟200毫秒执行
76.     }, () => {
77.       this.iconOpacity = 1 // 粒子透明度变为1，完全显示
78.     })
80.     // 粒子消失动画
81.     animateTo({
82.       duration: 300, // 动画持续300毫秒
83.       curve: Curve.Linear, // 使用线性曲线，匀速变化
84.       delay: 700 // 延迟700毫秒，等粒子完全显示一段时间
85.     }, () => {
86.       this.iconOpacity = 0 // 粒子透明度变为0，完全消失
87.     })
89.     // 重置三连状态
90.     setTimeout(() => {
91.       this.isTripleAction = false
92.     }, 1000) // 延迟1000毫秒(1秒)执行
93.   }
94. }

复制代码

这一步我们添加了：

• iconOpacity 状态变量，用于控制粒子的透明度
  
• 在Stack中添加粒子效果容器
  
• 使用ForEach和条件渲染，当触发三连效果时创建并显示粒子
  
• 使用三角函数计算粒子在圆周上的位置
  
• 添加粒子的动画效果，包罗出现和消失
  

七、完备实现

最后，我们来看一下最终的完备代码实现。这里整合了前面所有的步骤，并添加了一些额外的细节优化。

1. /**
2. * 哔哩哔哩点赞和一键三连效果组件
3. * 实现功能:
4. * 1. 普通点击: 实现点赞/取消点赞效果
5. * 2. 长按: 触发一键三连效果(点赞+粒子动画)
6. */
7. @Entry
8. @Component
9. struct BilibiliLike {
10.   // 是否已点赞状态
11.   @State isLiked: boolean = false
12.   // 是否触发一键三连效果状态
13.   @State isTripleAction: boolean = false
14.   // 控制图标缩放比例
15.   @State scaleValue: number = 1
16.   // 控制图标透明度
17.   @State opacityValue: number = 1
18.   // 控制图标X轴偏移量
19.   @State translateXValue: number = 0
20.   // 控制图标Y轴偏移量
21.   @State translateYValue: number = 0
22.   // 控制图标旋转角度
23.   @State rotation: number = 0
24.   // 控制粒子效果透明度
25.   @State iconOpacity: number = 0
26.   // 未点赞时的颜色(灰色)
27.   @State unlikeColor: string = '#757575'
28.   // 点赞后的颜色(蓝色)
29.   @State likeColor: string = '#4eabe6'
31.   build() {
32.     // 使用Stack布局，所有元素居中对齐
33.     Stack({ alignContent: Alignment.Center }) {
34.       // 粒子效果容器
35.       Column() {
36.         // 当触发三连效果时显示粒子
37.         if (this.isTripleAction) {
38.           // 创建8个粒子，均匀分布在圆周上
39.           ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item: number) => {
40.             Circle()
41.               .width(8) // 粒子宽度
42.               .height(8) // 粒子高度
43.               .fill(this.likeColor) // 使用点赞颜色填充粒子
44.               // 使用三角函数计算粒子在圆周上的位置
45.               .position({ x: 25 + 50 * Math.cos(item * Math.PI / 4), y: 25 + 50 * Math.sin(item * Math.PI / 4) })
46.               .opacity(this.iconOpacity) // 控制粒子的透明度
47.           })
48.         }
49.       }
50.       .width(50) // 设置容器宽度
51.       .height(50) // 设置容器高度
53.       // 点赞按钮
54.       Image($r('app.media.ic_public_like')) // 使用点赞图标资源
55.         .width(50) // 设置图标宽度
56.         .aspectRatio(1) // 保持宽高比为1:1
57.         .objectFit(ImageFit.Contain) // 设置图片适应方式
58.         .fillColor(this.isLiked ? this.likeColor : this.unlikeColor) // 根据点赞状态设置颜色
59.         .scale({ x: this.scaleValue, y: this.scaleValue }) // 设置缩放值
60.         .opacity(this.opacityValue) // 设置透明度
61.         .rotate({ z: 1, angle: this.rotation }) // 设置旋转角度，绕z轴旋转
62.         .translate({ x: this.translateXValue, y: this.translateYValue }) // 设置平移值
63.         // 添加长按手势，触发一键三连效果
64.         .gesture(
65.           LongPressGesture({ repeat: false }) // 长按手势，不重复触发
66.             .onAction(() => {
67.               this.triggerTripleAction() // 调用三连效果方法
68.             })
69.         )
70.         // 添加点击事件，触发普通点赞效果
71.         .onClick(() => {
72.           this.toggleLike() // 调用点赞切换方法
73.         })
74.     }
75.     .width('100%') // 容器占满宽度
76.     .height('100%') // 容器占满高度
77.     .backgroundColor('#f1f1f1') // 设置背景颜色为浅灰色
78.     .expandSafeArea() // 扩展到安全区域
79.   }
81.   /**
82.    * 处理点赞/取消点赞动画效果
83.    * 点击时切换点赞状态并播放放大缩小动画
84.    */
85.   toggleLike() {
86.     // 切换点赞状态
87.     this.isLiked = !this.isLiked
89.     // 点赞动画 - 第一阶段：放大
90.     animateTo({
91.       duration: 300, // 动画持续300毫秒
92.       curve: Curve.Friction, // 使用摩擦曲线，效果更自然
93.       delay: 0 // 无延迟立即执行
94.     }, () => {
95.       this.scaleValue = 1.5 // 图标放大到1.5倍
96.     })
98.     // 点赞动画 - 第二阶段：恢复原大小
99.     animateTo({
100.       duration: 100, // 动画持续100毫秒
101.       curve: Curve.Friction, // 使用摩擦曲线
102.       delay: 300 // 延迟300毫秒执行，等第一阶段完成
103.     }, () => {
104.       this.scaleValue = 1 // 图标恢复到原始大小
105.     })
106.   }
108.   /**
109.    * 处理一键三连动画效果
110.    * 包含多个动画阶段：放大旋转、粒子出现与消失
111.    */
112.   triggerTripleAction() {
113.     // 设置三连状态和点赞状态
114.     this.isTripleAction = true // 启用三连效果
115.     this.isLiked = true // 设置为已点赞状态
117.     // 阶段一：点赞按钮放大并旋转
118.     animateTo({
119.       duration: 200, // 动画持续200毫秒
120.       curve: Curve.EaseInOut // 使用缓入缓出曲线
121.     }, () => {
122.       this.scaleValue = 1.8 // 图标放大到1.8倍
123.       this.rotation = 20 // 图标旋转20度
124.     })
126.     // 阶段二：点赞按钮缩小并恢复角度
127.     animateTo({
128.       duration: 100, // 动画持续100毫秒
129.       curve: Curve.EaseInOut, // 使用缓入缓出曲线
130.       delay: 200 // 延迟200毫秒，等阶段一完成
131.     }, () => {
132.       this.scaleValue = 1.2 // 图标缩小到1.2倍
133.       this.rotation = 0 // 图标恢复原始角度
134.     })
136.     // 阶段三：点赞按钮恢复原始大小
137.     animateTo({
138.       duration: 100, // 动画持续100毫秒
139.       curve: Curve.EaseInOut, // 使用缓入缓出曲线
140.       delay: 300 // 延迟300毫秒，等阶段二完成
141.     }, () => {
142.       this.scaleValue = 1 // 图标恢复原始大小
143.       this.isLiked = true // 确保点赞状态为true
144.     })
146.     // 阶段四：粒子出现动画
147.     animateTo({
148.       duration: 500, // 动画持续500毫秒
149.       curve: Curve.EaseOut, // 使用缓出曲线，开始快结束慢
150.       delay: 200 // 延迟200毫秒执行
151.     }, () => {
152.       this.iconOpacity = 1 // 粒子透明度变为1，完全显示
153.     })
155.     // 阶段五：粒子消失动画
156.     animateTo({
157.       duration: 300, // 动画持续300毫秒
158.       curve: Curve.Linear, // 使用线性曲线，匀速变化
159.       delay: 700 // 延迟700毫秒，等粒子完全显示一段时间
160.     }, () => {
161.       this.iconOpacity = 0 // 粒子透明度变为0，完全消失
162.     })
164.     // 延时重置三连状态，完成整个动画周期
165.     setTimeout(() => {
166.       this.isTripleAction = false // 关闭三连效果状态
167.     }, 1000) // 延迟1000毫秒(1秒)执行
168.   }
169. }

复制代码

拓展与优化

以上是根本的实现，如果想进一步优化，可以思量：

• 添加声音效果：在点赞和三连时添加声音反馈
  
• 添加震动反馈：利用设备振动提供触觉反馈
  
• 优化粒子效果：使用更复杂的粒子体系，例如随机大小、颜色和速率
  
• 添加投币和收藏图标：真正实现完备的"一键三连"效果，显示投币和收藏图标
  

总结

通过这个教程，我们从零开始实现了哔哩哔哩的点赞和一键三连效果。重要用到了以下技术：

• HarmonyOS的ArkUI布局体系
  
• 状态管理（@State）
  
• 手势处理（点击、长按）
  
• 动画体系（animateTo）
  
• 条件渲染
  
• 数学计算（用于粒子位置）
  

这些技术和概念不仅实用于这个特定效果，还可以应用于各种交互设计中。盼望这个教程能帮助你更好地理解HarmonyOS开发，并创建出更加精美的应用界面！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。