> For the complete documentation index, see [llms.txt](https://r1ader.gitbook.io/ractjs_cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://r1ader.gitbook.io/ractjs_cn/api-wen-dang.md).
# API 文档
## 全局方法
### r()
**`r()`**接收一个或多个 DOM **`element{}`** 对象，返回注册后的 **`Actor{}`** 对象或 **`Actor{}`** 对象集合。
示例：
```javascript
import { r } from 'ractjs'
const staff_1 = document.getElementById("Alice")
const actor_1 = r(staff_1)
actor_1.act({ opacity: 0 })
// Alice 将会隐身
// or
const staff_1 = document.getElementById("Alice")
const staff_2 = document.getElementById("Bob")
r(staff_1, staff_2).act({ opacity: 0 })
// Alice 与 Bob 将会同时隐身
```
## Do 方法
**`Do Method`** 为所有**`Actor{}`**对象可以调用的方法，如 **`r(element)`**.**`act`**(**`acts.OUT.OPACITY`**) 中的 **`act()`**就是一个最常用的 **`Do Method`**。
### .act()
**`act()`**方法会使一个**`Actor{}`**对象开始动画。
示例：
```java
r(element).act(act.OUT.OPACITY)
```
说明：
**`.act()`** 接受一个**`Act{}`**对象作为参数，当其接收一个普通对象时，会自动将其转化为**`Act{}`**对象
### .then()
**`then()`** 方法会在动画播放完后执行对应代码
示例：
```javascript
r(element).act(act.OUT.OPACITY)
.then(()=>{
console.log('Can you see me ?')
})
```
## Act 对象
每个**`Act{}`**对象都代表了一个动作，
**`Act{}`**对象的属性分为两种：**动画属性**，**配置属性**。
## 动画属性
**`Act{}`**对象的动画属性接受所有的css属性，如width，top，transform等等。
css属性所对应的值接受两种形式。
* 普通的css属性值 ：
```json
{
width: "200px" // 从当前宽度变化至200px
}
```
* **`ract.js`**语法：
```json
{
width: "[100~200]px" // 宽度从100px变化至200px
}
```
一言以蔽之，**`ract.js`** 规定的语法只是将css属性值中的数字，替换为 `[` **`start`** `~` **`end`** `]` 的形式。
> Notice: start 和 end 只能是数字，所以 px，em，deg等单位需要接在中括号 `]` 的后面
## 配置属性
**`Act{}`** 对象有许多自带的属性以供开发者们自定义动画的属性。
### duration
Type：Number
Default：1000
动画的时长，单位为ms。
### delay
Type：Number
Default：0
动画开始前的延迟，单位为ms。
### loop
Type：Boolean / Number / String
Default：False
动画是否循环。
False表示不循环，True表示循环。
若loop被设置为 Number ，则表示循环的次数。
> Notice：当loop被设置为2时，除了初始的那次，动画将重复2次，所以总共会执行3次。
loop 还可以被设置为 "alternate" 表示动画的循环顺序会正反交替进行。
次数和alternate可以同时使用：
```json
{
width: "100px",
loop: "10 alternate"
}
```
### reverse
Type：Boolean
Default：False
动画是否反向。设置为True，等于将 "\[100\~200]px" 变为 "\[200\~100]px"
### ease
Type：String
Default："easeOutExpo"
补间动画的插值形式，默认 "easeOutExpo" 表示先快后慢。
将 ease 设置为 "Linear" 则表示动画匀速进行。
> 关于更多 ease function ，您可以查看
除此以外 **ease** 也支持贝塞尔模式
```javascript
{
width: "[100~200]px" ,
duration: 3000,
ease: "cubic-bezier(.09,.77,.89,.3)"
} // 3秒 内，宽度从 100px 增长至 200px，先快后慢再快
```
> 关于 贝塞尔曲线，您可以查看
### callback
Type：Function / Array \[ Act { } ]
Default：null
动画结束时调用的函数。
当 callback 为一个 Act 对象列表时，callback 内的 Act 会在动画结束后被加入 Actor 的执行队列，这种用法可以用来构造 **复合 Act{}**。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://r1ader.gitbook.io/ractjs_cn/api-wen-dang.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.