HarmonyOS鸿蒙Next中有类似安卓中AnimatorSet的api吗?
HarmonyOS鸿蒙Next中有类似安卓中AnimatorSet的api吗? 我目前在用属性动画animateTo,但我感觉很局限,一次只能设置一个动画,我需要针对数据加载完成前和完成后设置两个动画集合来管理。
安卓中通过AnimatorSet管理多个动画,可以同时播放多个动画等,鸿蒙中有没有类似的东西?
可以控制动画播放与暂停:
@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本身支持通过组合模式来管理多个动画,主要方式如下:
-
并行动画:使用
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 }; }) -
串行动画:通过多个
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的主要区别
- 声明式语法:HarmonyOS动画更贴近声明式UI编程范式
- 组合方式:通过闭包自然组合,无需显式创建Animator对象
- 性能优化:与ArkUI渲染引擎深度集成,动画性能表现优秀
总结:HarmonyOS Next通过animateTo的闭包组合和AnimationCombinatorAPI,完全可以实现Android AnimatorSet的多动画管理功能,且语法更加简洁直观。

