Tweenjs 重复补间中的随机值

Question

探索 Tweenjs。我只想在舞台上随机移动一些圆圈。我知道所有补间都是 "deterministic," ，这意味着它使用预先计算的速度值。所以我有两个相互调用的函数。补间完成时调用第二个函数。不幸的是，我收到调用堆栈溢出错误。

我怎样才能让这个运行永远移动圆圈到随机位置？

function tweenPosition(circle) {
    var xPosition = Math.random() * stageWidth
    var yPosition = Math.random() * stageHeight

    createjs.Tween.get(circle, {loop: false}).wait(0).to({x: xPosition, y: yPosition}, 1000, createjs.Ease.sineInOut).onComplete(tweenPositionComplete(this, xPosition, yPosition))
}
function tweenPositionComplete(circle, x, y) {
    circle.x = x
    circle.y = y
    tweenPosition(this)
}

Answer 1

在 tweenPosition 函数内的 Tween 实例中，不使用 onComplete 方法，而是使用 call 方法，并将其添加到该 Tween 实例的末尾。

call (callback, [params], [scope])

对于您的代码：

.call(tweenPositionComplete, [circle, xPosition, yPosition])

您的 Tween 将如下所示：

createjs.Tween
        .get(circle, {loop:false})
        .wait(0)
        .to({x:xPosition, y:yPosition}, 1000, createjs.Ease.sineInOut)
        .call(tweenPositionComplete, [circle, xPosition, yPosition]);

在 this fiddle 中您可以看到它的实际效果。

另见：Tween Class (TweenJS API)

Tweenjs 重复补间中的随机值

Tweenjs randomized values in repeating tween

tweenjs