HarmonyOS animateTo的duration无效

使用animateTo修改Circle的value，但是动画时间感觉一直都是1秒，设置了duration也没有用

@Entry
@Component
export struct Index3 {
  @State countDownProgress: number = 0;

  build() {
    Column() {

      Button('动画')
        .onClick(() => {
          animateTo( {
            duration: 16000,
          },() => {
            this.countDownProgress = 1;
          })
        })
      Progress({
        value: this.countDownProgress,
        total: 1,
        type: ProgressType.Ring
      })
        .width(60)
        .height(60)
        .color(Color.Blue)
        .style({
          strokeWidth: 2,
        })
    }
  }
}

HarmonyOS

Heiang

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

animateTo动画中duration最长动画时间就是1S，超过1000系统默认为1000，以下有一个实现进度条动画demo，可参考以下：

@Entry
@Component
export struct ReverseProgress {
  @State progressValue: number = 100
  @State animationId: number | null = null
  build() {
    NavDestination() {
      Column({ space: 15 }) {
        Progress({ value: 0, total: 100, type: ProgressType.Ring })
          .color('#A97CF9')
          .value(this.progressValue)
          .width(100)
          .style({
            strokeWidth: 10,
            scaleCount: 20,
            scaleWidth: 5,
            enableSmoothEffect: true
          })
          .backgroundColor(Color.White)
          .rotate({
            x: 0,
            y: 1,
            z: 0,
            centerX: '50%',
            centerY: '50%',
            angle: 180
          })
        Button('开始动画')
          .onClick(() => {
            if (this.animationId === null) {
              this.animationId = setInterval(() => {
                this.progressValue--
                if (this.progressValue == 0) {
                  this.progressValue = 100
                }
              }, 10)
            }
            console.log(this.animationId.toString())
          })
        Button('结束动画').onClick(() => {
          clearInterval(this.animationId)
          this.animationId = null
          this.progressValue = 100
        })
      }.width('100%').padding({ top: 5 }).backgroundColor(Color.Red)
    }

  }
}

2天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS animateTo的duration无效

订阅鸿蒙技术特刊，精选内容抢先看