格林索克时间线最大步骤不顺利

Question

我必须以不同的步骤进行剪辑路径过渡。然而，在 greensock 中链接to方法并不能提供我正在寻找的平滑度，因为它会在样式之间冻结几毫秒。这是我的代码：

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"将是较旧的语法。

希望这能解决您的问题