快速开始
write by @r1ader in 2022/3/28
简介
ract.js 使得我们可以以函数式编程的方式制作动画。
ract.js 中的绝大多数方法，都采用下图这种 Things.do(something) 的形式
以最基本的透明度渐出动画为例：
若 element 为动画的主体 , 则实际代码为
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
在 ract.js 中， 只有 注册过的 DOM Element 对象，才能开始动画。
DOM Element 对象很好理解，即
原生的
doument.getElementById,vue中的
this.$refs...
等方法获取到的对象，
那么注册过的又是什么呢？
请想象一下，在一个演艺片场中，存在很多人员:
演员，导演，助理等等，但能上场演出的，只有演员。
所以相应的，一个普通的 Element 对象，也需要以 r 包裹，注册为Actor，才能开始动画。
在注册之后，您就可以调用 Element 对象的 act()方法开始动画。
r(element).act(...)Notice：
Element对象被注册过后，便成为了拥有act()方法的Actor对象，但您仍然可以调用它原来作为Element对象的所有属性与方法
关于 act()的详情，可以继续查看 👇
act -> do
act()是我们最常用的方法。
对于每个 Actor 对象（即注册过的 Element 对象），我们都可以调用它的act()方法，以使他开始动画
r(element).act(something_1)上述代码，会使 element 开始 something_1 动画
Notice：关于
something_1的详情，后续在第三部分会详细讲解，当前可以把它直接理解为一个比如放大，缩小的动画。
继续调用，可以使对象在 something_1 结束后开始 something_2 动画
r(element).act(something_1).act(something_2)如此可以一直持续下去
r(element).act(something_1)
.act(something_2)
.act(something_3)
.act(something_4)
.act(something_5)
.act(something_6)
// ...以渐入渐出动画为例，假如我们需要这样一段动画：
小球透明度先变为 0 ，再变回 1
那么对应的代码是这样的
r(circle).act(acts.OUT.OPACITY)
.act(acts.IN.OPACITY);您可以在
Playground中 查看并运行全部代码或者（ 由于网络原因无法访问 Playground ）
也可以在
Github中 查看全部代码
关于 act()方法接受的参数，可以继续查看 👇
acts.OUT.OPACITY -> something
acts.OUT.OPACITY 是一个 act() 方法可以接受的参数。
acts 库中，预定义了许多动画，供开发者们直接调用。
如
acts.OUT.OPACITY
acts.OUT.BLUR
acts.IN.SCROLL_DOWN
acts.EMPHASIZE.SHAKE_X
...
等等，点击查看更多 预定义动画 以及其使用说明。
当然，大部分情况需要自定义动画。所以接下来我们以 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示例：
{ width: '[100~200]px' } // 宽度从 100px 增长至 200px{ transform: 'translate([0~100]px, [0~100]px)' }
// 从 0，0 位移至 100px，100px {
width: '[100~200]px',
transform: 'translate([0~100]px, [0~100]px)'
}
// 从 0，0 位移至 100px，100px 的同时，宽度从 100px 增长至 200px{
transform: 'translate([0~100]px, [0~100]px) scale([1~2])'
}
// 从 0，0 位移至 100px，100px 的同时，尺寸增大一倍{
transform: 'translate([0~100]px, [0~100]px) scale([1~2]) rotateZ([0~90]deg)'
}
// 从 0，0 位移至 100px，100px 的同时，尺寸增大一倍, 旋转90度当然，如果您无需考虑初始值，act_value 也支持更为简洁的写法:
{ width: '200px' } // 宽度从 element当前width值 变化至 200px{
transform: 'translate(100px, 100px)'
} // element 从 当前位置 位移至 100px，100px除了 act_key 和 act_value 外，
您可能还需配置动画的时长 duration
{
width: '[100~200]px' ,
duration: 3000
} // 3秒 内，宽度从 100px 增长至 200px以及 补间动画 的插值形式 ease
{
width: '[100~200]px' ,
duration: 3000,
ease: 'easeOutExpo'
} // 3秒 内，宽度从 100px 增长至 200px，先快后慢关于 ease function ，您可以查看 https://easings.net
除此以外 ease 也支持贝塞尔模式
{
width: '[100~200]px' ,
duration: 3000,
ease: 'cubic-bezier(.09,.77,.89,.3)'
} // 3秒 内，宽度从 100px 增长至 200px，先快后慢再快关于 贝塞尔曲线，您可以查看 https://cubic-bezier.com/
更多配置项，您可以在 api 文档 中查看。
Last updated