当前位置：首页 > news >正文

HarmonyOS 帧动画 animator

news 2026/6/14 16:45:09

就是类似播放电影一样，一帧一帧的进行播放，相对于属性动画，其每一帧，我们都可以进行设置相关的属性值，并且具有暂停播放，继续播放的优点，而且还具备事件的实时响应，需要说明的是，在性能上是远远不如属性动画的，所以如果能用属性动画实现的场景，还是主推属性动画

需要控制动画播放暂停：音乐播放、或者运动小车
翻页动画

基础使用

创建帧动画 this.animator = Animator.create()
每一帧回调 this.animator.onFrame=fn
控制 this.animator.play/pause()

示例代码1

import { Animator, AnimatorResult } from '@kit.ArkUI'@Entry
@Component
struct Index {// 1. 创建帧动画@State animator:AnimatorResult  = Animator.create({duration: 3000, //动画播放的时长delay: 0, //动画延时播放时长easing: 'linear', //动画插值曲线iterations: 1, //动画播放次数fill: "forwards", //动画执行后是否恢复到初始状态direction: 'normal', //动画播放模式begin: 0, //动画插值起点end: 100//动画插值终点})@State translateX: number = 0@State translateY: number = 0aboutToAppear(): void {// 2.每一帧回调this.animator.onFrame = (progress: number) => {this.translateX = progress}}build() {Column({space:20}) {Text("1").width(30).height(30).backgroundColor(Color.Red).textAlign(TextAlign.Center).margin({ top: 100 }).translate({ x: this.translateX, y: this.translateY })Button("播放").onClick(() => this.animator.play() )Button("暂停").onClick(() =>  this.animator.pause() )Button("重置").onClick(() => {this.translateX = 0this.translateY = 0})}.height('100%').width('100%')}
}

示例代码2：实战音乐播放器

import { Animator, AnimatorResult } from '@kit.ArkUI';@Entry
@Component
struct Index {@State angle: number = 0// 1 创建帧动画对象private animator: AnimatorResult = Animator.create({duration: 10000,  //   持续时间delay: 0,         //   延迟时间easing: "linear", //   动画曲线iterations: -1,   //   播放次数fill: "none",     //   播放模式 播放之外的状态direction: "normal", //   播放方向begin: 0,   // 开始角度end: 360 // 结束角度})aboutToAppear() {//   2 监听帧变化事件this.animator.onFrame = (value) => {this.angle = value}}build() {Column() {Button('开始').onClick((event: ClickEvent) => {this.animator.play()})Button('暂停').onClick((event: ClickEvent) => {this.animator.pause()})Stack() {Image("https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/28513831157/e8e9/beeb/912c/468bcb523668065ccf6f853c4a084e31.png").width(300).height(300)Image("https://p1.music.126.net/MX4wNwR9eJNvx_Y5AKBEFw==/109951169909770184.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0").width(200).height(200).borderRadius(200).rotate({angle: this.angle})}.backgroundColor(Color.Gray).width('100%').height('100%')}}
}