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