#鸿蒙通关秘籍#如何在HarmonyOS Next中实现按钮的水波纹动画特效？

在HarmonyOS Next中，为按钮添加水波纹动画效果，可以通过叠加多个具有不同缩放比例和透明度的圆形，实现动画的持续效果。以下是具体的代码实现：

@Entry
@Component
struct Demo {
  @State scaleList: number[] = [] 
  @State opacityList: number[] = [] 
  private cloneScaleList: number[] = [] 
  private cloneOpacityList: number[] = [] 
  private scaleRatio: number = 0.3 

  aboutToAppear(): void {
    this.scaleList = new Array(2).fill('').map((item: string, index: number) => 1 + index * this.scaleRatio)
    this.opacityList = new Array(2).fill('').map((item: string, index: number) => 0.3-index*0.15)
    this.cloneScaleList = this.scaleList.slice()
    this.cloneOpacityList = this.opacityList.slice()
  }

  build() {
    Column({ space: 50 }) {
      Stack() {
        ForEach(this.scaleList, (item: number, index: number) => {
          Column() {
          }
          .width(120)
          .height(50)
          .borderRadius(25)
          .backgroundColor('#007DFE')
          .opacity(this.opacityList[index])
          .scale({ x: this.scaleList[index], y: this.scaleList[index] })
          .onAppear(() => {
            animateTo({ duration: 1000, iterations: -1 }, () => {
              this.scaleList[index] = this.cloneScaleList[index] + this.scaleRatio
              this.opacityList[index] = this.cloneOpacityList[index] - 0.15
            })
          })
        }, (item: number, index: number) => index.toString())

        Button('提交', { type: ButtonType.Capsule }).width(120).height(50).borderRadius(25)
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}