HarmonyOS-ArkUI: animateTo 显式动画

原创

已于 2025-07-25 21:36:32 修改 · 929 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ArkUI #ArkTS #华为 #客户端开发

于 2025-04-21 17:51:42 首次发布

什么是显式动画

啊，尽管有点糙，但还是解释一下吧，显式动画里面的“显式”二字，是程序员在代码调用的时候，就三令五申，明明白白调用动画API而创建的动画。这个API的名字就是： animateTo。这就是显式动画。说白了您可以大致理解为，显式动画，就是调用animateTo来完成的动画。

animateTo API概述

animateTo是common文件中的一个方法，其声明为：

declare function animateTo(value: AnimateParam, event: () => void): void;

好，接下来我们梳理一下这个方法！

animateTo用法

animateTo由于是一个common的方法，且其声明中并没有指定要改什么组件，那么它是怎么改动相关组件界面的呢？答案是，通过改动状态变量而联动界面变化。改动位置就是animateTo的第二个参数。

declare function animateTo(value: AnimateParam, event: () => void): void;

这个函数里面的event参数。代表的是一套动画最终的值要变成的样子。哪个组件和这个值有关联，哪个组件的界面就会变。

如下文中的案例：

@Entry
@Component
struct AnimateToTest1 {
  @State widthSize:number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true
  build() {
    Column() {
      Button('Change Size')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(()=>{
          if (this.flag) {
            this.getUIContext().animateTo({
              duration: 200, //2000毫秒
              curve: Curve.EaseOut, //快速开始,逐渐减速到终点
              iterations: 1, //重复1次
              playMode: PlayMode.Normal, //正常播放从头到尾
              onFinish:()=>{
                console.log('play end')
              }
            },()=>{
              this.widthSize = 150