Как объединить эффект «Перемещение» и «Поворот» в Flex 3?

Question

Я понимаю, что вы можете сделать один из каждого эффекта, установить одну и ту же цель и нажать .play();, но это приводит к странным результатам (, подтверждено Adobe, исправлено в Flex 4 ).

Я пытаюсь заставить объект двигаться от верхней части экрана к нижней, пока он вращается вокруг своего собственного центра.При вызове независимо оба этих эффекта работают отлично.При вызове вместе объект всегда вращается вокруг верхнего левого угла.Я даже попытался поместить их в тег <Parallel> безуспешно.Кто-нибудь придумал обходной путь?

Answer 1

Я нашел временное решение.

Проблема (как упоминалось в моем ОП и в комментарии к Дэвиду) состоит в том, что после того, как эффект Rotate завершил один полный цикл, если у него было repeatCount=0, чтобы продолжать бесконечно, это значения originX и originY получил сброс к точке регистрации (сверху, слева), что сделало весь вид шатким.

Хитрость заключается в том, чтобы не позволить ему завершить полный цикл вращения. Если у вас есть

<mx:Image id="myImage" source="images/someImage.png" />
<mx:Rotate originX="{myImage.width/2}" originY="{myImage.height/2}"
    angleFrom="0" angleTo="360" duration="2000" target="{myImage}" />

... тогда вам нужно что-то вроде ...angleTo="360<em>*100</em>"... AND ...duration="2000<em>*100</em>...

Если установить для свойства angleTo что-то очень высокое, он никогда не завершит один эффект Поворота до того, как вы удалите или перезапустите его, и, следовательно, не сбросит значения originX и originY и умножение duration с тем же коэффициентом, что и angleTo, вы сохраните ту же скорость вращения, на которую надеялись.

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

Answer 2

Вам нужно включить Move и Rotate внутри экземпляра Parallel, чтобы заставить их работать одновременно. Кроме того, чтобы эффект поворота вращался вокруг центра компонента, необходимо установить свойства originX и originY в центр вашей цели (свойства originX и originY определяют центральную точку вращения.)

Следующий пример прекрасно работает:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id='effectTarget' source="assets/waterfall.jpg" width="390" height="292" scaleContent="true" autoLoad="true"/>
<mx:Parallel duration="5000" id="effectParallel">
    <mx:Move xFrom="0" xTo="500" yFrom="0" yTo="500" target="{effectTarget}"/>
    <mx:Rotate originX="195" originY="149" angleFrom="0" angleTo="360" target="{effectTarget}"/>
</mx:Parallel>
<mx:Button x="856" y="27" label="Go" click="effectParallel.play()"/>