GSAP教程之gsap.config与gsap.defaults详解

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
})