javascript - Tween - 无限重复，无需从起始位置开始

Question

我有一个 div，我想将其永远移动到向下位置，Tween 重复 -1 从元素开始移动的位置开始。我希望它像循环一样继续。

var tlMain = new TimelineMax({repeat:0});
tlMain.to(group.position, 2 , {y: '-=10', ease: Power0.easeNone, repeat:-1});

按照上面的时间线，它的工作原理如下:

Start: 10
1st  : 10
2nd  : 10

所以每次转动时，

Start: 10
1st  : 0
2nd  : -10
3rd  : -20

是否可以使用 Tween 来实现此目的，还是需要在我的渲染方法中原始地实现此目的？

function render(...args) {
    group.position.y -= 10;

    requestAnimationFrame(render(...args))
}

或者我是否需要设置一个 for 循环来无限运行它而不是使用重复？ (这有效)

Answer 1

这对 .repeat() 不起作用，因为动画始终从原始位置开始(并且在不更改库的情况下无法影响此行为)。对于这样的用例，我将手动设置对象位置的动画，如代码示例中所示。或者如果可能的话，选择非常低的 y 值和较长的持续时间。通过这种方式，您可以定义单个补间。