HarmonyOS鸿蒙Next中askTs的progress组件的值改变时如何设置过度动画

HarmonyOS鸿蒙Next中askTs的progress组件的值改变时如何设置过度动画 如题，progress能否设置过度动画？

6 回复

请问怎么解决这个问题的

更多关于HarmonyOS鸿蒙Next中askTs的progress组件的值改变时如何设置过度动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主您好，参考显示动画文档：

显式动画-动画-组件参考（基于ArkTS的声明式开发范式）-手机、平板、智慧屏和智能穿戴开发-ArkTS API参考-HarmonyOS应用开发

这个对于progress值变化似乎没有效果：我在把progress的类型设置为ring，希望值变化的时候，进度条会动态变化到相应的值上，用animateTo来设置值也没有效果。是不是进度条动画需要自己用canvas或者绘制组件去实现？

你需要找到进度变化对应的属性值，然后在animateTo中改变它，就可以完成动画效果。

我试过了，都进度条就是直接跳到6的，没有动画过度的效果，

在HarmonyOS鸿蒙Next中，可以通过animation属性为progress组件设置值改变时的过渡动画。首先，定义keyframes动画描述进度条的变化过程，然后在progress组件的animation属性中引用该动画，并设置动画的持续时间、延迟等参数。例如：

let animation = animation.create({
  keyframes: [
    { from: 0, to: 1 }
  ],
  duration: 1000,
  easing: 'ease-in-out'
});

progress.animation(animation);

通过这种方式，当progress组件的值改变时，将自动应用定义的过渡动画。

回到顶部