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