快速开始
write by @r1ader in 2022/3/28
简介
ract.js
使得我们可以以函数式编程的方式制作动画。
ract.js
中的绝大多数方法,都采用下图这种 Things
.do
(something
) 的形式
以最基本的透明度渐出动画为例:
若 element
为动画的主体 , 则实际代码为
让我们来着重看最后一行代码,
这里存在三个对象 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()
方法开始动画。
Notice:
Element
对象被注册过后,便成为了拥有act()
方法的Actor
对象,但您仍然可以调用它原来作为Element
对象的所有属性与方法
关于 act()
的详情,可以继续查看 👇
act -> do
act()
是我们最常用的方法。
对于每个 Actor
对象(即注册过的 Element
对象),我们都可以调用它的act()
方法,以使他开始动画
上述代码,会使 element
开始 something_1
动画
Notice:关于
something_1
的详情,后续在第三部分会详细讲解,当前可以把它直接理解为一个比如放大,缩小的动画。
继续调用,可以使对象在 something_1
结束后开始 something_2
动画
如此可以一直持续下去
以渐入渐出动画为例,假如我们需要这样一段动画:
小球透明度先变为 0 ,再变回 1
那么对应的代码是这样的
您可以在
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
的真实结构为例,来看看如何自定义动画。
是的,定义一个动画实际上就这么简单。
这就是一个 Act
的基本结构
act_key
是需要变化的 css 属性值,如 opacity
, width
, top
等等
act_value
则是 初始值 start
和 结束值 end
以 [
start
~
end
]
的形式组合成的字符串。
Notice: start 和 end 只能是数字,px,em,deg等单位需要接在中括号
]
的后面
下面是一些 Act
示例:
当然,如果您无需考虑初始值,act_value
也支持更为简洁的写法:
除了 act_key
和 act_value
外,
您可能还需配置动画的时长 duration
以及 补间动画 的插值形式 ease
关于 ease function ,您可以查看 https://easings.net
除此以外 ease 也支持贝塞尔模式
关于 贝塞尔曲线,您可以查看 https://cubic-bezier.com/
更多配置项,您可以在 api 文档 中查看。
Last updated