1# Component Animation
2
3
4Create and run an animation shortcut on the component. For details, see [Universal Methods](../reference/apis-arkui/arkui-js/js-components-common-methods.md).
5
6
7## Obtaining an Animation Object
8
9Call the **animate** method to obtain an animation object, which supports animation attributes, methods, and events.
10
11```html
12<!-- xxx.hml -->
13<div class="container">
14  <div id="content" class="box" onclick="Show"></div>
15</div>
16```
17
18```css
19/* xxx.css */
20.container {
21  flex-direction: column;
22  justify-content: center;
23  align-items: center;
24  width: 100%;
25}
26.box{
27  width: 200px;
28  height: 200px;
29  background-color: #ff0000;
30  margin-top: 30px;
31}
32```
33
34```js
35/* xxx.js */
36export default {
37    data: {
38        animation: '',
39        options: {},
40        frames: {}
41    },
42    onInit() {
43        this.options = {
44            duration: 1500,
45        };
46        this.frames = [
47            {
48                width: 200, height: 200,
49            },
50            {
51                width: 300, height: 300,
52            }
53        ];
54    },
55    Show() {
56        this.animation = this.$element('content').animate(this.frames, this.options); // Obtain the animation object.
57        this.animation.play();
58    }
59}
60```
61
62![en-us_image_0000001222807812](figures/en-us_image_0000001222807812.gif)
63
64> **NOTE**
65> - When using the animate method, you must pass the keyframes and options parameters.
66> - If animate is called multiple times and the replace policy is used, parameters passed to the last call will take effect.
67
68
69## Setting Animation Parameters
70
71After obtaining an animation object, you can set its style working on the component by using the keyframes parameter.
72
73```html
74<!-- xxx.hml -->
75<div class="container">
76   <div id="content" class="box" onclick="Show"></div>
77</div>
78```
79
80```css
81/* xxx.css */
82.container {
83  flex-direction: column;
84  justify-content: center;
85  align-items: center;
86  width: 100%;
87  height: 100%;
88}
89.box{
90  width: 200px;
91  height: 200px;
92  background-color: #ff0000;
93  margin-top: 30px;
94}
95```
96
97```js
98/* xxx.js */
99export default {
100  data: {
101    animation: '',
102    keyframes:{},
103    options:{}
104  },
105  onInit() {
106    this.options = {
107      duration: 4000,
108    }
109    this.keyframes = [
110    {
111      transform: {
112        translate: '-120px -0px',
113        scale: 1,
114        rotate: 0
115        },
116        transformOrigin: '100px 100px',
117        offset: 0.0,
118        width: 200,
119        height: 200
120      },
121      {
122        transform: {
123          translate: '120px 0px',
124          scale: 1.5,
125          rotate: 90
126          },
127          transformOrigin: '100px 100px',
128          offset: 1.0,
129          width: 300,
130          height: 300
131      }
132    ]
133  },
134  Show() {
135    this.animation = this.$element('content').animate(this.keyframes, this.options)
136    this.animation.play()
137  }
138}
139```
140
141![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif)
142
143> **NOTE**
144> - The sequence of **translate**, **scale**, and **rotate** affects the animation effect.
145>
146> - **transformOrigin** works only for scale and rotate.
147
148Set the animation attributes by using the **options** parameter.
149
150```html
151<!-- xxx.hml -->
152<div class="container">
153   <div id="content" class="box" onclick="Show"></div>
154</div>
155```
156
157```css
158/* xxx.css */
159.container {
160  flex-direction: column;
161  justify-content: center;
162  align-items: center;
163  width: 100%;
164}
165.box{
166  width: 200px;
167  height: 200px;
168  background-color: #ff0000;
169  margin-top: 30px;
170}
171```
172
173```js
174/* xxx.js */
175export default {
176    data: {
177        animation: '',
178        options: {},
179        frames: {}
180    },
181    onInit() {
182        this.options = {
183            duration: 1500,
184            easing: 'ease-in',
185            delay: 5,
186            iterations: 2,
187            direction: 'normal',
188        };
189        this.frames = [
190            {
191                transform: {
192                    translate: '-150px -0px'
193                }
194            },
195            {
196                transform: {
197                    translate: '150px 0px'
198                }
199            }
200        ];
201    },
202    Show() {
203        this.animation = this.$element('content').animate(this.frames, this.options);
204        this.animation.play();
205    }
206}
207```
208
209![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif)
210
211> **NOTE**
212>
213> **direction**: mode of playing the animation.
214>
215> **normal**: plays the animation in forward loop mode.
216>
217> **reverse**: plays the animation in reverse loop mode.
218>
219> **alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
220>
221> **alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
222
223
224