TransitionEffect动画循环播放如何关闭

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

HarmonyOS
2024-01-31 10:13:48
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zhangxiuyong

参考代码

@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; 
            }); 
          } 
        }) 
      }) 
 
    } 
 
  } 
}
分享
微博
QQ
微信
回复
2024-02-01 17:19:27
相关问题
动画lottie能否设置播放次数
193浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
320浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
125浏览 • 1回复 待解决
Image长按拖动如何关闭
171浏览 • 1回复 待解决
animateTo动画如何直接停止
353浏览 • 1回复 待解决
页面关闭如何传递数据
218浏览 • 1回复 待解决
请问如何去掉ability的转场动画
9377浏览 • 2回复 待解决
ArkTS内可以使用for循环
2113浏览 • 1回复 已解决
求教ArkUI如何实现组合动画
3818浏览 • 1回复 待解决
文字动画效果如何实现
173浏览 • 0回复 待解决
鸿蒙如何实现动画值变化
7689浏览 • 1回复 待解决
鸿蒙开发如何播放本地视频?
7245浏览 • 1回复 待解决
有谁知道如何主动关闭应用
234浏览 • 1回复 待解决