easeljs анимации вперед и реверс в холст

Question

нужен совет по easeljs спрайтов анимации, от demo they provided

Как сделать прямой и обратный бегущего парня в полотне, от случая тикер?

Answer 1

Движение просто увеличивает положение x.

// New position is the current position, plus 150 pixels 
var position = grant.x + 150 * deltaS; 
// The delta is just a multiplier to keep the movement independent of the framerate. 

// Then "Grant" is set to the new position, unless the position is past 
// the right side of the canvas, in which case it is set to the left side again 
// (to wrap) 
grant.x = (position >= w + grantW) ? -grantW : position; 

Чтобы изменить анимацию, вы можете обратить математику

var position = grant.x - 150 * deltaS; // Move backwards 
grant.x = (position < 0) ? w : position; // Put on far right 

Тогда вы можете перевернуть спрайт горизонтально, чтобы заставить его пойти другим путем.

grant.scaleX = -1; 

Вы можете использовать тот же подход со всем остальным. Обратите внимание: в демонстрационном примере спрайт действительно не перемещается относительно земли, фона и т. Д., Он просто настроен как эффект параллакса. Возможно, вы захотите использовать другой подход, если хотите сделать что-то более интерактивным.