0
点赞
收藏
分享

微信扫一扫

GSAP教程之gsap.config详解

陆佃 2022-03-25 阅读 65

gsap.config()用来配置GSAP的一些全局设置,如autoSleep, force3Dunits。 和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%距离,这样大大的方便了开发。

举报

相关推荐

0 条评论