如何在 Progress 组件中实现动画效果？

Question

我想让 Progress 组件在加载的时候有一个平滑的动画效果，看起来更加流畅。但是不太确定如何为 Progress 添加动画，有没有实现过类似效果的朋友可以指点一下？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以使用定时器方法逐渐增加 Progress 的值，来实现一种动画效果，让进度条看起来更加平滑和流畅。

代码示例：

export default {
  data: {
    progressValue: 0
  },
  onInit() {
    let timer = setInterval(() => {
      if (this.progressValue < 100) {
        this.progressValue += 2; // 每次增加2
      } else {
        clearInterval(timer);
      }
    }, 50); // 每隔50ms更新一次
  }
}

<Progress value="{{progressValue}}" style="width: 400px; height: 20px; transition: all 0.5s ease;"></Progress>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。