TransitionEffect动画循环播放如何关闭?

Question

在自定义方格验证码场景，自定义光标动画创建完以后无法关闭导致同个方框上多个动画执行，影响性能和体验，这个优化需要如何处理呢？尝试过设置iterations为0的情况，会导致出现其他问题

Answer 1

参考代码

@Entry 
@Component 
export struct SmsPasswordNumberComponent { 
  @State list: Array<string> = ['a', 'b', 'c']; 
  @State myOpacity: number[] = [0, 0, 0]; 
  @State focusIndex: number = 0; 
 
  build() { 
    Row() { 
 
      ForEach(this.list, (item: string, index: number) => { 
        Stack() { 
          Text(item) 
            .fontColor('#181818') 
            .fontSize(30) 
            .fontWeight(FontWeight.Bold) 
            .fontFamily('dipro_medium') 
 
          Divider() 
            .width(1) 
            .backgroundColor('#006AE9') 
            .height(20) 
            .opacity(this.myOpacity[index]) 
            .onAppear(() => { 
              animateTo({ iterations: -1, curve: Curve.Linear }, () => { 
                this.myOpacity[index] = 1; 
              }); 
            }) 
        } 
        .border({ 
          width: 1, 
          color: '#006AE9', 
          radius: 4 
        }) 
        .backgroundColor('#F2F2F2') 
        .alignContent(Alignment.Center) 
        .width(38) 
        .height(52) 
        .margin({ right: index == 2 ? 30 : 10 }) 
        .onClick(() => { 
          this.focusIndex = index; 
          if (this.myOpacity[index] == 1) { 
            // 奇数次点击停掉动画 
            animateTo({ duration: 0 }, () => { 
              // 在duration为0的动画闭包中，改变属性值，停止该属性的动画 
              this.myOpacity[index] = 0; 
            }); 
          } else { 
            // 偶数次点击开启动画 
            animateTo({ iterations: -1, curve: Curve.Linear }, () => { 
              this.myOpacity[index] = 1; 
            }); 
          } 
        }) 
      }) 
 
    } 
 
  } 
}