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