Tween和Thrive.js不可能进行多个动画

Question

我尝试使用threx.js和tween.js对圆圈进行动画动画，现在我无法动画一个以上的圆圈，只有最近添加的圆圈是动画的。我在这里的代码中错过了什么？并请告诉我如何一个接一个地称这些圈子。

var circle = createMesh(new THREE.CircleGeometry(6, 30, 1.9 * Math.PI, 1.9 * Math.PI));
        // used the function here
        scene.add(circle);
var circle1 = createMesh(new THREE.CircleGeometry(2, 10, 1.9 * Math.PI, 1.9 * Math.PI));
        scene.add(circle1);

var position = { x : 0, y: 0 };
        var target = { x : -10, y: 0 };
        var tween = new TWEEN.Tween(position).to(target, 3000);
tween.start();
            render();
            tween.easing(TWEEN.Easing.Elastic.InOut)
tween.onUpdate(function(){
    circle.position.x = position.x;
    circle.position.y = position.y;
});
tween.onUpdate(function(){
    circle1.position.x = position.x;
    circle1.position.y = position.y;
});
function render(time) {
            stats.update();
            circle.rotation.z = step += 0.008;

              requestAnimationFrame(render);

            TWEEN.update(time);
            webGLRenderer.clear();
            webGLRenderer.render(scene, camera);

        }

Answer 1

因为第二个tween.onUpdate回调OS覆盖第一个。
只需将代码添加到一个回调中即可。

tween.start();
render();
tween.easing(TWEEN.Easing.Elastic.InOut)
tween.onUpdate(function(){
    circle.position.x = position.x;
    circle.position.y = position.y;
    circle1.position.x = position.x;
    circle1.position.y = position.y;
});