HarmonyNext动画大全03-帧动画
介绍
帧动画Animator
和属性动画animation
、显式动画animateTo
的区别在于帧动画是通过返回应用onFrame
逐帧回调的方式,让开发者在
应用侧的每一帧都可以设置属性值,从而实现设置了该属性值对应组件的动画效果。并且可以轻松的控制动画的播放、暂停等状态。这让它提供了更加强大的动画控制能力
帧动画示例
酷狗音乐
基本使用
最基本的使用步骤分为4步:
1. 引入帧动画
import { Animator,AnimatorResult } from '@kit.ArkUI';
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
- 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,便可以实现动画效果了
@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)}
}
其他的方法
帧对象的其他方法