> 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/readme.md).

# 关于 ract.js

## 什么是 ract.js

<mark style="color:purple;">**`ract.js`**</mark>  帮助您以  <mark style="color:red;">函数式编程（Functional programming）</mark>  的方式制作<mark style="color:red;">动画</mark>:smile:

<mark style="color:purple;">**`ract`**</mark>取自 <mark style="color:purple;">**`ract.js`**</mark> 中创建动画时最常用的两个方法 <mark style="color:red;">**`r()`**</mark>, <mark style="color:red;">**`act()`**</mark> ，它们的用法如下：

```javascript
r(...).act(...)
```

<mark style="color:purple;">**`ract.js`**</mark> 还提供了 <mark style="color:yellow;">**`acts`**</mark> 预定义动画库，来帮助开发者们以一行代码快捷地创建动画，如下：

```javascript
import { r, acts } from 'ractjs'
const element = document.getElementById('element_id')

r(element).act(acts.OUT.OPACITY) // key code
```

直观地查看更多 <mark style="color:yellow;">**`acts`**</mark> 库内的预定义动画效果， 请访问 [<mark style="color:blue;">Act Pre-define Animations</mark>](https://r1ader.github.io/Doc/)

## 使用 <mark style="color:purple;">`ract.js`</mark> ，你可能需要

### [<mark style="color:blue;">快速开始</mark>](/ractjs_cn/get_start.md)

### [<mark style="color:blue;">API 文档</mark>](/ractjs_cn/api-wen-dang.md)

## 安装

### npm:

```bash
npm install --save ractjs
```

### 浏览器:

```javascript
<script src="https://unpkg.com/ractjs/dist/bundle.js"></script>

<script>
    const { r, acts } = ract
</script>
```

或者也可以在浏览器中使用 ES module

chrome, firefox 等主流浏览器已原生支持 import

```html
<script type="module">
    import { r, acts } from "https://unpkg.com/ractjs/index.js";
</script>
```

在原生 <mark style="color:orange;">`html`</mark> 与 <mark style="color:orange;">`javascript`</mark> 中使用 <mark style="color:purple;">**`ractjs.js`**</mark> 的示例👉 \[[<mark style="color:blue;">code</mark>](https://github.com/r1ader/r_animate/blob/main/code/test.html)]\[[<mark style="color:blue;">demo</mark>](https://r1ader.github.io/r_animate/code/test.html)]

##