css - Greensock timelinemax steps不流畅

Question

我必须在不同的步骤中进行剪辑路径转换。然而，在 greensock 中将 链接到 方法并没有提供我正在寻找的平滑度，因为它在样式之间卡住了几毫秒。这是我的代码:

const box = document.getElementById('box')

this.timeline = new TimelineMax({})
  .to(box, 0, { clipPath: 'polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%)' })
  .to(box, 1, { clipPath: 'polygon(20% 0%, 20% 0%, 0% 100%, 0% 100%, 0% 100%, 0% 0%)' })
  .to(box, 1, { clipPath: 'polygon(40% 0%, 40% 0%, 20% 100%, 20% 100%, 0% 100%, 0% 0%)' })
  .to(box, 1, { clipPath: 'polygon(100% 0%, 100% 0%, 80% 100%, 80% 100%, 0% 100%, 0% 0%)' })

Answer 1

你没有定义缓动，所以它使用默认的缓动，如果我是正确的，它是 Power1.easeOut，这将导致动画之间的暂停。

您可以通过设置覆盖默认的缓动

TweenLite.defaultEase : Power0.easeNone

或者这样写你的时间表:

this.timeline = new TimelineMax({})
  .to(box, 0, { clipPath: 'polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%)' }, ease:"none")
  .to(box, 1, { clipPath: 'polygon(20% 0%, 20% 0%, 0% 100%, 0% 100%, 0% 100%, 0% 0%)' }, ease:"none")
  .to(box, 1, { clipPath: 'polygon(40% 0%, 40% 0%, 20% 100%, 20% 100%, 0% 100%, 0% 0%)' }, ease:"none")
  .to(box, 1, { clipPath: 'polygon(100% 0%, 100% 0%, 80% 100%, 80% 100%, 0% 100%, 0% 0%)' }, ease:"none")

ease:"none"是新的 GSAP 3 语法。 ease:"Power0.easeNone"将是较旧的语法。

希望这能解决您的问题