“补偿”倾斜效果

这是一个特殊方法，你可以通过 onUpdate 来应用它，使补间动画以旧版 GSAP 2 中的方式渲染倾斜效果skewType: "compensated"注意，这会影响元素的 scaleX/scaleY（因此称为“补偿”）！此方法假定倾斜是基于角度的，并且仅在 GSAP 3 中有效。这不是一个“官方支持”的方法。

function compensatedSkew() {
  var targets = this.targets(),
    i = targets.length,
    DEG2RAD = Math.PI / 180,
    target,
    scaleY,
    scaleX,
    cache;
  while (i--) {
    target = targets[i];
    cache = target._gsap;
    scaleY = cache.scaleY;
    scaleX = cache.scaleX;
    cache.scaleY *= Math.cos(parseFloat(cache.skewX) * DEG2RAD);
    cache.scaleX *= Math.cos(parseFloat(cache.skewY) * DEG2RAD);
    cache.renderTransform(1, cache);
    cache.scaleY = scaleY;
    cache.scaleX = scaleX;
  }
}

// usage:
gsap.set(target, { skewX: -30, onUpdate: compensatedSkew });

通知

消息

“补偿”倾斜效果