1# Animation Effect
2
3
4You can set the interpolator to implement the animation effect.
5
6
7## Creating an Animation Object
8
9Use createAnimator to create an animation object and set the animation attributes by using the options parameter.
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    };// Set attributes.
64    this.animation = animator.createAnimator(options)// Create an animation.
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![en-us_image_0000001267887885](figures/en-us_image_0000001267887885.gif)
77
78> **NOTE**
79>
80> - When you use createAnimator to create an animation object, you must pass the options parameter.
81>
82> - begin indicates the start point of the animation interpolation. If it is not set, the default value 0 is used.
83>
84> - end indicates the end point of the animation interpolation. If it is not set, the default value 1 is used.
85
86
87## Adding Animation Events and Calling Methods
88
89The animator supports events and methods, which you can use to customize the animation effect. Events include frame, cancel, repeat, and finish. Methods include update, play, pause, cancel, reverse, and finish. For details about the supported events and methods, see [animator supported events and animator supported APIs](../reference/apis-arkui/js-apis-animator.md).
90
91```html
92<!-- xxx.hml -->
93<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
94  <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
95  transform: scale({{scaleVal}});"></div>
96  <div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
97  background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});">
98  </div>
99  <div class="row">
100    <button type="capsule" value="play" onclick="playAnimation"></button>
101    <button type="capsule" value="update" onclick="updateAnimation"></button>
102  </div>
103  <div class="row1">
104    <button type="capsule" value="pause" onclick="pauseAnimation"></button>
105    <button type="capsule" value="finish" onclick="finishAnimation"></button>
106  </div>
107  <div class="row2">
108    <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
109    <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
110  </div>
111</div>
112```
113
114```css
115/* xxx.css */
116button{
117  width: 200px;
118}
119.row{
120  width: 65%;
121  height: 100px;
122  align-items: center;
123  justify-content: space-between;
124  margin-top: 150px;
125  position: fixed;
126  top: 52%;
127  left: 120px;
128}
129.row1{
130  width: 65%;
131  height: 100px;
132  align-items: center;
133  justify-content: space-between;
134  margin-top: 120px;
135  position: fixed;
136  top: 65%;
137  left: 120px;
138}
139.row2{
140  width: 65%;
141  height: 100px;
142  align-items: center;
143  justify-content: space-between;
144  margin-top: 100px;
145  position: fixed;
146  top: 75%;
147  left: 120px;
148}
149```
150
151```js
152// xxx.js
153import animator from '@ohos.animator';
154import promptAction from '@ohos.promptAction';
155export default {
156  data: {
157    scaleVal:1,
158    DivWidth:200,
159    DivHeight:200,
160    translateVal:0,
161    animation: null
162  },
163  onInit() {
164    var options = {
165      duration: 3000,
166      fill: 'forwards',
167      begin: 200,
168      end: 270
169    };
170    this.animation = animator.createAnimator(options);
171  },
172  onShow() {
173    var _this= this;
174    // Add an animation repeat event.
175    this.animation.onrepeat = function() {
176      promptAction.showToast({
177        message: 'repeat'
178      });
179      var repeatoptions = {
180        duration: 2000,
181        iterations: 1,
182         direction: 'alternate',
183         begin: 180,
184         end: 240
185       };
186        _this.animation.update(repeatoptions);
187        _this.animation.play();
188      };
189  },
190  playAnimation() {
191    var _this= this;
192    // Add the frame-by-frame interpolation callback event for the animation.
193    this.animation.onframe = function(value) {
194      _this. scaleVal= value/150,
195      _this.DivWidth = value,
196      _this.DivHeight = value,
197      _this.translateVal = value-180
198    };
199    this.animation.play();
200  },
201  updateAnimation() {
202    var newoptions = {
203      duration: 5000,
204      iterations: 2,
205      begin: 120,
206      end: 180
207    };
208    this.animation.update(newoptions);
209    this.animation.play();// Play this animation.
210  },
211  pauseAnimation() {
212    this.animation.pause();// Pause this animation.
213  },
214  finishAnimation() {
215    var _this= this;
216   // Add an animation completion event.
217    this.animation.onfinish = function() {
218      promptAction.showToast({
219        message: 'finish'
220      })
221    };
222    this.animation.finish(); // Finish this animation.
223  },
224  cancelAnimation() {
225    this.animation.cancel(); // Cancel this animation.
226  },
227  reverseAnimation() {
228    this.animation.reverse(); // Reverse this animation.
229  }
230}
231```
232
233![en-us_image_0000001223287724](figures/en-us_image_0000001223287724.gif)
234
235> **NOTE**
236>
237> When calling the update method, you can use it to update the animation parameters. The input parameters are the same as those of createAnimator.
238