# 通用方法
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。
## animate
animate( keyframes: Keyframes, options: Options)：void
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | --------- | ---- | ------------------------------------ |
| keyframes | keyframes | 是 | 设置动画样式 |
| options | Options | 是 | 用于设置动画属性的对象列表。options请见表3 Options说明。 |
**表1** keyframes
| 属性 | 类型 | 说明 |
| ------ | ------------------ | -------------------------------------- |
| frames | Array<Style> | 用于设置动画样式的对象列表。Style类型说明请见表2 Style类型说明。 |
**表2** Style类型说明
| 参数 | 类型 | 默认值 | 说明 |
| ------------------ | ---------------------------------------- | -------------------- | ---------------------------------------- |
| width | number | - | 动画执行过程中设置到组件上的宽度值。 |
| height | number | - | 动画执行过程中设置到组件上的高度值。 |
| backgroundColor | <color> | none | 动画执行过程中设置到组件上的背景颜色。 |
| opacity | number | 1 | 设置到组件上的透明度，介于0到1之间。 |
| backgroundPosition | string | - | 格式为"x y"，单位为百分号或者px。
第一个值是水平位置，第二个值是垂直位置。
如果仅规定了一个值，另一个值为 50%。 |
| transformOrigin | string | 'center center' | 变换对象的中心点。
第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。
第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。 |
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | 设置到变换对象上的类型。 |
| offset | number | - | - offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。
- 若只有两帧，可以不填offset。
- 若超过两帧，offset必填。 |
**表3** Options说明
| 参数 | 类型 | 默认值 | 说明 |
| ---------------------- | -------------------------- | ------ | ---------------------------------------- |
| duration | number | 0 | 指定当前动画的运行时长，单位毫秒。 |
| easing | string | linear | 描述动画的时间曲线，支持类型见表4 easing有效值说明。 |
| delay | number | 0 | 设置动画执行的延迟时间，默认值表示无延迟。 |
| iterations | number \| string | 1 | 设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。 |
| direction6+ | string | normal | 指定动画的播放模式：
normal： 动画正向循环播放；
reverse： 动画反向循环播放；
alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；
alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 |
| fill | string | none | 指定动画开始和结束的状态：
none：在动画执行之前和之后都不会应用任何样式到目标上。
forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
**表4** easing有效值说明
| 值 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| linear | 动画线性变化。 |
| ease-in | 动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 |
| ease-out | 动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 |
| ease-in-out | 动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 |
| friction | 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。 |
| extreme-deceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 |
| sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 |
| rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 |
| smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 |
| cubic-bezier(x1, y1, x2, y2) | 在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。 |
| steps(number, step-position)6+ | Step曲线。
number必须设置，支持的类型为int。
step-position参数可选，支持设置start或end，默认值为end。 |
**返回值：**
animation对象属性：
| 属性 | 类型 | 说明 |
| --------- | ------- | ---------------------------------------- |
| finished | boolean | 只读，用于表示当前动画是否已播放完成。 |
| pending | boolean | 只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。 |
| playState | string | 可读可写，动画的执行状态：
- idle：未执行状态，包括已结束或未开始。
- running：动画正在运行。
- paused：动画暂停。
- finished：动画播放完成。 |
| startTime | number | 可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。 |
animation对象方法：
| 方法 | 参数 | 说明 |
| ------- | ---- | ------- |
| play | - | 组件播放动画。 |
| finish | - | 组件完成动画。 |
| pause | - | 组件暂停动画。 |
| cancel | - | 组件取消动画。 |
| reverse | - | 组件倒播动画。 |
animation对象事件：
| 事件 | 说明 |
| ------------------ | -------- |
| start6+ | 动画开始事件。 |
| cancel | 动画被强制取消。 |
| finish | 动画播放完成。 |
| repeat | 动画重播事件。 |
**示例：**
```html
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.box{
width: 200px;
height: 200px;
background-color: #ff0000;
margin-top: 30px;
}
.buttonBox{
margin-top: 30px;
width: 250px;
justify-content: space-between;
}
button{
background-color: #8e8b89;
color: white;
width: 100px;
height: 40px;
font-size: 24px;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
export default{
data:{
animation:'',
},
onInit(){
},
onShow(){
var options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
];
this.animation = this.$element('idName').animate(frames, options);
// handle finish event
this.animation.onfinish = function(){
prompt.showToast({
message: "The animation is finished."
});
};
// handle cancel event
this.animation.oncancel = function(){
prompt.showToast({
message: "The animation is canceled."
});
};
// handle repeat event
this.animation.onrepeat = function(){
prompt.showToast({
message: "The animation is repeated."
});
};
},
start(){
this.animation.play();
},
cancel(){
this.animation.cancel();
}
}
```
## getBoundingClientRect
getBoundingClientRect(): \
获取元素的大小及其相对于窗口的位置。
**返回值：**
**表5** Rect对象说明6+
| 属性 | 类型 | 描述 |
| ------ | ------ | -------------- |
| width | number | 该元素的宽度。 |
| height | number | 该元素的高度。 |
| left | number | 该元素左边界距离窗口的偏移。 |
| top | number | 该元素上边界距离窗口的偏移。 |
**示例：**
```js
// xxx.js
var rect = this.$element('id').getBoundingClientRect();
console.info(`current element position is ${rect.left}, ${rect.top}`);
```
## createIntersectionObserver
createIntersectionObserver(param?: ObserverParam): Observer
监听元素在当前页面的可见范围。
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------------- | ---- | -------------- |
| param | ObserverParam | - | 获取observer的回调。 |
**表6** ObserverParam对象说明6+
| 属性 | 类型 | 描述 |
| ------ | ------------------- | ------------------------ |
| ratios | Array<number> | 组件超出或小于范围时触发observer的回调。 |
**返回值：**
**表7** Observer对象支持的方法6+
| 方法 | 参数 | 描述 |
| --------- | ----------------------- | ----------------------------------- |
| observe | callback: function | 开启observer的订阅方法。超出或小于阈值时触发callback。 |
| unobserve | - | 取消observer的订阅方法。 |
**示例：**
```js
// xxx.js
let observer = this.$element('broad').createIntersectionObserver({
ratios: [0.2, 0.5], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
})
observer.unobserve()
```