GSAP教程之gsap.config详解
gsap.config()
用来配置GSAP的一些全局设置,如 autoSleep
, force3D
和 units
。 和 gsap.defaults()
不同,gsap.defaults()
是用来设置tween的默认参数。
例子:
gsap.config({
autoSleep: 60,
force3D: false,
nullTargetWarn: false,
units: {left: "%", top: "%", rotation: "rad"}
})
autoSleep
每隔多少帧检测,是否需要停止时钟(ticker)以节省系统资源或电池电量。默认是120帧。
force3D
GSAP会自动尝试通过在动画期间应用具有三维组件(如 translate3d()
而不是 translate()
)的变换来激活GPU加速,从而最大化渲染性能,然后在最后切换回2D变形(如果可能),以节省GPU内存。这就是默认值 auto
。设置为 false
则不会自动转换使用 translate3d
而一直使用 translate
(2D变形)。 设置 true
则始终使用 translate3d
,在最后也不会切换回2D变形,这种方式相比比较消耗GPU内存。
nullTargetWarn
当要执行的动画对象不存在时,抛出对象不存在的警告提示(在浏览器的console里显示)。默认值为 true
, 抛出警告。 设置 false
后则不抛出警告。
units
设置默认的样式变量单位。数字单位默认 px
, 角度单位默认 deg
。
例子:
gsap.to("div", {
duration: 5,
left: 100
});
这里div会向右运动100px, 如果移动100%则需要这样处理:
gsap.to("div", {
duration: 5,
left: "100%"
});
如果项目中left 运动都是以百分比的形式处理,则可以通过设置 units
, 如下:
gsap.config({
units: {left: "%"}
})
这时则可以直接使用 left: 100
移动100%距离,这样大大的方便了开发。
GSAP教程之gsap.defaults 详解
设置tween参数,被所有tween继承, 如果tween设置了 inherit: false
, 则不继承 defaults
设置的参数。
例子:
gsap.defaults({
duration: 5,
ease: "power2.in"
})
gsap.to("div", {
x: 100
})
该动画就继承了 duration
和 ease
的设置。如果设置 inherit:false
, 则不继承,如下:
gsap.to("div", {
x: 100,
inherit: false
})