具有重复功能的 GSAP 时间线正在打破可拖动的轻松流程

Question

我看到在时间轴中使用“repeat:-1”打破了可拖动行为的缓和流程。 https://codepen.io/GreenSock/pen/WNedayo?editors=1111

如果在上面的码笔代码中使用“repeat:-1”循环播放动画。观察拖动缓和正在中断。

.to("#Handle", {
  duration: 100,
  x: 1000,
  repeat:-1,
  ease: "none"
});

Answer 1

您需要在 right place 中重复：

handle.t1 = gsap.timeline({
  repeat: -1,
  onStart() {
    console.log('start');
  },
  onComplete() {
    console.log('complete');
  }
})
.to("#Handle", {
  duration: 100,
  x: 1000,
  ease: "none"
});

具有重复功能的 GSAP 时间线正在打破可拖动的轻松流程

GSAP timeline with repeat is breaking the draggable ease flow

javascript

draggable

gsap