# 关于 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)]

##


---

# Agent Instructions: 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/readme.md?ask=<question>
```

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.