Greensock时间轴最大步数不平稳

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

希望这可以解决您的问题