javascript - 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

tween 对象上有一个_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()