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