如何实现在特定条件下的持续动画？

Question

如何实现在特定条件下的持续动画如在网络请求回来之间动画不停止，当网络请求成功后停止动画

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

可以设置一个变量，当网络请求回来后修改变量值，通过变量控制东海的值是否改变来实现停止动画效果