• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 动画动效
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @CCFFWW-->
5<!--Designer: @yangfan229-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10通过设置插值器来实现动画效果。
11
12
13## 创建动画对象
14
15通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。
16
17```html
18<!-- xxx.hml -->
19<div class="container">
20  <div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
21  </div>
22  <div class="row">
23    <button type="capsule" value="play" onclick="playAnimation"></button>
24  </div>
25</div>
26```
27
28```css
29/* xxx.css */
30.container {
31  width:100%;
32  height:100%;
33  flex-direction: column;
34  align-items: center;
35  justify-content: center;
36}
37button{
38  width: 200px;
39}
40.row{
41  width: 65%;
42  height: 100px;
43  align-items: center;
44  justify-content: space-between;
45  margin-top: 50px;
46  margin-left: 260px;
47}
48```
49
50```js
51// xxx.js
52export default {
53  data: {
54    translateVal: 0,
55    animation: null
56  },
57  onInit() {},
58  onShow(){
59    var options = {
60      duration: 3000,
61      easing:"friction",
62      delay:"1000",
63      fill: 'forwards',
64      direction:'alternate',
65      iterations: 2,
66      begin: 0,
67      end: 180
68    };//设置参数
69    this.animation = this.getUIContext().createAnimator(options);//创建动画
70  },
71  playAnimation() {
72    var _this = this;
73    this.animation.onframe = function(value) {
74      _this.translateVal= value;
75    };
76    this.animation.play();
77  }
78}
79```
80
81![zh-cn_image_0000001174756776](figures/zh-cn_image_0000001174756776.gif)
82
83> **说明：**
84> - 使用createAnimator创建动画对象时必须传入options参数。
85>
86> - begin插值起点，不设置时默认为0。
87>
88> - end插值终点，不设置时默认为1。
89
90
91## 添加动画事件和调用接口
92
93animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的[createAnimator](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#createanimator)。
94
95```html
96<!-- xxx.hml -->
97<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
98  <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
99  transform: scale({{scaleVal}});"></div>
100  <div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
101  background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});">
102  </div>
103  <div class="row">
104    <button type="capsule" value="play" onclick="playAnimation"></button>
105    <button type="capsule" value="update" onclick="updateAnimation"></button>
106  </div>
107  <div class="row1">
108    <button type="capsule" value="pause" onclick="pauseAnimation"></button>
109    <button type="capsule" value="finish" onclick="finishAnimation"></button>
110  </div>
111  <div class="row2">
112    <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
113    <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
114  </div>
115</div>
116```
117
118```css
119/* xxx.css */
120button{
121  width: 200px;
122}
123.row{
124  width: 65%;
125  height: 100px;
126  align-items: center;
127  justify-content: space-between;
128  margin-top: 150px;
129  position: fixed;
130  top: 52%;
131  left: 120px;
132}
133.row1{
134  width: 65%;
135  height: 100px;
136  align-items: center;
137  justify-content: space-between;
138  margin-top: 120px;
139  position: fixed;
140  top: 65%;
141  left: 120px;
142}
143.row2{
144  width: 65%;
145  height: 100px;
146  align-items: center;
147  justify-content: space-between;
148  margin-top: 100px;
149  position: fixed;
150  top: 75%;
151  left: 120px;
152}
153```
154
155```js
156// xxx.js
157export default {
158  data: {
159    scaleVal:1,
160    DivWidth:200,
161    DivHeight:200,
162    translateVal:0,
163    animation: null
164  },
165  onInit() {},
166  onShow() {
167    var options = {
168      duration: 3000,
169      fill: 'forwards',
170      begin: 200,
171      end: 270
172    };
173    this.animation = this.getUIContext().createAnimator(options);
174    var _this= this;
175    //添加动画重放事件
176    this.animation.onrepeat = function() {
177      this.getUIContext().getPromptAction().showToast({
178        message: 'repeat'
179      });
180      var repeatOptions = {
181        duration: 2000,
182        iterations: 1,
183         direction: 'alternate',
184         begin: 180,
185         end: 240
186       };
187        _this.animation?.update(repeatOptions);
188        _this.animation?.play();
189      };
190  },
191  playAnimation() {
192    var _this= this;
193    //添加动画逐帧插值回调事件
194    this.animation.onframe = function(value) {
195      _this.scaleVal= value/150,
196      _this.DivWidth = value,
197      _this.DivHeight = value,
198      _this.translateVal = value-180
199    };
200    this.animation.play();
201  },
202  updateAnimation() {
203    var newoptions = {
204      duration: 5000,
205      iterations: 2,
206      begin: 120,
207      end: 180
208    };
209    this.animation.update(newoptions);
210    this.animation.play();//调用动画播放接口
211  },
212  pauseAnimation() {
213    this.animation.pause();//调用动画暂停接口
214  },
215  finishAnimation() {
216    var _this= this;
217   //添加动画完成事件
218    this.animation.onfinish = function() {
219      this.getUIContext().getPromptAction().showToast({
220        message: 'finish'
221      });
222    };
223    this.animation.finish(); //调用动画完成接口
224  },
225  cancelAnimation() {
226    this.animation.cancel(); //调用动画取消接口
227  },
228  reverseAnimation() {
229    this.animation.reverse(); //调用动画倒放接口
230  }
231}
232```
233
234![zh-cn_image_0000001220635059](figures/zh-cn_image_0000001220635059.gif)
235
236> **说明：**
237>
238> 在调用[reset](../reference/apis-arkui/js-apis-animator.md#reset9)接口的过程中可以使用这个接口更新动画参数，入参与[createAnimator](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#createanimator)一致。
239