HarmonyOS NEXT的动画效果如何实现？

Question

HarmonyOS NEXT的动画效果如何实现？

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

Answer 1

在 HarmonyOS NEXT 中可以通过多种方式实现动画效果。例如使用关键帧动画，可以使用keyframeAnimateTo方法，参考代码如下：

import { UIContext } from '@ohos.ArkUI.UIContext';

@Entry
@Component
struct Index {
  @State myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;

  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }

  build() {
    Column() {
      Circle()
       .width(100)
       .height(100)
       .fill("#46B1E3")
       .margin(100)
       .scale({ x: this.myScale, y: this.myScale })//设置 x 轴/y 轴的缩放
       .onClick(() => {
          if (!this.uiContext) {
            console.info("no uiContext, keyframe failed");
            return;
          }
          this.myScale = 1;
          // 设置关键帧动画整体播放 3 次
          this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
            {
              // 第一段关键帧动画时长为 800ms，scale 属性做从 1 到 1.5 的动画
              duration: 800,
              event: () => {
                this.myScale = 1.5;
              }
            }
          ]);
        });
    }
  }
}

还可以通过自定义动画、用@ohos.animator实现、使用LoadingProgress组件等方式来实现动画效果。另外，日历的左右滑动手势等动画效果结合手势可以参考官网文档中拖动手势的使用：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere... 和官网文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...。

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