> 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/get_start.md).
# 快速开始
## 简介
**`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) 中查看。