API Doc

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

Do Method

Do Method 为所有Actor对象可以调用的方法，如 element.r_animate(act.FADE_OUT) 中的 r_animate 就是一个最常用的 Do Method。

.r_animate()

r_animate方法会使一个Actor对象开始动画。

示例：

element.r_animate(act.FADE_OUT)

说明：

.r_animate() 接受一个Act对象作为参数，亦或是接受一个Act对象的简写字符串作为参数。

.r_then()

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

示例：

element.r_animate(act.FADE_OUT)
        .r_then(()=>{
                console.log('Can you see me ?')
        })

Act 对象

每个act对象都代表了一个动作，

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

动画属性

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

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

• 普通的css属性值 ：

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

• r_animate 语法：

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

一言以蔽之，r_animate 语法只是将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

Default：null

动画结束时调用的函数。

全局方法