1# 组件动画
2
3在组件上创建和运行动画的快捷方式。具体用法请参考[通用方法](../reference/apis-arkui/arkui-js/js-components-common-methods.md)。
4
5
6## 获取动画对象
7
8通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。
9
10```html
11<!-- xxx.hml -->
12<div class="container">
13  <div id="content" class="box" onclick="Show"></div>
14</div>
15```
16
17```css
18/* xxx.css */
19.container {
20  flex-direction: column;
21  justify-content: center;
22  align-items: center;
23  width: 100%;
24}
25.box{
26  width: 200px;
27  height: 200px;
28  background-color: #ff0000;
29  margin-top: 30px;
30}
31```
32
33```js
34/* xxx.js */
35export default {
36    data: {
37        animation: '',
38        options: {},
39        frames: {}
40    },
41    onInit() {
42        this.options = {
43            duration: 1500,
44        };
45        this.frames = [
46            {
47                width: 200, height: 200,
48            },
49            {
50                width: 300, height: 300,
51            }
52        ];
53    },
54    Show() {
55        this.animation = this.$element('content').animate(this.frames, this.options); //获取动画对象
56        this.animation.play();
57    }
58}
59```
60
61![zh-cn_image_0000001175235138](figures/zh-cn_image_0000001175235138.gif)
62
63> **说明：**
64> -   使用animate方法时必须传入Keyframes和Options参数。
65> -   多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。
66
67
68## 设置动画参数
69
70在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。
71
72```html
73<!-- xxx.hml -->
74<div class="container">
75   <div id="content" class="box" onclick="Show"></div>
76</div>
77```
78
79```css
80/* xxx.css */
81.container {
82  flex-direction: column;
83  justify-content: center;
84  align-items: center;
85  width: 100%;
86  height: 100%;
87}
88.box{
89  width: 200px;
90  height: 200px;
91  background-color: #ff0000;
92  margin-top: 30px;
93}
94```
95
96```js
97/* xxx.js */
98export default {
99  data: {
100    animation: '',
101    keyframes:{},
102    options:{}
103  },
104  onInit() {
105    this.options = {
106      duration: 4000,
107    }
108    this.keyframes = [
109    {
110      transform: {
111        translate: '-120px -0px',
112        scale: 1,
113        rotate: 0
114        },
115        transformOrigin: '100px 100px',
116        offset: 0.0,
117        width: 200,
118        height: 200
119      },
120      {
121        transform: {
122          translate: '120px 0px',
123          scale: 1.5,
124          rotate: 90
125          },
126          transformOrigin: '100px 100px',
127          offset: 1.0,
128          width: 300,
129          height: 300
130      }
131    ]
132  },
133  Show() {
134    this.animation = this.$element('content').animate(this.keyframes, this.options)
135    this.animation.play()
136  }
137}
138```
139
140![zh-cn_image_0000001174916742](figures/zh-cn_image_0000001174916742.gif)
141
142> **说明：**
143> - translate、scale和rtotate的先后顺序会影响动画效果。
144>
145> - transformOrigin只对scale和rtotate起作用。
146
147在获取动画对象后，通过设置参数Options来设置动画的属性。
148
149```html
150<!-- xxx.hml -->
151<div class="container">
152   <div id="content" class="box" onclick="Show"></div>
153</div>
154```
155
156```css
157/* xxx.css */
158.container {
159  flex-direction: column;
160  justify-content: center;
161  align-items: center;
162  width: 100%;
163}
164.box{
165  width: 200px;
166  height: 200px;
167  background-color: #ff0000;
168  margin-top: 30px;
169}
170```
171
172```js
173/* xxx.js */
174export default {
175    data: {
176        animation: '',
177        options: {},
178        frames: {}
179    },
180    onInit() {
181        this.options = {
182            duration: 1500,
183            easing: 'ease-in',
184            delay: 5,
185            iterations: 2,
186            direction: 'normal',
187        };
188        this.frames = [
189            {
190                transform: {
191                    translate: '-150px -0px'
192                }
193            },
194            {
195                transform: {
196                    translate: '150px 0px'
197                }
198            }
199        ];
200    },
201    Show() {
202        this.animation = this.$element('content').animate(this.frames, this.options);
203        this.animation.play();
204    }
205}
206```
207
208![zh-cn_image_0000001220396499](figures/zh-cn_image_0000001220396499.gif)
209
210> **说明：**
211>
212> direction：指定动画的播放模式。
213>
214> normal： 动画正向循环播放。
215>
216> reverse： 动画反向循环播放。
217>
218> alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。
219>
220> alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
221
222
223