时间戳

首页 > 解决方案 > Tween - 无限重复而不从开始位置开始

javascript - Tween - 无限重复而不从开始位置开始

问题描述

我有一个 div，我想将它永远移动到向下位置，Tween repeat -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 循环来无限地运行它而不是使用重复？（这有效）

标签： javascriptthree.jstweengsap

解决方案

这不起作用，.repeat()因为动画总是从原始位置开始（并且您不能在不更改库的情况下影响此行为）。对于这样的用例，我会像您的代码示例中演示的那样手动为对象的位置设置动画。或者如果可能的话，选择非常低y的价值和很长的持续时间。这样，您可以定义单个补间。

推荐阅读