HarmonyOS 帧动画 animator

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

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

基础使用

• 创建帧动画 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 = 0

  aboutToAppear(): 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 = 0
        this.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%')
    }
  }
}

示例代码3：图片帧动画

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-imageanimator#示例1播放resource动画

https://www.jq22.com/yanshi24013

https://www.jq22.com/demo/imgAni202108230153/img/611e2b5c8fcd2.png

鸿蒙开发者班级