动画


动画

icon-note.gif 说明: 本模块首批接口从API version 6开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

导入模块

import animator from '@ohos.animator';
1

createAnimator

createAnimator(options: AnimatorOptions): AnimatorResult

定义Animator类。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
options AnimatorOptions 定义动画选项,详细请参考AnimatorOptions。

返回值:

类型 说明
AnimatorResult Animator结果接口。

示例:

<!-- hml -->
<div class="container">
  <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
  </div>
</div>
1
2
3
4
5
// js
export default {
  data : {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    var options = {
      duration: 1500,
      easing: 'friction',
      fill: 'forwards',
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.createAnimator(options);
  },
  Show() {
    var options1 = {
      duration: 2000,
      easing: 'friction',
      fill: 'forwards',
      iterations: 1,
      begin: 200.0,
      end: 400.0
    };
    this.animator.update(options1);
    var _this = this;
    this.animator.onframe = function(value) {
      _this.divWidth = value;
      _this.divHeight = value;
    };
    this.animator.play();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

AnimatorResult

定义Animator结果接口。

update

update(options: AnimatorOptions): void

更新当前动画器。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
options AnimatorOptions 定义动画选项。

示例:

animator.update(options);
1

play

play(): void

启动动画。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.play();
1

finish

finish(): void

结束动画。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.finish();
1

pause

pause(): void

暂停动画。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.pause();
1

cancel

cancel(): void

删除动画。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.cancel();
1

reverse

reverse(): void

以相反的顺序播放动画。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.reverse();
1

onframe

onframe: (progress: number) => void

回调时触发。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
progress number 动画的当前进度。

示例:

animator.onframe();
1

onfinish

onfinish: () => void

动画完成。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.onfinish();
1

oncancel

oncancel: () => void

动画被取消。

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.oncancel();
1

onrepeat

onrepeat: () => void

系统能力: SystemCapability.ArkUI.ArkUI.Full

示例:

animator.onrepeat();
1

动画将重复。

AnimatorOptions

定义动画选项。

系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full

名称 参数类型 必填 说明
duration number 动画播放的时长,单位毫秒,默认为0。
easing string 动画插值曲线,默认为ease'。
delay number 动画延时播放时长,单位毫秒,默认为0,即不延时。
fill "none" | "forwards" | "backwards" | "both" 动画执行后是否恢复到初始状态,默认值为"none"。动画执行后,动画结束时的状态(在最后一个关键帧中定义)将保留。
direction "normal" | "reverse" | "alternate" | "alternate-reverse" 动画播放模式,默认值"normal"。
iterations number 动画播放次数,默认值1。设置为0时不播放,设置为-1时无限次播放。
begin number 动画插值起点,不设置时默认为0。
end number 动画插值终点,不设置时默认为1。