鸿蒙殊效教程02-微信语音录制动画

鸿蒙殊效教程02-微信语音录制动画效果实现教程

   本教程适合HarmonyOS初学者，通过简单到复杂的步调，一步步实现类似微信APP中的语音录制动画效果。
  开辟环境准备

• DevEco Studio 5.0.3
  
• HarmonyOS Next API 15
  

终极效果预览

我们将实现以下功能：

• 长按"按住语言"按钮：显示录音界面和声颠簸画
  
• 录音过程中显示及时时长
  
• 手指上滑：取消录音发送
  
• 松开手指：根据状态发送或取消录音
  

一、底子布局实现

首先，我们须要创建根本的界面布局，模拟微信谈天界面的结构。

1. @Entry
2. @Component
3. struct WeChatRecorder {
4.   build() {
5.     Column() {
6.       // 聊天内容区域(模拟)
7.       Stack({ alignContent: Alignment.Center }) {
8.       }
9.       .layoutWeight(1)
10.       
11.       // 底部输入栏
12.       Row() {
13.         // 录音按钮
14.         Text('按住 说话')
15.           .fontSize(16)
16.           .fontColor('#333333')
17.           .backgroundColor('#F5F5F5')
18.           .borderRadius(4)
19.           .textAlign(TextAlign.Center)
20.           .width('100%')
21.           .height(40)
22.           .padding({ left: 10, right: 10 })
23.       }
24.       .width('100%')
25.       .backgroundColor(Color.White)
26.       .expandSafeArea()
27.       .padding({ left: 15, right: 15, top: 15 })
28.       .border({ width: { top: 1 }, color: '#E5E5E5' })
29.     }
30.     .width('100%')
31.     .height('100%')
32.     .backgroundColor('#EDEDED')
33.     .expandSafeArea()
34.   }
35. }

复制代码

这一步我们创建了一个根本的谈天界面布局，包含两部分：

• 顶部谈天内容地区：利用Stack布局，现在为空
  
• 底部输入栏：包含一个"按住 语言"按钮
  

二、添加状态变量

接下来，我们须要添加一些状态变量来跟踪录音状态和动画效果。

1. @Entry
2. @Component
3. struct WeChatRecorder {
4.   // 是否正在录音
5.   @State isRecording: boolean = false
6.   // 是否显示取消提示(上滑状态)
7.   @State isCancel: boolean = false
8.   // 录音时长(秒)
9.   @State recordTime: number = 0
10.   // 声波高度变化数组
11.   @State waveHeights: number[] = [20, 30, 25, 40, 35, 28, 32, 37]
12.   // 计时器ID
13.   private timerId: number = 0
14.   // 波形动画计时器ID
15.   private waveTimerId: number = 0
16.   // 触摸起始位置
17.   private touchStartY: number = 0
18.   // 触摸移动阈值，超过该值显示取消提示
19.   private readonly cancelThreshold: number = 50
21.   build() {
22.     // 之前的布局代码
23.   }
24. }

复制代码

我们添加了以下状态变量：

• isRecording：跟踪是否正在录音
  
• isCancel：跟踪是否处于取消录音状态（上滑）
  
• recordTime：纪录录音时长（秒）
  
• waveHeights：存储声波高度数组，用于实现波形动画
  
• timerId：存储计时器ID，用于后续扫除
  
• waveTimerId：存储波形动画计时器ID
  
• touchStartY：纪录触摸起始位置，用于盘算上滑距离
  
• cancelThreshold：定义上滑多少距离触发取消状态
  

三、添加底子方法

在实现UI交互前，我们先添加一些底子方法来处理录音状态和动画效果。

1. @Entry
2. @Component
3. struct WeChatRecorder {
4.   // 状态变量定义...
6.   /**
7.    * 开始录音，初始化状态及启动计时器
8.    */
9.   startRecording() {
10.     this.isRecording = true
11.     this.isCancel = false
12.     this.recordTime = 0
14.     // 启动计时器，每秒更新录音时长
15.     this.timerId = setInterval(() => {
16.       this.recordTime++
17.     }, 1000)
19.     // 启动波形动画计时器，随机更新波形高度
20.     this.waveTimerId = setInterval(() => {
21.       this.updateWaveHeights()
22.     }, 200)
23.   }
25.   /**
26.    * 结束录音，清理计时器和状态
27.    */
28.   stopRecording() {
29.     // 清除计时器
30.     if (this.timerId !== 0) {
31.       clearInterval(this.timerId)
32.       this.timerId = 0
33.     }
35.     if (this.waveTimerId !== 0) {
36.       clearInterval(this.waveTimerId)
37.       this.waveTimerId = 0
38.     }
40.     // 如果是取消状态，则显示取消提示
41.     if (this.isCancel) {
42.       console.info('录音已取消')
43.     } else if (this.recordTime > 0) {
44.       // 如果录音时长大于0，则模拟发送语音
45.       console.info(`发送语音，时长: ${this.recordTime}秒`)
46.     }
48.     // 重置状态
49.     this.isRecording = false
50.     this.isCancel = false
51.     this.recordTime = 0
52.   }
54.   /**
55.    * 更新波形高度以产生动画效果
56.    */
57.   updateWaveHeights() {
58.     // 创建新的波形高度数组
59.     const newHeights = this.waveHeights.map(() => {
60.       // 生成20-40之间的随机高度
61.       return Math.floor(Math.random() * 20) + 20
62.     })
64.     this.waveHeights = newHeights
65.   }
67.   /**
68.    * 格式化时间显示，将秒转换为"00:00"格式
69.    */
70.   formatTime(seconds: number): string {
71.     const minutes = Math.floor(seconds / 60)
72.     const secs = seconds % 60
73.     return `${minutes.toString()
74.       .padStart(2, '0')}:${secs.toString()
75.       .padStart(2, '0')}`
76.   }
78.   aboutToDisappear() {
79.     // 组件销毁时清除计时器
80.     if (this.timerId !== 0) {
81.       clearInterval(this.timerId)
82.       this.timerId = 0
83.     }
85.     if (this.waveTimerId !== 0) {
86.       clearInterval(this.waveTimerId)
87.       this.waveTimerId = 0
88.     }
89.   }
91.   build() {
92.     // 之前的布局代码
93.   }
94. }

复制代码

在这一步中，我们实现了以下方法：

• startRecording：开始录音，初始化状态并启动计时器
  
• stopRecording：竣事录音，清理计时器和状态
  
• updateWaveHeights：更新波形高度数组，产生动画效果
  
• formatTime：将秒数格式化为"00:00"格式的时间显示
  
• aboutToDisappear：组件销毁时清理计时器，防止内存泄漏
  

四、实现长按事件处理

接下来，我们为"按住 语言"按钮添加触摸事件处理，实现长按开始录音的功能。

1. @Entry
2. @Component
3. struct WeChatRecorder {
4.   // 之前的代码...
6.   build() {
7.     Column() {
8.       Stack({ alignContent: Alignment.Center }) {
9.         // 暂时留空，后面会添加录音界面
10.       }
11.       .layoutWeight(1)
12.       
13.       // 底部输入栏
14.       Row() {
15.         // 录音按钮
16.         Text(this.isRecording ? '松开 发送' : '按住 说话')
17.           .fontSize(16)
18.           .fontColor(this.isRecording ? Color.White : '#333333')
19.           .backgroundColor(this.isRecording ? '#07C160' : '#F5F5F5')
20.           .borderRadius(4)
21.           .textAlign(TextAlign.Center)
22.           .width('100%')
23.           .height(40)
24.           .padding({ left: 10, right: 10 })
25.           // 添加触摸事件
26.           .onTouch((event) => {
27.             if (event.type === TouchType.Down) {
28.               // 按下时，记录起始位置，开始录音
29.               this.touchStartY = event.touches[0].y
30.               this.startRecording()
31.             } else if (event.type === TouchType.Move) {
32.               // 移动时，检测是否上滑到取消区域
33.               const moveDistance = this.touchStartY - event.touches[0].y
34.               this.isCancel = moveDistance > this.cancelThreshold
35.             } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
36.               // 松开或取消触摸时，结束录音
37.               this.stopRecording()
38.             }
39.           })
40.       }
41.       .width('100%')
42.       .backgroundColor(this.isRecording ? Color.Transparent : Color.White)
43.       .expandSafeArea()
44.       .padding({ left: 15, right: 15, top: 15 })
45.       .border({ width: { top: 1 }, color: '#E5E5E5' })
46.     }
47.     .width('100%')
48.     .height('100%')
49.     .backgroundColor('#EDEDED')
50.     .expandSafeArea()
51.   }
52. }

复制代码

在这一步中，我们：

• 为按钮文本添加了动态内容，根据录音状态显示不同文字
  
• 为按钮添加了触摸事件处理，包罗按下、移动和松开/取消
  
• 根据录音状态动态改变底部栏的配景致
  

五、实现录音界面和声颠簸画

最后，我们添加录音状态下的界面显示，包罗上滑取消提示和声颠簸画。

1. @Entry
2. @Component
3. struct WeChatRecorder {
4.   // 之前的代码...
6.   build() {
7.     Column() {
8.       // 聊天内容区域
9.       Stack({ alignContent: Alignment.Center }) {
10.         // 录音状态提示
11.         if (this.isRecording) {
12.           // 遮罩背景
13.           Column()
14.             .width('100%')
15.             .height('100%')
16.             .backgroundColor('#80000000')
17.             .expandSafeArea()
19.           Column() {
20.             // 上滑取消提示
21.             Text(this.isCancel ? '松开手指，取消发送' : '手指上滑，取消发送')
22.               .fontSize(14)
23.               .fontColor(this.isCancel ? Color.Red : '#999999')
24.               .backgroundColor(this.isCancel ? '#FFE9E9' : '#D1D1D1')
25.               .borderRadius(4)
26.               .padding({
27.                 left: 10,
28.                 right: 10,
29.                 top: 5,
30.                 bottom: 5
31.               })
32.               .margin({ bottom: 20 })
34.             // 录音界面容器
35.             Column() {
36.               // 声波动画容器
37.               Row() {
38.                 ForEach(this.waveHeights, (height: number, index) => {
39.                   Column()
40.                     .width(4)
41.                     .height(height)
42.                     .backgroundColor('#7ED321')
43.                     .borderRadius(2)
44.                     .margin({ left: 3, right: 3 })
45.                 })
46.               }
47.               .width(160)
48.               .height(100)
49.               .justifyContent(FlexAlign.Center)
50.               .margin({ bottom: 15 })
52.               // 录音时间显示
53.               Text(`${this.formatTime(this.recordTime)}`)
54.                 .fontSize(16)
55.                 .fontColor('#999999')
56.             }
57.             .width(180)
58.             .backgroundColor(Color.White)
59.             .borderRadius(8)
60.             .justifyContent(FlexAlign.Center)
61.             .padding(10)
62.           }
63.           .width('100%')
64.           .height('100%')
65.           .justifyContent(FlexAlign.Center)
66.         }
67.       }
68.       .layoutWeight(1)
70.       // 底部输入栏
71.       // 与之前的代码相同
72.     }
73.     // 与之前的代码相同
74.   }
75. }

复制代码

在这一步中，我们添加了：

• 录音状态下的遮罩配景，利用半透明玄色配景
  
• 上滑取消提示，根据 isCancel 状态显示不同内容和样式
  
• 声颠簸画容器，利用 ForEach 循环遍历 waveHeights 数组创建多个柱状条
  
• 录音时间显示，利用 formatTime 方法格式化时间
  

六、完整实现

下面是完整的实当代码：

1. /**
2. * 微信语音录制动画效果
3. * 实现功能:
4. * 1. 长按按钮: 显示录音动画
5. * 2. 上滑取消: 模拟取消录音
6. * 3. 松开发送: 模拟发送语音
7. */
8. @Entry
9. @Component
10. struct WeChatRecorder {
11.   // 是否正在录音
12.   @State isRecording: boolean = false
13.   // 是否显示取消提示(上滑状态)
14.   @State isCancel: boolean = false
15.   // 录音时长(秒)
16.   @State recordTime: number = 0
17.   // 声波高度变化数组
18.   @State waveHeights: number[] = [20, 30, 25, 40, 35, 28, 32, 37]
19.   // 计时器ID
20.   private timerId: number = 0
21.   // 波形动画计时器ID
22.   private waveTimerId: number = 0
23.   // 触摸起始位置
24.   private touchStartY: number = 0
25.   // 触摸移动阈值，超过该值显示取消提示
26.   private readonly cancelThreshold: number = 50
28.   /**
29.    * 开始录音，初始化状态及启动计时器
30.    */
31.   startRecording() {
32.     this.isRecording = true
33.     this.isCancel = false
34.     this.recordTime = 0
36.     // 启动计时器，每秒更新录音时长
37.     this.timerId = setInterval(() => {
38.       this.recordTime++
39.     }, 1000)
41.     // 启动波形动画计时器，随机更新波形高度
42.     this.waveTimerId = setInterval(() => {
43.       this.updateWaveHeights()
44.     }, 200)
45.   }
47.   /**
48.    * 结束录音，清理计时器和状态
49.    */
50.   stopRecording() {
51.     // 清除计时器
52.     if (this.timerId !== 0) {
53.       clearInterval(this.timerId)
54.       this.timerId = 0
55.     }
57.     if (this.waveTimerId !== 0) {
58.       clearInterval(this.waveTimerId)
59.       this.waveTimerId = 0
60.     }
62.     // 如果是取消状态，则显示取消提示
63.     if (this.isCancel) {
64.       console.info('录音已取消')
65.     } else if (this.recordTime > 0) {
66.       // 如果录音时长大于0，则模拟发送语音
67.       console.info(`发送语音，时长: ${this.recordTime}秒`)
68.     }
70.     // 重置状态
71.     this.isRecording = false
72.     this.isCancel = false
73.     this.recordTime = 0
74.   }
76.   /**
77.    * 更新波形高度以产生动画效果
78.    */
79.   updateWaveHeights() {
80.     // 创建新的波形高度数组
81.     const newHeights = this.waveHeights.map(() => {
82.       // 生成20-40之间的随机高度
83.       return Math.floor(Math.random() * 20) + 20
84.     })
86.     this.waveHeights = newHeights
87.   }
89.   /**
90.    * 格式化时间显示，将秒转换为"00:00"格式
91.    */
92.   formatTime(seconds: number): string {
93.     const minutes = Math.floor(seconds / 60)
94.     const secs = seconds % 60
95.     return `${minutes.toString()
96.       .padStart(2, '0')}:${secs.toString()
97.       .padStart(2, '0')}`
98.   }
100.   aboutToDisappear() {
101.     // 组件销毁时清除计时器
102.     if (this.timerId !== 0) {
103.       clearInterval(this.timerId)
104.       this.timerId = 0
105.     }
107.     if (this.waveTimerId !== 0) {
108.       clearInterval(this.waveTimerId)
109.       this.waveTimerId = 0
110.     }
111.   }
113.   build() {
114.     Column() {
115.       // 聊天内容区域(模拟)
116.       Stack({ alignContent: Alignment.Center }) {
117.         // 录音状态提示
118.         if (this.isRecording) {
119.           // 遮罩背景
120.           Column()
121.             .width('100%')
122.             .height('100%')
123.             .backgroundColor('#80000000')
124.             .expandSafeArea()
126.           Column() {
127.             // 上滑取消提示
128.             Text(this.isCancel ? '松开手指，取消发送' : '手指上滑，取消发送')
129.               .fontSize(14)
130.               .fontColor(this.isCancel ? Color.Red : '#999999')
131.               .backgroundColor(this.isCancel ? '#FFE9E9' : '#D1D1D1')
132.               .borderRadius(4)
133.               .padding({
134.                 left: 10,
135.                 right: 10,
136.                 top: 5,
137.                 bottom: 5
138.               })
139.               .margin({ bottom: 20 })
141.             // 录音界面容器
142.             Column() {
143.               // 声波动画容器
144.               Row() {
145.                 ForEach(this.waveHeights, (height: number, index) => {
146.                   Column()
147.                     .width(4)
148.                     .height(height)
149.                     .backgroundColor('#7ED321')
150.                     .borderRadius(2)
151.                     .margin({ left: 3, right: 3 })
152.                 })
153.               }
154.               .width(160)
155.               .height(100)
156.               .justifyContent(FlexAlign.Center)
157.               .margin({ bottom: 15 })
159.               // 录音时间显示
160.               Text(`${this.formatTime(this.recordTime)}`)
161.                 .fontSize(16)
162.                 .fontColor('#999999')
163.             }
164.             .width(180)
165.             .backgroundColor(Color.White)
166.             .borderRadius(8)
167.             .justifyContent(FlexAlign.Center)
168.             .padding(10)
169.           }
170.           .width('100%')
171.           .height('100%')
172.           .justifyContent(FlexAlign.Center)
173.         }
174.       }
175.       .layoutWeight(1)
177.       // 底部输入栏
178.       Row() {
179.         // 录音按钮
180.         Text(this.isRecording ? '松开 发送' : '按住 说话')
181.           .fontSize(16)
182.           .fontColor(this.isRecording ? Color.White : '#333333')
183.           .backgroundColor(this.isRecording ? '#07C160' : '#F5F5F5')
184.           .borderRadius(4)
185.           .textAlign(TextAlign.Center)
186.           .width('100%')
187.           .height(40)
188.           .padding({ left: 10, right: 10 })// 添加触摸事件
189.           .onTouch((event) => {
190.             if (event.type === TouchType.Down) {
191.               // 按下时，记录起始位置，开始录音
192.               this.touchStartY = event.touches[0].y
193.               this.startRecording()
194.             } else if (event.type === TouchType.Move) {
195.               // 移动时，检测是否上滑到取消区域
196.               const moveDistance = this.touchStartY - event.touches[0].y
197.               this.isCancel = moveDistance > this.cancelThreshold
198.             } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
199.               // 松开或取消触摸时，结束录音
200.               this.stopRecording()
201.             }
202.           })
203.       }
204.       .width('100%')
205.       .backgroundColor(this.isRecording ? Color.Transparent : Color.White)
206.       .expandSafeArea()
207.       .padding({ left: 15, right: 15, top: 15 })
208.       .border({ width: { top: 1 }, color: '#E5E5E5' })
209.     }
210.     .width('100%')
211.     .height('100%')
212.     .backgroundColor('#EDEDED')
213.     .expandSafeArea()
214.   }
215. }

复制代码

拓展与优化

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

• 真实的录音功能：利用HarmonyOS的媒体录制API实实际际录音
  
• 声音波形及时变化：根据实际录音音量调整波形高度
  
• 振动反馈：在录音开始、取消或发送时添加振动反馈
  
• 显示已录制的语音消息：将录制好的语音添加到谈天消息列表中
  
• 录音时长限制：添加最长录音时间限制（如微信的60秒）
  

总结

通过这个教程，我们从零开始实现了类似微信的语音录制动画效果。重要用到了以下技术：

• HarmonyOS的ArkUI布局系统
  
• 状态管理（@State）
  
• 触摸事件处理
  
• 定时器和动画
  
• 条件渲染
  
• 组件生命周期处理
  

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

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