鸿蒙特效教程03-水波纹动画

鸿蒙特效教程03-水波纹动画效果实现教程

   本教程得当HarmonyOS初学者，通过简单到复杂的步骤，一步步实现美丽的水波纹动画效果。
  开发环境预备

• DevEco Studio 5.0.3
  
• HarmonyOS Next API 15
  

最终效果预览

我们将实现以下功能：

• 点击屏幕任意位置，在点击处生成一个水波纹
  
• 触摸并滑动屏幕，波纹会及时跟随手指位置生成
  
• 波纹从小到大扩散，同时逐渐消失
  
• 波纹颜色随机变革，增加视觉多样性
  

一、创建基础布局

首先，我们需要创建一个基础页面布局。这个布局包含一个占满屏幕的地域，用于展示水波纹动画。

1. @Entry
2. @Component
3. struct WaterRipple {
4.   build() {
5.     Column() {
6.       // 水波纹动画效果区域
7.       Stack() {
8.         // 提示文本
9.         Column() {
10.           Text('点击屏幕任意位置产生水波纹')
11.             .fontSize(16)
12.             .fontColor('#333')
13.             .margin({ top: 20 })
14.         }
15.         .width('100%')
16.         .height('100%')
17.         .justifyContent(FlexAlign.Center)
18.         .alignItems(HorizontalAlign.Center)
19.       }
20.       .width('100%')
21.       .height('100%')
22.     }
23.     .width('100%')
24.     .height('100%')
25.     .backgroundColor('#EDEDED')
26.     .expandSafeArea()
27.   }
28. }

复制代码

这段代码创建了一个简单的页面，包含以下元素：

• 最外层是一个占满整个屏幕的Column
  
• 内部是一个Stack组件，它允许我们将多个元素堆叠在一起
  
• 在Stack中放置了一个包含提示文本的Column
  

Stack组件很紧张，由于我们后续要在这里动态添加水波纹元素。
二、界说水波纹数据布局

在实现动画效果之前，我们需要先界说水波纹的数据布局。每个水波纹都有本身的位置、巨细、颜色等属性：

1. // 水波纹项目类型定义
2. interface RippleItem {
3.   id: number      // 唯一标识
4.   x: number       // 中心点X坐标
5.   y: number       // 中心点Y坐标
6.   size: number    // 当前大小
7.   maxSize: number // 最大大小
8.   opacity: number // 透明度
9.   color: string   // 颜色
10. }
12. @Entry
13. @Component
14. struct WaterRipple {
15.   // 水波纹数组，用于存储所有活动的水波纹
16.   @State ripples: RippleItem[] = []
17.   
18.   // 触摸状态
19.   @State isTouching: boolean = false
20.   // 波纹生成定时器
21.   private rippleTimer: number = -1
22.   // 当前触摸位置
23.   private touchX: number = 0
24.   private touchY: number = 0
25.   // 波纹生成间隔（毫秒）
26.   private readonly rippleInterval: number = 200
27.   
28.   // 其余代码保持不变...
29. }

复制代码

使用@State装饰器标志ripples数组和isTouching状态，这样当它们的内容发生变革时，UI会自动更新。我们还界说了一些用于跟踪触摸状态和位置的变量。
三、实现波纹绘制与点击事件

接下来，我们需要实现波纹的绘制，并处理基本的点击事件：

1. @Entry
2. @Component
3. struct WaterRipple {
4.   // 前面定义的属性不变...
6.   build() {
7.     Column() {
8.       // 水波纹动画效果
9.       Stack() {
10.         // 水波纹展示区域
11.         Column() {
12.           Text('点击屏幕任意位置产生水波纹')
13.             .fontSize(16)
14.             .fontColor('#333')
15.             .margin({ top: 20 })
16.           Text('触摸并滑动，波纹会跟随手指')
17.             .fontSize(16)
18.             .fontColor('#333')
19.             .margin({ top: 10 })
20.         }
21.         .width('100%')
22.         .height('100%')
23.         .justifyContent(FlexAlign.Center)
24.         .alignItems(HorizontalAlign.Center)
26.         // 绘制所有波纹
27.         ForEach(this.ripples, (item: RippleItem) => {
28.           Circle()
29.             .fill(item.color)
30.             .width(item.size)
31.             .height(item.size)
32.             .opacity(item.opacity)
33.             .position({ x: item.x - item.size / 2, y: item.y - item.size / 2 })
34.         })
35.       }
36.       .width('100%')
37.       .height('100%')
38.       // 触摸事件处理将在后面添加
39.     }
40.     // 其余代码保持不变...
41.   }
43.   // 创建水波纹的方法（暂未实现）
44.   createRipple(x: number, y: number) {
45.     console.info(`点击位置: x=${x}, y=${y}`)
46.   }
47. }

复制代码

在这一步中，我们添加了以下内容：

• 使用ForEach遍历ripples数组，为每个波纹创建一个Circle组件
  
• 为提示文本添加了第二行，阐明触摸滑动功能
  
• 添加了createRipple方法的基本布局（目前只打印坐标）
  

注意Circle组件的定位方式：由于圆形是以左上角为基准定位的，而我们希望以圆心定位，以是需要从坐标中减去圆形半径（即size/2）。
四、实现水波纹创建逻辑

下一步，我们来实现水波纹的创建逻辑：

1. // 创建一个新的水波纹
2. createRipple(x: number, y: number) {
3.   // 创建随机颜色
4.   const colors = ['#2196F3', '#03A9F4', '#00BCD4', '#4CAF50', '#8BC34A']
5.   const color = colors[Math.floor(Math.random() * colors.length)]
7.   // 创建新波纹
8.   const newRipple: RippleItem = {
9.     id: Date.now(),  // 使用时间戳作为唯一标识
10.     x: x,            // X坐标
11.     y: y,            // Y坐标
12.     size: 0,         // 初始大小为0
13.     maxSize: 300,    // 最大扩散到300像素
14.     opacity: 0.6,    // 初始透明度
15.     color: color     // 随机颜色
16.   }
18.   // 添加到波纹数组
19.   this.ripples.push(newRipple)
21.   // 启动波纹动画
22.   this.animateRipple(newRipple)
23. }

复制代码

在这个方法中：

• 我们界说了一个颜色数组，每次随机选择一种颜色
  
• 创建一个新的波纹对象，初始巨细为0，最大扩散尺寸为300像素
  
• 将新波纹添加到数组中，这会触发UI更新
  
• 调用animateRipple方法开始动画（下一步实现）
  

五、实现动画效果

如今，我们来实现波纹的扩散和消失动画：

1. // 动画处理波纹的扩散和消失
2. animateRipple(ripple: RippleItem) {
3.   let animationStep = 0
4.   const totalSteps = 60        // 总动画帧数
5.   const intervalTime = 16       // 每帧间隔时间（约60fps）
6.   const sizeStep = ripple.maxSize / totalSteps  // 每帧增加的尺寸
7.   const opacityStep = ripple.opacity / totalSteps  // 每帧减少的透明度
9.   const timer = setInterval(() => {
10.     animationStep++
12.     // 更新波纹状态
13.     const index = this.ripples.findIndex(item => item.id === ripple.id)
14.     if (index !== -1) {
15.       // 增加大小
16.       this.ripples[index].size += sizeStep
17.       // 降低透明度
18.       this.ripples[index].opacity -= opacityStep
20.       // 更新状态触发重绘
21.       this.ripples = [...this.ripples]
23.       // 动画结束，移除波纹
24.       if (animationStep >= totalSteps) {
25.         clearInterval(timer)
26.         this.ripples = this.ripples.filter(item => item.id !== ripple.id)
27.       }
28.     } else {
29.       // 波纹已被其他方式移除
30.       clearInterval(timer)
31.     }
32.   }, intervalTime)
33. }

复制代码

这个方法使用了setInterval定时器来创建动画，主要逻辑包括：

• 设置动画参数：总步数、帧间隔、每帧尺寸增量和透明度减量
  
• 每帧更新波纹的巨细和透明度，实现从小到大、从清晰到透明的效果
  
• 使用[...this.ripples]创建数组的新实例，触发UI更新
  
• 当动画完成（步数达到总步数）或波纹被移除时，扫除定时器
  
• 动画结束后从数组中移除该波纹，开释内存
  

至此，我们已经实现了基本的水波纹效果。下一步将添加触摸滑动功能。
六、实现触摸跟踪功能

最后，我们来实现触摸跟踪功能，让波纹可以或许跟随手指移动：

1. .onTouch((event: TouchEvent) => {
2.   // 获取当前触摸点坐标
3.   this.touchX = event.touches[0].x
4.   this.touchY = event.touches[0].y
5.   
6.   // 根据触摸状态处理
7.   switch (event.type) {
8.     case TouchType.Down:
9.       // 开始触摸，立即创建一个波纹
10.       this.isTouching = true
11.       this.createRipple(this.touchX, this.touchY)
12.       
13.       // 启动定时器连续生成波纹
14.       if (this.rippleTimer === -1) {
15.         this.rippleTimer = setInterval(() => {
16.           if (this.isTouching) {
17.             // 添加小偏移让效果更自然
18.             const offsetX = Math.random() * 10 - 5
19.             const offsetY = Math.random() * 10 - 5
20.             this.createRipple(this.touchX + offsetX, this.touchY + offsetY)
21.           }
22.         }, this.rippleInterval)
23.       }
24.       break
25.       
26.     case TouchType.Move:
27.       // 移动时保持触摸状态，波纹会在定时器中根据新坐标创建
28.       this.isTouching = true
29.       break
30.       
31.     case TouchType.Up:
32.     case TouchType.Cancel:
33.       // 触摸结束，停止生成波纹
34.       this.isTouching = false
35.       if (this.rippleTimer !== -1) {
36.         clearInterval(this.rippleTimer)
37.         this.rippleTimer = -1
38.       }
39.       break
40.   }
41. })

复制代码

在这段代码中，我们使用onTouch事件监听器来处理触摸事件，主要功能包括：

• 触摸开始(Down)时：
  
  
  
  • 记载触摸位置
    
  • 立刻创建一个波纹
    
  • 启动定时器，以固定间隔创建波纹
    
  
  
• 触摸移动(Move)时：
  
  
  
  • 更新触摸位置
    
  • 保持触摸状态，定时器会在新位置创建波纹
    
  
  
• 触摸结束(Up)或取消(Cancel)时：
  
  
  
  • 停止触摸状态
    
  • 扫除定时器，不再创建新波纹
    
  
  

这样实现后，当用户触摸并滑动屏幕时，波纹会及时跟随手指位置生成，创造出一种水流般的视觉效果。
完备代码

下面是最终的完备代码：

1. // 水波纹项目类型定义
2. interface RippleItem {
3.   id: number // 唯一标识
4.   x: number // 中心点X坐标
5.   y: number // 中心点Y坐标
6.   size: number // 当前大小
7.   maxSize: number // 最大大小
8.   opacity: number // 透明度
9.   color: string // 颜色
10. }
12. @Entry
13. @Component
14. struct WaterRipple {
15.   // 水波纹数组
16.   @State ripples: RippleItem[] = []
17.   // 触摸状态
18.   @State isTouching: boolean = false
19.   // 波纹生成定时器
20.   private rippleTimer: number = -1
21.   // 当前触摸位置
22.   private touchX: number = 0
23.   private touchY: number = 0
24.   // 波纹生成间隔（毫秒）
25.   private readonly rippleInterval: number = 200
27.   build() {
28.     Column() {
29.       // 水波纹动画效果
30.       Stack() {
31.         // 水波纹展示区域
32.         Column() {
33.           Text('点击屏幕任意位置产生水波纹')
34.             .fontSize(16)
35.             .fontColor('#333')
36.             .margin({ top: 20 })
37.           Text('触摸并滑动，波纹会跟随手指')
38.             .fontSize(16)
39.             .fontColor('#333')
40.             .margin({ top: 10 })
41.         }
42.         .width('100%')
43.         .height('100%')
44.         .justifyContent(FlexAlign.Center)
45.         .alignItems(HorizontalAlign.Center)
47.         // 绘制所有波纹
48.         ForEach(this.ripples, (item: RippleItem) => {
49.           Circle()
50.             .fill(item.color)
51.             .width(item.size)
52.             .height(item.size)
53.             .opacity(item.opacity)
54.             .position({ x: item.x - item.size / 2, y: item.y - item.size / 2 })
55.         })
56.       }
57.       .width('100%')
58.       .height('100%')
59.       .onTouch((event: TouchEvent) => {
60.         // 获取当前触摸点坐标
61.         this.touchX = event.touches[0].x
62.         this.touchY = event.touches[0].y
63.         
64.         // 根据触摸状态处理
65.         switch (event.type) {
66.           case TouchType.Down:
67.             // 开始触摸，立即创建一个波纹
68.             this.isTouching = true
69.             this.createRipple(this.touchX, this.touchY)
70.             
71.             // 启动定时器连续生成波纹
72.             if (this.rippleTimer === -1) {
73.               this.rippleTimer = setInterval(() => {
74.                 if (this.isTouching) {
75.                   // 添加小偏移让效果更自然
76.                   const offsetX = Math.random() * 10 - 5
77.                   const offsetY = Math.random() * 10 - 5
78.                   this.createRipple(this.touchX + offsetX, this.touchY + offsetY)
79.                 }
80.               }, this.rippleInterval)
81.             }
82.             break
83.             
84.           case TouchType.Move:
85.             // 移动时保持触摸状态，波纹会在定时器中根据新坐标创建
86.             this.isTouching = true
87.             break
88.             
89.           case TouchType.Up:
90.           case TouchType.Cancel:
91.             // 触摸结束，停止生成波纹
92.             this.isTouching = false
93.             if (this.rippleTimer !== -1) {
94.               clearInterval(this.rippleTimer)
95.               this.rippleTimer = -1
96.             }
97.             break
98.         }
99.       })
100.     }
101.     .width('100%')
102.     .height('100%')
103.     .backgroundColor('#EDEDED')
104.     .expandSafeArea()
105.   }
107.   // 创建一个新的水波纹
108.   createRipple(x: number, y: number) {
109.     // 创建随机颜色
110.     const colors = ['#2196F3', '#03A9F4', '#00BCD4', '#4CAF50', '#8BC34A']
111.     const color = colors[Math.floor(Math.random() * colors.length)]
113.     // 创建新波纹
114.     const newRipple: RippleItem = {
115.       id: Date.now(),
116.       x: x,
117.       y: y,
118.       size: 0,
119.       maxSize: 300,
120.       opacity: 0.6,
121.       color: color
122.     }
124.     // 添加到波纹数组
125.     this.ripples.push(newRipple)
127.     // 启动波纹动画
128.     this.animateRipple(newRipple)
129.   }
131.   // 动画处理波纹的扩散和消失
132.   animateRipple(ripple: RippleItem) {
133.     let animationStep = 0
134.     const totalSteps = 60
135.     const intervalTime = 16 // 约60fps
136.     const sizeStep = ripple.maxSize / totalSteps
137.     const opacityStep = ripple.opacity / totalSteps
139.     const timer = setInterval(() => {
140.       animationStep++
142.       // 更新波纹状态
143.       const index = this.ripples.findIndex(item => item.id === ripple.id)
144.       if (index !== -1) {
145.         // 增加大小
146.         this.ripples[index].size += sizeStep
147.         // 降低透明度
148.         this.ripples[index].opacity -= opacityStep
150.         // 更新状态触发重绘
151.         this.ripples = [...this.ripples]
153.         // 动画结束，移除波纹
154.         if (animationStep >= totalSteps) {
155.           clearInterval(timer)
156.           this.ripples = this.ripples.filter(item => item.id !== ripple.id)
157.         }
158.       } else {
159.         // 波纹已被其他方式移除
160.         clearInterval(timer)
161.       }
162.     }, intervalTime)
163.   }
164. }

复制代码

总结

通过这个教程，我们学习了如何一步步实现水波纹动画效果：

• ArkUI 搭建基础布局，创建用于展示水波纹的容器
  
• @State 界说水波纹数据布局，计划存储和管理波纹的方式
  
• 实现基本的波纹绘制和触摸事件 onTouch
  
• 创建水波纹生成逻辑，包括随机颜色 Math.random
  
• 使用 setInterval 定时器实现波纹扩散和消失的动画效果
  
• 添加 TouchEvent 触摸跟踪功能，让波纹可以或许跟随手指滑动
  

这个简单而雅观的水波纹效果可以应用在你的应用中的各种交互场景，比方按钮点击、图片查看、页面切换等。通过调整参数，你还可以创造出不同风格的波纹效果。
希望这个教程对你有所帮助，祝你在鸿蒙应用开发中创造出更多出色的交互体验！

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