HarmonyOS Next 动画大全 03- 帧动画

作者：万少

2024-12-15
江苏
本文字数：1815 字
阅读完需：约 6 分钟

HarmonyOS Next 动画大全 03-帧动画

介绍

帧动画Animator和属性动画animation、显式动画animateTo的区别在于帧动画是通过返回应用onFrame逐帧回调的方式，让开发者在

应用侧的每一帧都可以设置属性值，从而实现设置了该属性值对应组件的动画效果。并且可以轻松的控制动画的播放、暂停等状态。这让它提供了更加强大的动画控制能力

帧动画示例

酷狗音乐

基本使用

最基本的使用步骤分为 4 步：

引入帧动画
创建帧动画
监听帧动画的帧变化事件 -> 设置动画
开始播放

1. 引入帧动画

import { Animator, AnimatorResult } from "@kit.ArkUI";

复制代码

Animator 是用来创建帧动画对象的
AnimatorResult 表示帧动画对象的类型

2. 创建帧动画

@Entry@Componentstruct Index {  // 2 创建帧动画对象  需要传入动画参数  animator:AnimatorResult=Animator.create({})  build() {
  }}

复制代码

其中，在创建帧动画对象的时候，必须要传入动画参数 AnimatorOptions

帧动画参数

以下动画参数绝大部分都和之前讲过的属性动画和显式动画类似，可以返回前两篇动画文章

duration 动画播放时长，单位毫秒
easing 速度曲线，可以使用以下的值
delay 延迟时间单位毫秒
fill 动画播放之外的状态
direction 动画播放方向如当重复执行 4 次动画时，动画的方向可以设置为 alternate
A-B
B-A
A-B
B-A
iterations 动画执行次数，-1 为无限
begin 表示动画开始的数值
end 表示动画结束的数值

示例代码:

// 2 创建帧动画对象animator: AnimatorResult = Animator.create({  //   持续时间  duration: 10000,  //   延迟时间  delay: 0,  //   动画曲线  easing: "linear",  //   播放次数  iterations: -1,  //   播放模式 播放之外的状态  fill: "none",  //   播放方向  direction: "normal",  // 开始角度  begin: 0,  // 结束角度  end: 360,});

复制代码

3. 监听帧变化事件

通过给帧动画对象注册 onFrame 事件实现监听 begin -> end 的数值变化，再将这个数值变化设置给我们的 State，便可以实现动画效果了

  @State  angle: number = 0
    // 3 页面开始加载的时候自动触发 aboutToAppear  aboutToAppear() {    //   3 监听帧变化事件    this.animator.onFrame = (value) => {      this.angle = value    }  }

复制代码

不要忘记了让你的组件使用上这个变化的状态 angle

  build() {    Column({ space: 40 }) {      Text("变化的动画")        .width(100)        .height(100)        .backgroundColor("#0094ff")        .rotate({          angle: this.angle        })
      Button("开始动画")        .onClick(() => {          // 开始动画
        })    }    .width("100%")    .height("100%")    .padding(20)  }

复制代码

4. 开始动画

Button("开始动画").onClick(() => {  this.animator.play();});

复制代码

最后，我们查看效果

完整代码

// 1 引入import { Animator, AnimatorResult } from '@kit.ArkUI';
@Entry@Componentstruct Index {  @State  angle: number = 0  // 2 创建帧动画对象  animator: AnimatorResult = Animator.create({    //   持续时间    duration: 10000,    //   延迟时间    delay: 0,    //   动画曲线    easing: "linear",    //   播放次数    iterations: -1,    //   播放模式 播放之外的状态    fill: "none",    //   播放方向    direction: "normal",    // 开始角度    begin: 0,    // 结束角度    end: 360  })
  // 3 页面开始加载的时候自动触发 aboutToAppear  aboutToAppear() {    //   3 监听帧变化事件    this.animator.onFrame = (value) => {      this.angle = value    }  }
  build() {    Column({ space: 40 }) {      Text("变化的动画")        .width(100)        .height(100)        .backgroundColor("#0094ff")        .rotate({          angle: this.angle        })

      Button("开始动画")        .onClick(() => {          this.animator.play()        })    }    .width("100%")    .height("100%")    .padding(20)  }}

复制代码

其他的方法

帧对象的其他方法

reset 重置动画器
play 播放动画
finish 完成动画播放相当于设置动画到了 end 的数值的状态
pause 暂停动画
cancel 取消动画
reverse 以相反的顺序播放动画

其他事件

onFrame 帧变化事件
onFinish 动画完成事件
onCancel 动画取消事件
onRepeat 动画重复执行时触发的事件

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/4518a7da3c6d8fe191fa5c30c】。文章转载请联系作者。

万少

关注

还未添加个人签名 2021-12-02 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS Next 动画大全 03- 帧动画

HarmonyOS Next 动画大全 03-帧动画

介绍

帧动画示例

酷狗音乐

基本使用

1. 引入帧动画

2. 创建帧动画

帧动画参数

3. 监听帧变化事件

4. 开始动画

完整代码

其他的方法

其他事件

万少

评论