在鸿蒙应用开发中，如何使用ArkTS实现组件的动画过渡效果？

Question

在鸿蒙应用开发中，如何使用ArkTS实现组件的动画过渡效果？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

Answer 1

在 ArkTS 中可以使用 @animation 装饰器和 Animation 类来实现组件的动画过渡效果。

@Entry
@Component
struct MyComponent {
  @State isVisible: boolean = false;

  build() {
    Column() {
      if (this.isVisible) {
        // 要进行动画的组件
        Text('Hello World!')
         .width(100)
         .height(100)
         .backgroundColor(Color.Red)
         .opacity(1)
         .animation({
            curve: Curve.Linear,
            duration: 1000,
          }, (value: number) => {
            return {
              opacity: value,
            };
          });
      }
    }
    Button('Show/Hide')
     .onClick(() => {
        this.isVisible =!this.isVisible;
      });
  }
}

在这个例子中，当点击按钮时，Text 组件会以线性动画的方式显示或隐藏，通过改变透明度实现过渡效果。
可以根据需要调整动画的曲线、持续时间和动画函数来实现不同的过渡效果。
🔗 参考资料：华为开发者文档中关于动画的部分。
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。