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

HarmonyNext动画大全03-帧动画

news 2025/7/29 10:03:59

HarmonyNext动画大全03-帧动画

介绍

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

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

帧动画示例

酷狗音乐

基本使用

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

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

1. 引入帧动画

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

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

2. 创建帧动画

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

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

帧动画参数

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

名称	类型	说明
`duration`	`number`	动画播放的时长，单位毫秒
easing	`string`	速度曲线
`delay`	`number`	延迟时间
fill	“none” \| “forwards” \| “backwards” \| “both”	动画播放之外的状态
`direction`	“normal” \| “reverse” \| “alternate” \| “alternate-reverse”	动画播放方向
`iterations`	`number`	动画播放次数。设置为0时不播放，设置为-1时无限次播放。说明: 设置为除-1外其他负数视为无效取值，无效取值动画默认播放1次。
begin	`number`	动画插值起点。默认值:0。
end	`number`	动画插值终点。默认值:1。

duration 动画播放时长，单位毫秒

easing 速度曲线，可以使用以下的值

linear  线性 动画速度保持不变。
ease  缓入缓出 动画开始和结束时速度较低
ease-in 缓入 动画开始时速度较低
ease-out 缓出 动画结束时速度较低
ease-in-out 缓入缓出 动画开始和结束时速度较低
fast-out-slow-in 快出慢入 标准曲线
linear-out-slow-in 线性出慢入 减速曲线
fast-out-linear-in 快出线性入 加速曲线

delay 延迟时间单位毫秒

fill 动画播放之外的状态

none 正常
forwards 动画执行完毕时，画面停留在最后一帧
backwards 在延迟等待时间呢，画面跳转到第一帧，也就是 begin的值
both 等于同时设置了 forwards 和 backwards

direction 动画播放方向如当重复执行4次动画时，动画的方向可以设置为 alternate
1. A-B
2. B-A
3. A-B
4. 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，便可以实现动画效果了

  @Stateangle: number = 0// 3 页面开始加载的时候自动触发 aboutToAppearaboutToAppear() {//   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
@Component
struct Index {@Stateangle: number = 0// 2 创建帧动画对象animator: AnimatorResult = Animator.create({//   持续时间duration: 10000,//   延迟时间delay: 0,//   动画曲线easing: "linear",//   播放次数iterations: -1,//   播放模式 播放之外的状态fill: "none",//   播放方向direction: "normal",// 开始角度begin: 0,// 结束角度end: 360})// 3 页面开始加载的时候自动触发 aboutToAppearaboutToAppear() {//   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)}
}