déplacer la forme avec S: déplacer MXML

Question

Je suis en train de créer une animation avec un rectangle. Je veux que le rectangle se déplace dans une boucle de x = 150 à x = 50 et de nouveau à 150 et ainsi de suite.

Pour l'instant, je ne peux que déplacer le rectangle vers l'avant et il s'arrête après avoir déplacé 100px.

Des idées comment créer la boucle?

Voici ce que j'ai trouvé. pas beaucoup, je sais.

<s:Move id="moves" 
target="{rect2}" 
xBy="-150" 
duration="1000" 
easer="{sineEasing}"/> 

Answer 1

Essayez quelque chose comme ceci:

<mx:Sequence id="seq" repeatCount="0"> 
    <s:Move 
     target="{rect}" 
     xBy="150" 
     duration="1000" 
     easer="{sineEasing}"/> 
    <s:Move 
     target="{rect}" 
     xBy="-150" 
     duration="1000" 
     easer="{sineEasing}"/> 
</mx:Sequence> 

Comme vous pouvez le voir l'idée principale utilise Sequence effet ici pour forcer deux Move animations pour exécuter dans une ligne, puis en boucle cet effet Sequence en réglant sa propriété repeatCount à 0.

Answer 2

Je suggère d'utiliser tweenlite bibliothèque d'animation et ne pas utiliser les options d'animation intégrées de Flex ni MXML pour l'animation. Tweenlite a beaucoup plus d'options et est très facile à utiliser.

Avec le code ci-dessous, vous pouvez voir le fonctionnement de la bibliothèque. La fonction déplace votre objet rect à la position 65,117 avec Sine.easeIn assouplissement sur une période de 1 seconde.

TweenLite.to(rect, 1, {x:65, y:117, ease:Sine.easeIn}); 

Si vous utilisez ensuite quelques paramètres supplémentaires, vous pouvez créer une boucle, comme ceci:

handleAnimation(); 

private function handleAnimation(e:Event=null):void 
{ 
    var positionTo:Int = (rect.x == 150) ? 50 : 150; 
    TweenLite.to(rect, 1, {x:positionTo, ease:Sine.easeIn, onComplete:handleAnimation}); 
}