@ohos.animator (动画)

本模块提供组件动画效果，包括定义动画、启动动画和以相反的顺序播放动画等。

说明：

本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

导入模块

import animator from '@ohos.animator';

create⁹⁺

create(options: AnimatorOptions): AnimatorResult

定义Animator类。

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

参数：

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

返回值：

类型	说明
AnimatorResult	Animator结果接口。

示例：

let options = {
  duration: 1500,
  easing: 'friction',
  delay: 0,
  fill: 'forwards',
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0,
};
animator.create(options);

1
2
3
4
5
6
7
8
9
10
11

AnimatorResult

定义Animator结果接口。

reset⁹⁺

reset(options: AnimatorOptions): void

更新当前动画器。

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

参数：

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

错误码：

以下错误码的详细介绍请参见ohos.animator(动画)错误码。

错误码ID	错误信息
100001	If no page is found for pageId or fail to get object property list.

示例：

let options = {
  duration: 1500,
  easing: 'friction',
  delay: 0,
  fill: 'forwards',
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0,
};
try {
  animator.reset(options);
} catch(error) {
  console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

play

play(): void

启动动画。

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

示例：

animator.play();

finish

finish(): void

结束动画。

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

示例：

animator.finish();

pause

pause(): void

暂停动画。

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

示例：

animator.pause();

cancel

cancel(): void

删除动画。

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

示例：

animator.cancel();

reverse

reverse(): void

以相反的顺序播放动画。

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

示例：

animator.reverse();

onframe

onframe: (progress: number) => void

接收到帧时回调。

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

参数：

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

示例：

let animatorResult = animator.create(options)
animatorResult.onframe = function(value) {
  console.info("onframe callback")
}

1
2
3
4

onfinish

onfinish: () => void

动画完成时回调。

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

示例：

let animatorResult = animator.create(options)
animatorResult.onfinish = function() {
  console.info("onfinish callback")
}

1
2
3
4

oncancel

oncancel: () => void

动画被取消时回调。

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

示例：

let animatorResult = animator.create(options)
animatorResult.oncancel = function() {
  console.info("oncancel callback")
}

1
2
3
4

onrepeat

onrepeat: () => void

动画重复时回调。

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

示例：

let animatorResult = animator.create(options)
animatorResult.onrepeat = function() {
  console.info("onrepeat callback")
}

1
2
3
4

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。

完整示例

基于JS扩展的类Web开发范式

<!-- 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

export default {
  data: {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    let options = {
      duration: 1500,
      easing: 'friction',
      delay: 0,
      fill: 'forwards',
      direction: "normal",
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.create(options);
  },
  Show() {
    let options1 = {
      duration: 1500,
      easing: 'friction',
      delay: 0,
      fill: 'forwards',
      direction: "normal",
      iterations: 2,
      begin: 0,
      end: 400.0,
    };
    try {
      this.animator.reset(options1);
    } catch(error) {
      console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
    }
    let _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
37
38
39
40
41
42
43

zh-cn_image_00007

基于TS扩展的声明式开发范式

import animator from '@ohos.animator';

@Entry
@Component
struct AnimatorTest {
  private TAG: string = '[AnimatorTest]'
  private backAnimator: any = undefined
  private flag: boolean = false
  @State wid: number = 100
  @State hei: number = 100

  create() {
    let _this = this
    this.backAnimator = animator.create({
      duration: 2000,
      easing: 'ease',
      delay: 0,
      fill: 'none',
      direction: 'normal',
      iterations: 1,
      begin: 100,
      end: 200
    })
    this.backAnimator.onfinish = function () {
      _this.flag = true
      console.info(_this.TAG, 'backAnimator onfinish')
    }
    this.backAnimator.onrepeat = function () {
      console.info(_this.TAG, 'backAnimator repeat')
    }
    this.backAnimator.oncancel = function () {
      console.info(_this.TAG, 'backAnimator cancel')
    }
    this.backAnimator.onframe = function (value) {
      _this.wid = value
      _this.hei = value
    }
  }

  build() {
    Column() {
      Column() {
        Column()
          .width(this.wid)
          .height(this.hei)
          .backgroundColor(Color.Red)
      }
      .width('100%')
      .height(300)

      Column() {
        Row() {
          Button('create')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.create()
            })
        }
        .padding(10)

        Row() {
          Button('play')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              this.backAnimator.play()
            })
        }
        .padding(10)

        Row() {
          Button('pause')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.backAnimator.pause()
            })
        }
        .padding(10)

        Row() {
          Button('finish')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = true
              this.backAnimator.finish()
            })
        }
        .padding(10)

        Row() {
          Button('reverse')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              this.backAnimator.reverse()
            })
        }
        .padding(10)

        Row() {
          Button('cancel')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.backAnimator.cancel()
            })
        }
        .padding(10)

        Row() {
          Button('reset')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              if (this.flag) {
                this.flag = false
                this.backAnimator.reset({
                  duration: 5000,
                  easing: 'ease-in',
                  delay: 0,
                  fill: 'none',
                  direction: 'normal',
                  iterations: 4,
                  begin: 100,
                  end: 300
                })
              } else {
                console.info(this.TAG, 'Animation not ended')
              }
            })
        }
        .padding(10)
      }
    }
  }
}

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

update^(deprecated)

update(options: AnimatorOptions): void

更新当前动画器。

从API version9开始不再维护，建议使用reset⁹⁺

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

参数：

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

示例：

animator.update(options);

createAnimator^(deprecated)

createAnimator(options: AnimatorOptions): AnimatorResult

定义Animator类。

从API version9开始不再维护，建议使用create⁹⁺

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

参数：

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

返回值：

类型	说明
AnimatorResult	Animator结果接口。

示例：

let options = {
  duration: 1500,
  easing: 'friction',
  delay: 0,
  fill: 'forwards',
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0,
};
this.animator = animator.createAnimator(options);

1
2
3
4
5
6
7
8
9
10
11

@ohos.animator (动画)

@ohos.animator (动画)

导入模块

create9+

AnimatorResult

reset9+

play

finish

pause

cancel

reverse

onframe

onfinish

oncancel

onrepeat

AnimatorOptions

完整示例

基于JS扩展的类Web开发范式

基于TS扩展的声明式开发范式

update(deprecated)

createAnimator(deprecated)

Description

create⁹⁺

reset⁹⁺

update^(deprecated)

createAnimator^(deprecated)