Tweening с анимацией TimeLine

Question

Легко для вас, ребята, но новые для меня. У меня есть анимированный ходячий персонаж, называемый mcPlayer. Внутри этой временной шкалы у меня есть метки фрейма в различных анимированных состояниях «walkLeft», «walkRight» и «Idle». Ходячие анимации от него идут в одном месте. Я хочу иметь возможность использовать кнопки для перемещения персонажа с помощью ActionScript к различным объектам на сцене и иметь соответствующую анимационную игру по мере ее перемещения. Таким образом, самый прямой способ, который я мог бы сделать, это ...

import com.greensock.*; 

btnRight.addEventListener(MouseEvent.CLICK, moveRight); 
btnLeft.addEventListener(MouseEvent.CLICK, moveLeft); 

function moveRight(Evt:MouseEvent):void{ 
TweenLite.to(mcPlayer,2,{x:450}); 
mcPlayer.gotoAndPlay("walkingRight"); 
} 
function moveLeft(Evt:MouseEvent):void{ 
TweenLite.to(mcPlayer,2,{x:450}); 
mcPlayer.gotoAndPlay("walkingLeft"); 
} 

Я пробовал разные команды на временной шкале mcPlayer, например, помещая stop(); в начале каждого анима. Я попытался поставить gotoandplay(); в конце каждой анимации, так что это будет идти в начало и цикл. Я хотел бы использовать временную шкалу как можно меньше.

Как ... 1. Иметь анимацию играть непрерывно, пока твин находится в движении 2. Иметь анимации стоп, когда он достиг своего назначения и, наконец, анима «холостой ход» играть после того, как mcPLayer имеет достиг своей цели.

Answer 1

Чтобы закодировать анимацию, вы будете тестировать последний кадр анимации и затем прокручивать назад, вы можете сделать это в течение тренда с параметром onUpdate и использовать onUpdateParams для передачи любых данных, необходимых для обновления. Например, метка анимации и последний кадр анимации.

Если вы хотите что-то сделать после завершения анимации, например, для изменения анимации бездействия, вы должны использовать параметр onComplete.

Вот пример того, что вы могли бы сделать:

btnRight.addEventListener(MouseEvent.CLICK, moveRight); 
btnLeft.addEventListener(MouseEvent.CLICK, moveLeft); 

function moveRight(Evt:MouseEvent):void{ 

    // lastframe should be replaced with whatever the frame the walk right animation ends on. 
    TweenLite.to(mcPlayer, 2, {x:450, onUpdate:updateHandler, onUpdateParams:['walkingRight', lastFrame], onComplete:idleHandler); 
    mcPlayer.gotoAndPlay("walkingRight"); 
} 
function moveLeft(Evt:MouseEvent):void{ 

    // lastframe should be replaced with whatever the frame the walk left animation ends on. 
    TweenLite.to(mcPlayer, 2, {x:10, onUpdate:updateHandler, onUpdateParams:['walkingLeft', lastFrame], onComplete:idleHandler); 
    mcPlayer.gotoAndPlay("walkingLeft"); 
} 


function updateHandler(loopLabel:String, lastFrame:int):void 
{ 
    if (mcPlayer.currentFrame == lastFrame) 
    { 
     mcPlayer.gotoAndPlay(loopLabel); 
    } 

} 

function idleHandler():void 
{ 
    mcPlayer.gotoAndPlay("idle"); 
    // this is also where you'd do anything else you need to do when it stops. 

} 

Я не знаю, как вы ваше содержание настроить, я только предполагаю, что у вас все анимации на временной шкале mcPlayer с этикетками для каждой анимации, основанной на том, что вы сказали.

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