Пример управления анимацией с помощью Ticker в CreateJS

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

var index = 0;

function move(){
    index++;
    if (index < path.length) {
        createjs.Tween.get(person)
        .to({x:gridSize * path[index][0] - pathOffset,y:gridSize * path[index][1] - pathOffset})
        .call(move);
    }
}
move();

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(event){
    createjs.Tween.tick(1);
    stage.update();
});

Этот код, кажется, только прыгает между путевыми точками, а не анимируется вообще. Любые идеи, что я могу делать неправильно, или любой код/учебники, которые могут помочь?


tween ticker createjs easeljs
person Gary Willoughby    schedule 10.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно добавить продолжительность (в миллисекундах) к вашей анимации, иначе по умолчанию она будет равна 0, это вызовет «скачок», например: 500 на полсекунды

instead of: .to({x:..., y:...})
use:        .to({x:..., y:...},500)

И второе: вам НЕ НУЖНО вызывать createjs.Tween.tick(1);, это обычно вызывается автоматически классом Tween.

Вот некоторая помощь и несколько небольших примеров: http://www.createjs.com/Docs/TweenJS/classes/Tween.html

Расширенные примеры: https://github.com/CreateJS/TweenJS/tree/master/examples< /а>

person olsn    schedule 12.03.2013
comment
Спасибо, но я хочу контролировать тики вручную, потому что путевые точки не находятся на одинаковом расстоянии друг от друга, поэтому, если бы я использовал таймер, спрайт был бы быстрее через путевые точки, которые находятся дальше друг от друга. - person Gary Willoughby; 12.03.2013
comment
Если ваши путевые точки не находятся на одинаковом расстоянии друг от друга, вы должны рассчитать расстояние до следующей путевой точки и установить продолжительность на основе расстояния. В любом случае вы ДОЛЖНЫ установить продолжительность, если вы не хотите, чтобы ваш человек прыгал - как TweenEngine должен знать, насколько нужно продвигаться, если продолжительность не установлена? Если вы все еще хотите контролировать это самостоятельно, вы можете использовать .get(person,{useTicks:true}).to(...), тогда продолжительность должна быть определена в тиках, а не в секундах. Но имхо самый простой способ - получить расстояние и умножить его на какой-то коэффициент скорости. - person olsn; 12.03.2013
comment
Спасибо, моя проблема была именно в этом, мне нужно было указать продолжительность анимации. Я пересчитываю это на основе расстояния до путевых точек, и все работает отлично! та. :) - person Gary Willoughby; 13.03.2013