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