数字按键点击动画，点击按键和离开时都会出现动画效果提示用户按压位置和效果

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

@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) 
} 
}

//状态变量unPressed，用于监听按钮按下和放开的状态 
@State unPressed: boolean = true  
... 
// 添加onTouch事件，监听状态 
.onTouch((event: TouchEvent) => { 
 // 当按钮按下时，更新按钮的状态（unPressed：true -> false） 
 if (event.type == TouchType.Down) { 
   animateTo({ duration: 400 }, () => { 
     this.unPressed = !this.unPressed 
     this.currIndex = this.index 
  }) 
} 
 // 当按钮放开时，更新按钮的状态（unPressed：false -> true） 
 if (event.type == TouchType.Up) { 
   animateTo({ duration: 400 }, () => { 
     this.unPressed = !this.unPressed 
  }) 
} 
})

Stack() { 
 Row() { 
   // 判断当前按钮组件为放开状态 
   if (this.unPressed && this.currIndex == this.index) { 
     // 插入Row组件，配置过渡效果 
     Row() 
      .customStyle() 
      .backgroundColor('#fff') 
         // 水波纹扩散动画：从Row组件的中心点开始放大，scale{0,0}变更scale{1,1}（完整显示） 
      .transition({ 
         type: TransitionType.Insert, 
         opacity: 0, 
         scale: { x: 0, y: 0, centerY: '50%', centerX: '50%' } 
      }) 
  } 
   // 判断当前按钮组件为按下状态 
   else if (!this.unPressed && this.currIndex == this.index) { 
     // 插入Row组件，配置过渡效果 
     Row() 
      .customStyle() 
      .backgroundColor(this.btnColor) 
      .scale(this.btnScale) 
      .onAppear(() => { 
         // 水波纹聚拢动画：Row组件backgroundColor属性变更（#ccc -> #fff），插入动画过渡效果，scale{1,1}（完整显示）变化为scale{0,0}  
         animateTo({ duration: 300, 
           // 聚拢动画播放完成后，需要衔接扩散动画，Row组件backgroundColor属性变更（#fff -> #ccc），插入动画过渡效果，scale{0,0}变化为scale{1,1}（完整显示） 
           onFinish: () => { 
             this.btnColor = '#ccc' 
             this.btnScale = { x: 1, y: 1 } 
          } }, 
          () => { 
             this.btnColor = '#fff' 
             this.btnScale = { x: 0, y: 0 } 
          }) 
      }) 
  } 
   // 其他状态 
   else { 
     Row() 
      .customStyle() 
      .backgroundColor('#fff') 
  } 
} 
.justifyContent(FlexAlign.Center) 
.alignItems(VerticalAlign.Center) 
.borderRadius(100) 
 Text(`${this.item}`).fontSize(30) 
} 
.customStyle()