API 文档

(in progress) updated by @r1ader in 2022/3/31

全局方法

r()

r()接收一个或多个 DOM element{} 对象，返回注册后的 Actor{} 对象或 Actor{} 对象集合。

示例：

import { r } from 'ractjs'
const staff_1 = document.getElementById("Alice")
const actor_1 = r(staff_1)
actor_1.act({ opacity: 0 })

// Alice 将会隐身

// or

const staff_1 = document.getElementById("Alice")
const staff_2 = document.getElementById("Bob")

r(staff_1, staff_2).act({ opacity: 0 })

// Alice 与 Bob 将会同时隐身

Do 方法

Do Method 为所有Actor{}对象可以调用的方法，如 r(element).act(acts.OUT.OPACITY) 中的 act()就是一个最常用的 Do Method。

.act()

act()方法会使一个Actor{}对象开始动画。

示例：

r(element).act(act.OUT.OPACITY)

说明：

.act() 接受一个Act{}对象作为参数，当其接收一个普通对象时，会自动将其转化为Act{}对象

.then()

then() 方法会在动画播放完后执行对应代码

示例：

r(element).act(act.OUT.OPACITY)
        .then(()=>{
                console.log('Can you see me ?')
        })

Act 对象

每个Act{}对象都代表了一个动作，

Act{}对象的属性分为两种：动画属性，配置属性。

动画属性

Act{}对象的动画属性接受所有的css属性，如width，top，transform等等。

css属性所对应的值接受两种形式。

• 普通的css属性值 ：

{
    width: "200px" // 从当前宽度变化至200px
}

• ract.js语法：

{
    width: "[100~200]px" // 宽度从100px变化至200px
}

一言以蔽之，ract.js 规定的语法只是将css属性值中的数字，替换为 [ start ~ end ] 的形式。

Notice: start 和 end 只能是数字，所以 px，em，deg等单位需要接在中括号 ] 的后面

配置属性

Act{} 对象有许多自带的属性以供开发者们自定义动画的属性。

duration

Type：Number

Default：1000

动画的时长，单位为ms。

delay

Type：Number

Default：0

动画开始前的延迟，单位为ms。

loop

Type：Boolean / Number / String

Default：False

动画是否循环。

False表示不循环，True表示循环。

若loop被设置为 Number ，则表示循环的次数。

Notice：当loop被设置为2时，除了初始的那次，动画将重复2次，所以总共会执行3次。

loop 还可以被设置为 "alternate" 表示动画的循环顺序会正反交替进行。

次数和alternate可以同时使用：

{
    width: "100px",
    loop: "10 alternate"
}

reverse

Type：Boolean

Default：False

动画是否反向。设置为True，等于将 "[100~200]px" 变为 "[200~100]px"

ease

Type：String

Default："easeOutExpo"

补间动画的插值形式，默认 "easeOutExpo" 表示先快后慢。

将 ease 设置为 "Linear" 则表示动画匀速进行。

关于更多 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/

callback

Type：Function / Array [ Act { } ]

Default：null

动画结束时调用的函数。

当 callback 为一个 Act 对象列表时，callback 内的 Act 会在动画结束后被加入 Actor 的执行队列，这种用法可以用来构造 复合 Act{}。