OpenHarmony实战开发-如何实现水波纹动效的效果

场景介绍

在日常应用场景中，水波纹的效果比较常见，例如数字键盘按键效果、听歌识曲、附近搜索雷达动效等等，本文就以数字按键为例介绍水波纹动效的实现。

效果呈现

本例最终效果图如下：

环境要求

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1 Beta2
• SDK: Ohos_sdk_public 3.2.11.9(APIVersion 9 Release)

实现思路

本实例涉及到的主要特性及其实现方案如下：

• UI框架：使用Grid，GridItem等容器组件组建UI框架。
• 按钮渲染：通过自定义numBtn组件（含Column、Button、Stack、Text等关键组件以及visibility属性），进行数字按钮的渲染。
• 按钮状态变化：设置状态变量unPressed，控制按钮的当前状态，向Column组件添加onTouch事件，监听按钮的当前状态。
• 默认状态为按钮放开状态（unPressed为true）。
• 当按钮按下时，更新按钮的状态（unPressed：true -> false）。
• 当按钮放开时，更新按钮的状态（unPressed：false -> true）。
• 按钮动画展示：使用属性动画以及组件内转场动画绘制按钮不同状态下的动画。
• 当按钮按下时，使用显式动画（animateTo）加载动画：插入按下时的Row组件，同时加载水波的聚拢效果。
• 当按钮放开时，使用组件内转场加载动画：插入放开时的Row组件，同时加载水波的扩散效果。

开发步骤

针对实现思路中所提到的内容，具体关键开发步骤如下：

1.先通过Grid，GridItem等容器组件将UI框架搭建起来，在GuidItem中引用步骤2中的自定义数字按钮numBtn构建出数字栅格。

具体代码如下:

private numGrid: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -1] 
  ...
    Column() {
   
      Grid() {
   
        ForEach(this.numGrid, (item: number, index: number) => {
   
          GridItem() {
   
            ...
          }
        }, item => item)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width(330)
      .height(440)
    }.width('100%').height('100%')

2.通过Column、Button、Stack、Text等关键组件以及visibility属性构建自定义数字按钮numBtn。

具体代码如下：

@Component
struct numBtn {
   
  ···
  build() {
   
    Column() {
   
        Button() {
   
            stack(){
   
                ...
                Text(`${
    this.item}`).fontSize(30)
            }
            ...
        }
        .backgroundColor('#ccc') 
        .type(ButtonType.Circle)
        .borderRadius(100)
        .width(100)
        .height(100)   
    }
    .visibility(this.item == -1 ? Visibility.Hidden : Visibility.Visible)
    .borderRadius(100)
  }
}

3.设置状态变量unPressed，监听当前数字按钮的状态，同时向Column组件添加onTouch事件，获取并更新按钮的当前状态，从而可以根据监听到的按钮状态加载对应的动画效果。

具体代码块如下:

//状态变量unP