Question

我正在尝试创建多个级联补间，这意味着它们应该一个接一个地发生。

我的问题是，它必须足够通用才能使用任意数量的对象。

我的主要目标是使组中的所有框都从“ LayerHeight +2”降到“ LayerHeight”。现在，这只是渲染我的盒子而没有任何动画或任何控制台错误。

...
mosaicGroup = recipe.boxGroup;
setupTween(mosaicGroup);
//mosaicGroup is 1 of 3 groups in recipe.recipe
scene.add(recipe.recipe);
animate(renderer, recipe);
...

function setupTween(mosaicGroup) {
var target = {z: 0};
var current = {z: 0};
var tweenArray = [];
var index = 0;
target.z = mosaicGroup.children[0].position.z;
current.z = mosaicGroup.children[0].position.z + 2;
// remove previous tweens if needed
TWEEN.removeAll();

mosaicGroup.children.forEach(function (box) {
  var tween = new TWEEN.Tween(current)
    .to(target, 2000)
    .delay(2000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(function () {
      box.position.z = target.z;
    });
  tweenArray.push(tween);
});
if (tweenArray.length > 1) {
  tweenArray.forEach(function (tweenInstance) {
    if (tweenArray[index + 1] !== undefined) {
      tweenArray[index].chain(tweenArray[index + 1]);
    }
    index++;
  });
  index = 0;
}
// start the first
tweenArray[0].start();
}

function animate(renderer, recipe) {
    renderer.render(scene, camera);

    renderId = requestAnimationFrame(function () {
        return animate(renderer, recipe);
    });
    controls.update();
    TWEEN.update();
}

是否可以以通用方式定义多个补间？

0 个答案: