【鸿蒙实战开发】水波纹动画开发（ArkUI）实现

场景介绍

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

效果呈现

本例最终效果图如下：

环境要求

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

• IDE: DevEco Studio 3.1 Beta2
• SDK: Ohos_sdk_public 3.2.11.9(API Version 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%