Tween.js重复

Question

在tween.js中，有没有一种内置的方法来知道补间何时重新启动？或者是知道你当前在哪个# repeat上的一种方式？

          var foo = {}// some object
          var bar = {}// some other object

          var tween = new TWEEN.Tween(foo, fooGroup);

          tween.to(bar, 8000)
            .interpolation(TWEEN.Interpolation.CatmullRom)
            .repeat(100)
            //.onRestart(()=>{ 
            // not a real method but it will be soon 
            // if someone doesn't have a better idea
            //})
            .onComplete(()=>{
              console.log('tween done');// only fires once when tween has
                                        // repeated 100 times (which is expected)

            })
            .onUpdate(()=>{
              // do some stuff where I'd like to
              // know if the tween just reset or not
            })
            .easing(TWEEN.Easing.Cubic.InOut)
            .start()

Answer 1

补间对象上有一个_repeat属性，该属性在每次调用update时都会递减，因此这或多或少是有效的：

var cnt = 100 // or whatever the # of repeats is
tween.onUpdate(() => {
  if (tween._repeat !== cnt) {
    cnt = tween._repeat;
    console.log('restarting..');
  }
});

Answer 2

是的，tween.js可以通过.onRepeat(function)在everyRepeat上发出事件。

您可以在everyRepeat上增加一个计数器，以跟踪重复索引。

补间文档提到：Tween doc

当补间刚完成一次重复并将开始另一次重复时，将执行

onRepeat。补间对象作为第一个参数传入。

var foo = {} // some object
var bar = {} // some other object
let rCount = 0
var tween = new TWEEN.Tween(foo, fooGroup);

tween.to(bar, 8000)
    .interpolation(TWEEN.Interpolation.CatmullRom)
    .repeat(100)
    .onRepeat((info) => {
        // info display bar on repeat start
        rCount++
        // other stuff...
    })
    .onComplete(() => {
        console.log('tween done'); // only fires once when tween has
        // repeated 100 times (which is expected)

    })
    .onUpdate(() => {
        // do some stuff where I'd like to
        // know if the tween just reset or not
    })
    .easing(TWEEN.Easing.Cubic.InOut)
    .start()