1# 通用方法 2 3>  **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。 7 8 9## animate 10 11animate( keyframes: Keyframes, options: Options)：void 12 13- 参数 14 | 参数名 | 参数类型 | 必填 | 描述 | 15 | -------- | -------- | -------- | -------- | 16 | keyframes | keyframes | 是 | 设置动画样式 | 17 | options | Options | 是 | 用于设置动画属性的对象列表。options请见表3 Options说明。 | 18 19 **表1** keyframes 20 21 | 属性 | 类型 | 说明 | 22 | -------- | -------- | -------- | 23 | frames | Array<Style> | 用于设置动画样式的对象列表。Style类型说明请见表2 Style类型说明。 | 24 25 **表2** Style类型说明 26 27 | 参数 | 类型 | 默认值 | 说明 | 28 | -------- | -------- | -------- | -------- | 29 | width | number | - | 动画执行过程中设置到组件上的宽度值。 | 30 | height | number | - | 动画执行过程中设置到组件上的高度值。 | 31 | backgroundColor | <color> | none | 动画执行过程中设置到组件上的背景颜色。 | 32 | opacity | number | 1 | 设置到组件上的透明度（介于0到1之间）。 | 33 | backgroundPosition | string | - | 格式为"x y"，单位为百分号或者px。<br/>第一个值是水平位置，第二个值是垂直位置。<br/>如果仅规定了一个值，另一个值为 50%。 | 34 | transformOrigin | string | 'center center' | 变换对象的中心点。<br/>第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。<br/>第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。 | 35 | transform | [Transform](../arkui-js/js-components-common-animation.md) | - | 设置到变换对象上的类型。 | 36 | offset | number | - | - offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。<br/>- 若只有两帧，可以不填offset。<br/>- 若超过两帧，offset必填。 | 37 38 **表3** Options说明 39 40 | 参数 | 类型 | 默认值 | 说明 | 41 | -------- | -------- | -------- | -------- | 42 | duration | number | 0 | 指定当前动画的运行时长（单位毫秒）。 | 43 | easing | string | linear | 描述动画的时间曲线，支持类型见表4 easing有效值说明。 | 44 | delay | number | 0 | 设置动画执行的延迟时间（默认值表示无延迟）。 | 45 | iterations | number \| string | 1 | 设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。 | 46 | direction<sup>6+</sup> | string | normal | 指定动画的播放模式：<br/>normal： 动画正向循环播放；<br/>reverse： 动画反向循环播放；<br/>alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；<br/>alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 | 47 | fill | string | none | 指定动画开始和结束的状态：<br/>none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 | 48 49 **表4** easing有效值说明 50 51 | 值 | 描述 | 52 | -------- | -------- | 53 | linear | 动画线性变化。 | 54 | ease-in | 动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 | 55 | ease-out | 动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 | 56 | ease-in-out | 动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | 57 | friction | 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。 | 58 | extreme-deceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | 59 | sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | 60 | rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | 61 | smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | 62 | cubic-bezier(x1, y1, x2, y2) | 在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。 | 63 | steps(number, step-position)<sup>6+</sup> | Step曲线。<br/>number必须设置，支持的类型为int。<br/>step-position参数可选，支持设置start或end，默认值为end。 | 64 65- 返回值 66 animation对象属性： 67 68 | 属性 | 类型 | 说明 | 69 | -------- | -------- | -------- | 70 | finished | boolean | 只读，用于表示当前动画是否已播放完成。 | 71 | pending | boolean | 只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。 | 72 | playState | string | 可读可写，动画的执行状态：<br/>- idle：未执行状态，包括已结束或未开始。<br/>- running：动画正在运行。<br/>- paused：动画暂停。<br/>- finished：动画播放完成。 | 73 | startTime | number | 可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。 | 74 75 animation对象方法： 76 77 | 方法 | 参数 | 说明 | 78 | -------- | -------- | -------- | 79 | play | - | 组件播放动画。 | 80 | finish | - | 组件完成动画。 | 81 | pause | - | 组件暂停动画。 | 82 | cancel | - | 组件取消动画。 | 83 | reverse | - | 组件倒播动画。 | 84 85 animation对象事件： 86 87 | 事件 | 说明 | 88 | -------- | -------- | 89 | start<sup>6+</sup> | 动画开始事件。 | 90 | cancel | 动画被强制取消。 | 91 | finish | 动画播放完成。 | 92 | repeat | 动画重播事件。 | 93 94- 示例 95```html 96<!-- xxx.hml --> 97<div class="container"> 98 <div id="idName" class="box"></div> 99 <div class="buttonBox"> 100 <button @click="start"> 101 start 102 </button> 103 <button @click="cancel"> 104 cancel 105 </button> 106 </div> 107``` 108 109 ``` 110 /* xxx.css */ 111 .container { 112 flex-direction: column; 113 justify-content: center; 114 align-items: center; 115 width: 100%; 116 } 117 .box{ 118 width: 200px; 119 height: 200px; 120 background-color: #ff0000; 121 margin-top: 30px; 122 } 123 .buttonBox{ 124 margin-top: 30px; 125 width: 250px; 126 justify-content: space-between; 127 } 128 button{ 129 background-color: #8e8b89; 130 color: white; 131 width: 100px; 132 height: 40px; 133 font-size: 24px; 134 } 135 ``` 136 137 ``` 138 // xxx.js 139 import prompt from '@system.prompt'; 140 export default{ 141 data:{ 142 animation:'', 143 }, 144 onInit(){ 145 }, 146 onShow(){ 147 var options = { 148 duration: 1500, 149 easing: 'friction', 150 delay: 500, 151 fill: 'forwards', 152 iterations: 2, 153 direction: 'normal', 154 }; 155 var frames = [ 156 {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, 157 {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} 158 ]; 159 this.animation = this.$element('idName').animate(frames, options); 160 // handle finish event 161 this.animation.onfinish = function(){ 162 prompt.showToast({ 163 message: "The animation is finished." 164 }); 165 }; 166 // handle cancel event 167 this.animation.oncancel = function(){ 168 prompt.showToast({ 169 message: "The animation is canceled." 170 }); 171 }; 172 // handle repeat event 173 this.animation.onrepeat = function(){ 174 prompt.showToast({ 175 message: "The animation is repeated." 176 }); 177 }; 178 }, 179 start(){ 180 this.animation.play(); 181 }, 182 cancel(){ 183 this.animation.cancel(); 184 } 185 } 186 ``` 187 188  189 190 191## getBoundingClientRect 192 193getBoundingClientRect(): \<Rect> 194 195获取元素的大小及其相对于窗口的位置。 196 197- 返回值 198 199 **表5** Rect对象说明<sup>6+</sup> 200 201 | 属性 | 类型 | 描述 | 202 | -------- | -------- | -------- | 203 | width | number | 该元素的宽度。 | 204 | height | number | 该元素的高度。 | 205 | left | number | 该元素左边界距离窗口的偏移。 | 206 | top | number | 该元素上边界距离窗口的偏移。 | 207 208- 示例 209 ``` 210 // xxx.js 211 var rect = this.$element('id').getBoundingClientRect(); 212 console.info(`current element position is ${rect.left}, ${rect.top}`); 213 ``` 214 215 216## createIntersectionObserver 217 218createIntersectionObserver(param?: ObserverParam): Observer 219 220监听元素在当前页面的可见范围。 221 222- 参数 223 | 参数名 | 参数类型 | 必填 | 描述 | 224 | -------- | -------- | -------- | -------- | 225 | param | ObserverParam | - | 获取observer的回调。 | 226 227 **表6** ObserverParam对象说明<sup>6+</sup> 228 229 | 属性 | 类型 | 描述 | 230 | -------- | -------- | -------- | 231 | ratios | Array<number> | 组件超出或小于范围时触发observer的回调。 | 232 233- 返回值 234 235 **表7** Observer对象支持的方法<sup>6+</sup> 236 237 | 方法 | 参数 | 描述 | 238 | -------- | -------- | -------- | 239 | observe | callback: function | 开启observer的订阅方法。超出或小于阈值时触发callback。 | 240 | unobserve | - | 取消observer的订阅方法。 | 241 242- 示例 243 ``` 244 // xxx.js 245 let observer = this.$element('broad').createIntersectionObserver({ 246 ratios: [0.2, 0.5], // number 247 }); 248 249 observer.observe((isVisible, ratio)=> { 250 console.info('this element is ' + isVisible + 'ratio is ' + ratio) 251 }) 252 253 observer.unobserve() 254 ``` 255
