Как мне сгладить переход между этими двумя состояниями в flex / flashbuilder? - PullRequest
Новая
       31

Как мне сгладить переход между этими двумя состояниями в flex / flashbuilder?

1 голос
/ 01 февраля 2011

У меня есть предмет, в котором есть два состояния, лучше всего описанные как открытые и закрытые, и они выглядят так:

closed

и

open

И что я хотел бы сделать, это сгладить переход между одним состоянием и другим, эффективно путем плавной интерполяции между двумя точками (синус), чтобы переместить блок нижнего колонтитула / кнопки и затем исчезнуть в круговая диаграмма.

Однако, по-видимому, это вне моего понимания и после того, как я боролся с неспособностью сделать это в течение часа +, я публикую это здесь: D

Итак, мой переходный блок выглядит следующим образом 

<s:transitions>
    <s:Transition id="TrayTrans" fromState="*" toState="*">
        <s:Sequence>
            <s:Move duration="400" target="{footer}" interpolator="{Sine}"/>
            <s:Fade duration="300" targets="{body}"/>   
        </s:Sequence>       
    </s:Transition>

    <s:Transition>
        <s:Rotate duration="3000" />
    </s:Transition>
</s:transitions>

, где {body} относится к круговой диаграмме, а {footer} относится к блоку нижнего колонтитула / кнопки.

Однако это не работает, поэтому я не знаю, что делать ...

Дополнительная информация, которая может быть полезна:

Блок тела всегда имеет фиксированную высоту (возможно, он используется для переменных Xby в некоторых эффектах?).

Он должен работать в обоих направлениях.

Oh, и блок Sine определен выше в объявлениях как <s:Sine id="Sine">.

Дополнительно! Как бы я мог настроить круговую диаграмму на постоянное вращение, используя эти переходные блоки? (это может произойти без надписей) Или это неправильный путь, поскольку это не переход как таковой?

Я получаю эффект, когда круговая диаграмма медленно вращается без меток до выбора кнопки ниже, но при выделении вращение останавливается и появляются метки ...

Заранее большое спасибо!

И извинения за оттенки серого, но я не могу определиться с цветовой схемой. Любые предложения приветствуются.

Ответы [ 2 ]

2 голосов
/ 01 февраля 2011

Если вы не возражаете против написания ActionScript, это становится довольно просто с помощью функции as3.

Вам нужно будет сделать следующее: 

public function doTransition():void
        {
            var move:Move= new Move();
            move.target=footer;
            move.yFrom = 0;//current position
            move.yTo = 400;//or whatever is the final position of the footer
            move.duration=500;//duration in milliseconds

            var resize:Resize=new Resize();
            resize.target=body;
            resize.heightFrom=0;//or whatever is initial height
            resize.heightTo=400;//or whatver is the final height
            resize.duration=500;

            var fadeIn:Fade =new Fade();
            fadeIn.target = pieChart;//the id of the piechart
            fadeIn.alphaFrom =0;
            fadeIn.alphaTo = 1;
            fadeIn.duration =500;

            move.play();
            resize.play();
            fadeIn.play();
        }

Для этого вам понадобится код для поворота круговой диаграммы. Для этого вы можете использовать таймеры и преобразования вращения.

0 голосов
/ 26 февраля 2011

Чтобы облегчить вашу анимацию, я бы рекомендовал использовать TweenLite , чтобы выполнить работу.В итоге вы будете писать меньше ActionScript.

...