1# 动画动效 2 3 4通过设置插值器来实现动画效果。 5 6> **说明：** 7> 从API Version 6 开始支持。 8 9 10## 创建动画对象 11 12通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。 13 14```html 15<!-- xxx.hml --> 16<div class="container"> 17 <div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});"> 18 </div> 19 <div class="row"> 20 <button type="capsule" value="play" onclick="playAnimation"></button> 21 </div> 22</div> 23``` 24 25```css 26/* xxx.css */ 27.container { 28 width:100%; 29 height:100%; 30 flex-direction: column; 31 align-items: center; 32 justify-content: center; 33} 34button{ 35 width: 200px; 36} 37.row{ 38 width: 65%; 39 height: 100px; 40 align-items: center; 41 justify-content: space-between; 42 margin-top: 50px; 43 margin-left: 260px; 44} 45``` 46 47```js 48// xxx.js 49import animator from '@ohos.animator'; 50export default { 51 data: { 52 translateVal: 0, 53 animation: null 54 }, 55 onInit() {}, 56 onShow(){ 57 var options = { 58 duration: 3000, 59 easing:"friction", 60 delay:"1000", 61 fill: 'forwards', 62 direction:'alternate', 63 iterations: 2, 64 begin: 0, 65 end: 180 66 };//设置参数 67 this.animation = animator.createAnimator(options)//创建动画 68 }, 69 playAnimation() { 70 var _this = this; 71 this.animation.onframe = function(value) { 72 _this.translateVal= value 73 }; 74 this.animation.play(); 75 } 76} 77``` 78 79 80 81> **说明：** 82> - 使用createAnimator创建动画对象时必须传入options参数。 83> 84> - begin插值起点，不设置时默认为0。 85> 86> - end插值终点，不设置时默认为1。 87 88 89## 添加动画事件和调用接口 90 91animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的[createAnimator](../reference/apis/js-apis-animator.md)。 92 93```html 94<!-- xxx.hml --> 95<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;"> 96 <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b); 97 transform: scale({{scaleVal}});"></div> 98 <div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px; 99 background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});"> 100 </div> 101 <div class="row"> 102 <button type="capsule" value="play" onclick="playAnimation"></button> 103 <button type="capsule" value="update" onclick="updateAnimation"></button> 104 </div> 105 <div class="row1"> 106 <button type="capsule" value="pause" onclick="pauseAnimation"></button> 107 <button type="capsule" value="finish" onclick="finishAnimation"></button> 108 </div> 109 <div class="row2"> 110 <button type="capsule" value="cancel" onclick="cancelAnimation"></button> 111 <button type="capsule" value="reverse" onclick="reverseAnimation"></button> 112 </div> 113</div> 114``` 115 116```css 117/* xxx.css */ 118button{ 119 width: 200px; 120} 121.row{ 122 width: 65%; 123 height: 100px; 124 align-items: center; 125 justify-content: space-between; 126 margin-top: 150px; 127 position: fixed; 128 top: 52%; 129 left: 120px; 130} 131.row1{ 132 width: 65%; 133 height: 100px; 134 align-items: center; 135 justify-content: space-between; 136 margin-top: 120px; 137 position: fixed; 138 top: 65%; 139 left: 120px; 140} 141.row2{ 142 width: 65%; 143 height: 100px; 144 align-items: center; 145 justify-content: space-between; 146 margin-top: 100px; 147 position: fixed; 148 top: 75%; 149 left: 120px; 150} 151``` 152 153```js 154// xxx.js 155import animator from '@ohos.animator'; 156import promptAction from '@ohos.promptAction'; 157export default { 158 data: { 159 scaleVal:1, 160 DivWidth:200, 161 DivHeight:200, 162 translateVal:0, 163 animation: null 164 }, 165 onInit() { 166 var options = { 167 duration: 3000, 168 fill: 'forwards', 169 begin: 200, 170 end: 270 171 }; 172 this.animation = animator.createAnimator(options); 173 }, 174 onShow() { 175 var _this= this; 176 //添加动画重放事件 177 this.animation.onrepeat = function() { 178 promptAction.showToast({ 179 message: 'repeat' 180 }); 181 var repeatoptions = { 182 duration: 2000, 183 iterations: 1, 184 direction: 'alternate', 185 begin: 180, 186 end: 240 187 }; 188 _this.animation.update(repeatoptions); 189 _this.animation.play(); 190 }; 191 }, 192 playAnimation() { 193 var _this= this; 194 //添加动画逐帧插值回调事件 195 this.animation.onframe = function(value) { 196 _this. scaleVal= value/150, 197 _this.DivWidth = value, 198 _this.DivHeight = value, 199 _this.translateVal = value-180 200 }; 201 this.animation.play(); 202 }, 203 updateAnimation() { 204 var newoptions = { 205 duration: 5000, 206 iterations: 2, 207 begin: 120, 208 end: 180 209 }; 210 this.animation.update(newoptions); 211 this.animation.play();//调用动画播放接口 212 }, 213 pauseAnimation() { 214 this.animation.pause();//调用动画暂停接口 215 }, 216 finishAnimation() { 217 var _this= this; 218 //添加动画完成事件 219 this.animation.onfinish = function() { 220 promptAction.showToast({ 221 message: 'finish' 222 }) 223 }; 224 this.animation.finish(); //调用动画完成接口 225 }, 226 cancelAnimation() { 227 this.animation.cancel(); //调用动画取消接口 228 }, 229 reverseAnimation() { 230 this.animation.reverse(); //调用动画倒放接口 231 } 232} 233``` 234 235 236 237> **说明：** 238> 在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。 239
