HarmonyOS鸿蒙Next中有类似安卓中AnimatorSet的api吗?

HarmonyOS鸿蒙Next中有类似安卓中AnimatorSet的api吗? 我目前在用属性动画animateTo,但我感觉很局限,一次只能设置一个动画,我需要针对数据加载完成前和完成后设置两个动画集合来管理。

安卓中通过AnimatorSet管理多个动画,可以同时播放多个动画等,鸿蒙中有没有类似的东西?

13 回复

可以控制动画播放与暂停:

@Entry
@Component
struct Page {
  @State angleOne: number = 0
  @State angleTwo: number = 0
  @State displaying: boolean = false
  timerOne: number | null = null
  timerTwo: number | null = null
  duration: number = 400
  uiContext: UIContext | undefined = undefined;

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

  build() {
    Column({ space: 20 }) {
      Text('动画A:')
      Image($r('app.media.startIcon'))
        .width(200)
        .height(200)
        .borderRadius(100)
        .backgroundColor(Color.Blue)
        .rotate({ angle: this.angleOne })
      Text('动画B:')
      Image($r('app.media.startIcon'))
        .width(200)
        .height(200)
        .borderRadius(100)
        .backgroundColor(Color.Blue)
        .rotate({ angle: this.angleTwo })

      Button('播放A,暂停B')
        .fontColor(Color.Black)
        .backgroundColor(Color.Yellow)
        .onClick(() => {
          clearInterval(this.timerTwo)
          this.timerOne = setInterval(() => {
            this.uiContext?.animateTo({
              duration: this.duration,
              iterations: 1,
              curve: Curve.Linear
            }, () => {
              if (this.angleOne === 360) {
                this.angleOne = 0
              }
              this.angleOne += 50
            })
          }, this.duration)
        })


      Button('播放B,暂停A')
        .fontColor(Color.Black)
        .backgroundColor(Color.Yellow)
        .onClick(() => {
          clearInterval(this.timerOne)
          this.timerTwo = setInterval(() => {
            this.uiContext?.animateTo({
              duration: this.duration,
              iterations: 1,
              curve: Curve.Linear
            }, () => {
              if (this.angleTwo === 360) {
                this.angleTwo = 0
              }
              this.angleTwo += 50
            })
          }, this.duration)
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中有类似安卓中AnimatorSet的api吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


72.关键帧动画 (keyframeAnimateTo)

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/ts-keyframeanimateto-V14

UIContext中提供keyframeAnimateTo接口来指定若干个关键帧状态,实现分段的动画。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态,例如文字、Canvas的内容等,如果要内容跟随宽高变化,可以使用renderFit属性配置

// xxx.ets
import { UIContext } from '@kit.ArkUI';

@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 })
        .onClick(() => {
          if (!this.uiContext) {
            console.info("no uiContext, keyframe failed");
            return;
          }
          this.myScale = 1;
          // 设置关键帧动画整体播放3次
          this.uiContext.keyframeAnimateTo({
            delay: -1500, //动画延迟播放时间,单位为ms(毫秒),默认不延时播放。默认值:0 (-∞, +∞)
            iterations: 10, //动画播放次数。默认播放一次, 设置-1表示动画无限循环 设置为0时表示无动画效果 默认值:1 取值范围:[-1, +∞) 小于-1只执行一次 输入小数向下取整
            onFinish: () => { //动画播放完成回调。UIAbility从前台切换至后台时会立即结束仍在步进中的有限循环动画,触发播放完成回调。
              console.log("animation:", "动画播放结束!")
            }
          }, [
            {
              // 第一段关键帧动画时长为800ms,scale属性做从1到1.5的动画
              duration: 800,
              curve: Curve.Linear, //表示动画从头到尾的速度都是相同的。
              // curve: Curve.Ease  ,//表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25, 0.1, 0.25, 1.0)。
              // curve: Curve.EaseIn  ,//表示动画以低速开始,cubic-bezier(0.42, 0.0, 1.0, 1.0)。
              // curve: Curve.EaseOut ,//表示动画以低速结束,cubic-bezier(0.0, 0.0, 0.58, 1.0)。
              // curve: Curve.EaseInOut ,//表示动画以低速开始和结束,cubic-bezier(0.42, 0.0, 0.58, 1.0)。
              // curve: Curve.FastOutSlowIn ,//标准曲线,cubic-bezier(0.4, 0.0, 0.2, 1.0)。
              // curve: Curve.LinearOutSlowIn ,//减速曲线,cubic-bezier(0.0, 0.0, 0.2, 1.0)。
              // curve: Curve.FastOutLinearIn ,//加速曲线,cubic-bezier(0.4, 0.0, 1.0, 1.0)。
              // curve: Curve.ExtremeDeceleration ,//急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
              // curve: Curve.Sharp ,//锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
              // curve: Curve.Rhythm  ,//节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
              // curve: Curve.Smooth  ,//平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
              // curve: Curve.Friction  ,//阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。
              event: () => {
                this.myScale = 1.5;
              }
            },
            {
              // 第二段关键帧动画时长为500ms,scale属性做从1.5到1的动画
              duration: 500,
              event: () => {
                this.myScale = 1;
              }
            }
          ]);
        })
    }.width('100%').margin({ top: 5 })
  }
}

可以通过 Animator 动画系统 实现多动画协同控制

Animator 动画系统(底层驱动)

通过 @kit.ArkUI.animator 模块实现精细化控制,支持多动画组合:

import animator from '[@kit](/user/kit).ArkUI.animator';

// 创建两个属性动画
const scaleAnim = new animator.Animator({
  duration: 1000,
  curve: animator.Curve.EaseInOut,
  onUpdate: (value) => { this.scale = value; }
});

const rotateAnim = new animator.Animator({
  duration: 800,
  curve: animator.Curve.Linear,
  onUpdate: (value) => { this.rotateAngle = value; }
});

// 组合动画(并行执行)
const animatorSet = new animator.AnimationGroup({
  animations: [scaleAnim, rotateAnim],
  playMode: animator.PlayMode.NORMAL  // 支持顺序或并行模式
});

// 启动动画
animatorSet.start();

你这是arkts代码吗?我放进文件里全是错误,import都显示找不到@kit.ArkUI.animator这个module,我看Animator的文档,既没有你这种写法,也没有AnimationGroup这个Api,https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-animator#animator

官网目前没有类似AnimatorSet方法,可以使用关键帧动画呢,关键帧动画 (keyframeAnimateTo)

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

用combie动画?

有group

我搜了半天,没搜到关于AnimatorGroup的Api文档,在百度搜都是什么Java UI框架,请问这是什么东西?,

官网的确没有类似AnimatorSet方法,使用关键帧动画呢:关键帧动画 (keyframeAnimateTo):https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-keyframeanimateto

HarmonyOS Next中提供ArkUI动画框架,可通过animateTo方法实现属性动画,支持顺序执行多个动画效果。对于复杂动画序列,可使用KeyframeAnimate定义关键帧动画,或组合多个动画组件实现类似AnimatorSet的协同控制。

在HarmonyOS Next中,确实提供了类似Android AnimatorSet的功能,用于管理多个动画的协同播放。你可以使用动画组合(Animation Combinator) 来实现。

核心API:animateTo + 并行/串行组合

HarmonyOS的animateTo本身支持通过组合模式来管理多个动画,主要方式如下:

  1. 并行动画:使用animateTo同时执行多个属性动画。

    animateTo({
      duration: 1000,
      onFinish: () => {
        // 动画完成回调
      }
    }, () => {
      // 在此闭包内同时修改多个组件的属性,它们会并行执行动画
      this.myComponent1.width = 200;
      this.myComponent2.opacity = 0.5;
      this.myComponent3.rotate = { x: 0, y: 0, z: 1, angle: 360 };
    })
    
  2. 串行动画:通过多个animateTo嵌套或使用Promise链实现。

    // 使用嵌套
    animateTo({ duration: 500 }, () => {
      this.myComponent.width = 200;
    }, () => {
      animateTo({ duration: 500 }, () => {
        this.myComponent.height = 400;
      })
    })
    

更精细的控制:AnimationCombinator

对于需要精确控制多个动画序列(如同时播放、顺序播放、设置独立参数)的场景,可以使用AnimationCombinator

import { AnimationCombinator } from '@kit.ArkUI';

// 创建动画组合
const combinator = new AnimationCombinator();

// 添加多个动画任务
combinator.addAnimation({
  duration: 1000,
  curve: Curve.EaseInOut,
  onFinish: () => { /* 动画1完成 */ }
}, () => {
  this.component1.width = 200;
});

combinator.addAnimation({
  duration: 800,
  delay: 200, // 延迟200ms启动
  onFinish: () => { /* 动画2完成 */ }
}, () => {
  this.component2.opacity = 0;
});

// 执行动画组合
combinator.run(); // 所有动画按添加顺序执行(可配置并行)

针对数据加载场景的建议

对于你提到的数据加载前后动画管理,可以这样组织:

// 加载前动画集合
private playLoadingAnimations(): void {
  animateTo({ duration: 300 }, () => {
    // 同时执行:骨架屏透明度、加载旋转等
    this.skeletonOpacity = 1;
    this.loader.rotate = { x: 0, y: 0, z: 1, angle: 180 };
  });
}

// 加载完成动画集合
private playContentAnimations(): void {
  // 先隐藏骨架屏,再显示内容
  animateTo({ duration: 200 }, () => {
    this.skeletonOpacity = 0;
  }, () => {
    animateTo({ duration: 400, curve: Curve.Spring }, () => {
      this.contentOpacity = 1;
      this.content.translate = { x: 0, y: 0 };
    });
  });
}

与Android AnimatorSet的主要区别

  1. 声明式语法:HarmonyOS动画更贴近声明式UI编程范式
  2. 组合方式:通过闭包自然组合,无需显式创建Animator对象
  3. 性能优化:与ArkUI渲染引擎深度集成,动画性能表现优秀

总结:HarmonyOS Next通过animateTo的闭包组合和AnimationCombinatorAPI,完全可以实现Android AnimatorSet的多动画管理功能,且语法更加简洁直观。

回到顶部