Как заставить объект двигаться шаг за шагом в threejs / tween.js - PullRequest
Новая
       59

Как заставить объект двигаться шаг за шагом в threejs / tween.js

0 голосов
/ 30 августа 2018

Я хочу, чтобы мой цилиндр (пионы в коде) перемещался от случая к случаю к объекту на доске, которую я создаю. У меня есть этот код:

a: начало
индекс: объект 

attachEvent(_this, index,a) {
if(index>=a){

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
for ( var i = a; i <= index; i++) {
  _this.stepByStep(_this,i)
}
}, false)
}else{

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
//nothing now
}, false)
}

}

stepByStep(_this,i)
{
_this.tween = new TWEEN.Tween(this.pions.position)
        .to({
        x:  _this.cases[i].position.x,
        y: _this.cases[i].position.y,
        z: 5},1000)
        .start();
}

Когда я запускаю свой код, я не знаю почему, но пионы идут прямо к объекту.

1 Ответ

0 голосов
/ 02 сентября 2018

Я не пользователь Tween.js ( TweenJS здесь!), Но я подозреваю, что он также используется.

Вы создаете новую анимацию в цикле for на каждой итерации, а не добавляете новые позиции. По сути, это создание нескольких отдельных анимаций, которые запускаются одновременно и работают одновременно, но все они влияют на один и тот же объект. Хороши шансы, что последним твином станет тот, кто подаст заявку.

EDIT Очевидно, это , как работает Tween.js ? Для анимации можно использовать только один вызов to (). Мое оригинальное решение работает для TweenJS , но не для Tween.js, который использует ваш пример:

ОРИГИНАЛЬНОЕ РЕШЕНИЕ ТОЛЬКО РАБОТАЕТ ДЛЯ CREATEJS / TWEENJS:

Создайте Tween один раз и добавьте вызовы to() в цикл: 

var tween = new createjs.Tween(this.pions.position);
for ( var i = a; i <= index; i++) {
  _this.stepByStep(tween, _this.cases[i].position); // Arguments changed!
}

function stepByStep(tween, position)
{
    tween.to({
        x: position.x,
        y: position.y,
        z: 5
    }, 1000);
}

Это делает одну анимацию движения и добавляет to() вызовов для каждой позиции. Я также немного упростил аргументы, чтобы сделать функцию немного чище (передача всей области видимости немного грязна). Вы можете очистить его, как хотите.

ОБНОВЛЕННОЕ РЕШЕНИЕ

Используя Tween.js, кажется необходимым создать новую анимацию движения для каждой новой анимации, но вместо того, чтобы создавать их все сразу, вы должны chain их и запустить только первую анимацию движения.

Вот некоторый псевдокод: 

var firstTween = new Tween.Tween(obj)
var earlierTween = firstTween;
(loop) {
  var tween = new TWEEN.Tween(obj);
  tween.to({params});
  earlierTween.chain(tween);
  earlierTween = tween;
}
firstTween.start();

Вот быстрая скрипка, которую я бросил вместе. Слой рисования использует EaselJS, но анимация - Tween.js. https://jsfiddle.net/0mh6kj5y/8/

Я также отметил, что вы ссылались на this.pions в своей функции, тогда как все остальное использует _this для области видимости.

Надеюсь, это поможет!

...