# 快速开始
## 简介
**`ract.js`** 使得我们可以以函数式编程的方式制作动画。
**`ract.js`** 中的绝大多数方法，都采用下图这种 **`Things`**.**`do`**(**`something`**) 的形式
以最基本的透明度渐出动画为例：
若 **`element`** 为动画的主体 , 则实际代码为
```javascript
import { r, acts } from 'ract'
const element = document.getElementById('element_id')
r(element).act(acts.OUT.OPACITY) // key code
```
让我们来着重看最后一行代码，
这里存在三个对象 **`r(element)`**, **`act`**, **`acts.OUT.OPACITY`**
它们分别对应了 **`Things`**，**`do`** 和 **`something`**
以下，将分别解释这三个对象。
* [r(element) -> Thing](#r-element-greater-than-thing)
* [act -> do](#act-greater-than-do)
* [acts.OUT.OPACITY -> something](#acts.out.opacity-greater-than-something)
## r(element) -> Thing
在 **`ract.js`** 中， 只有 `注册过的` DOM **`Element`** 对象，才能开始动画。
DOM **`Element`** 对象很好理解，即
* 原生的 `doument.getElementById`,
* vue中的 `this.$refs`
* ...
等方法获取到的对象，
那么`注册过的`又是什么呢？
> 请想象一下，在一个演艺片场中，存在很多人员: `演员`，`导演`，`助理`等等，但能上场演出的，只有`演员`。
所以相应的，一个普通的 **`Element`** 对象，也需要以 **`r`** 包裹，注册为**`Actor`**，才能开始动画。
在注册之后，您就可以调用 **`Element`** 对象的 **`act()`**方法开始动画。
```javascript
r(element).act(...)
```
> Notice：**`Element`** 对象被注册过后，便成为了拥有 **`act()`**方法的 **`Actor`** 对象，但您仍然可以调用它原来作为 **`Element`** 对象的所有属性与方法
关于 **`act()`**的详情，可以继续查看 👇
## act -> do
**`act()`**是我们最常用的方法。
对于每个 **`Actor`** 对象（即注册过的 **`Element`** 对象），我们都可以调用它的**`act()`**方法，以使他开始动画
```javascript
r(element).act(something_1)
```
上述代码，会使 **`element`** 开始 **`something_1`** 动画
> Notice：关于 **`something_1`** 的详情，后续在第三部分会详细讲解，当前可以把它直接理解为一个比如放大，缩小的动画。
继续调用，可以使对象在 **`something_1`** 结束后开始 **`something_2`** 动画
```javascript
r(element).act(something_1).act(something_2)
```
如此可以一直持续下去
```javascript
r(element).act(something_1)
.act(something_2)
.act(something_3)
.act(something_4)
.act(something_5)
.act(something_6)
// ...
```
以渐入渐出动画为例，假如我们需要这样一段动画：
小球透明度先变为 0 ，再变回 1
那么对应的代码是这样的
```javascript
r(circle).act(acts.OUT.OPACITY)
.act(acts.IN.OPACITY);
```
> 您可以在 **`Playground`** 中 [查看并运行全部代码](https://stackblitz.com/edit/vue-ufvvux)
>
> 或者（ 由于网络原因无法访问 Playground ）
>
> 也可以在 **`Github`** 中 [查看全部代码](https://github.com/r1ader/r_animate/blob/main/code/example_1.vue)
关于 **`act()`**方法接受的参数，可以继续查看 👇
## acts.OUT.OPACITY -> something
**`acts.OUT.OPACITY`** 是一个 **`act()`** 方法可以接受的参数。
**`acts`** 库中，预定义了许多动画，供开发者们直接调用。
如
* acts.OUT.OPACITY
* acts.OUT.BLUR
* acts.IN.SCROLL\_DOWN
* acts.EMPHASIZE.SHAKE\_X
* ...
等等，点击查看更多 [预定义动画](/ractjs_cn/acts-yu-ding-yi-dong-hua.md) 以及其使用说明。
当然，大部分情况需要自定义动画。所以接下来我们以 **`acts.OUT.OPACITY`** 的真实结构为例，来看看如何自定义动画。
```
console.log(acts.OUT.OPACITY)
// { opacity: '[1~0]' }
```
是的，定义一个动画实际上就这么简单。
```
{
act_key: act_value
}
```
这就是一个 **`Act`**的基本结构
**`act_key`** 是需要变化的 css 属性值，如 **`opacity`**, **`width`**, **`top`**等等
**`act_value`** 则是 初始值 **`start`** 和 结束值 **`end`** 以 `[` **`start`** `~` **`end`** `]` 的形式组合成的字符串。
> Notice: start 和 end 只能是数字，px，em，deg等单位需要接在中括号 `]` 的后面
下面是一些 **`Act`**示例：
```javascript
{ width: '[100~200]px' } // 宽度从 100px 增长至 200px
```
```javascript
{ transform: 'translate([0~100]px, [0~100]px)' }
// 从 0，0 位移至 100px，100px
```
```javascript
{
width: '[100~200]px',
transform: 'translate([0~100]px, [0~100]px)'
}
// 从 0，0 位移至 100px，100px 的同时，宽度从 100px 增长至 200px
```
```javascript
{
transform: 'translate([0~100]px, [0~100]px) scale([1~2])'
}
// 从 0，0 位移至 100px，100px 的同时，尺寸增大一倍
```
```javascript
{
transform: 'translate([0~100]px, [0~100]px) scale([1~2]) rotateZ([0~90]deg)'
}
// 从 0，0 位移至 100px，100px 的同时，尺寸增大一倍, 旋转90度
```
当然，如果您无需考虑初始值，**`act_value`** 也支持更为简洁的写法:
```javascript
{ width: '200px' } // 宽度从 element当前width值 变化至 200px
```
```javascript
{
transform: 'translate(100px, 100px)'
} // element 从 当前位置 位移至 100px，100px
```
除了 **`act_key`** 和 **`act_value`** 外，
您可能还需配置动画的时长 **`duration`**
```javascript
{
width: '[100~200]px' ,
duration: 3000
} // 3秒 内，宽度从 100px 增长至 200px
```
以及 补间动画 的插值形式 **`ease`**
```javascript
{
width: '[100~200]px' ,
duration: 3000,
ease: 'easeOutExpo'
} // 3秒 内，宽度从 100px 增长至 200px，先快后慢
```
> 关于 ease function ，您可以查看
除此以外 **ease** 也支持贝塞尔模式
```javascript
{
width: '[100~200]px' ,
duration: 3000,
ease: 'cubic-bezier(.09,.77,.89,.3)'
} // 3秒 内，宽度从 100px 增长至 200px，先快后慢再快
```
> 关于 贝塞尔曲线，您可以查看
更多配置项，您可以在 [api 文档](/ractjs_cn/api-wen-dang.md#pei-zhi-shu-xing) 中查看。
---
# 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/get_start.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.