Не могу заставить Flex Transitions вести себя гладко - PullRequest
Новая
       46

Не могу заставить Flex Transitions вести себя гладко

1 голос
/ 04 августа 2011

Я пытаюсь понять, как заставить переходы Flex вести себя привлекательно гладко.Я не могу заставить их работать, пока они не выглядят крайне изменчивыми.

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

Есть две проблемы с этой реализацией, которые делают ее уродливой.Их можно увидеть, щелкнув по списку, чтобы оживить элементы.Эти проблемы:

  1. Когда элемент анимируется, но переходит в состояние «зависания», TextInput возвращается к небольшому размеру.Почему это так?

  2. Когда анимация элемента прерывается, он привязывается либо к наибольшему, либо к наименьшему размеру, а затем начинает анимацию, а не продолжает анимацию с текущего значения.Почему?

Любая помощь с благодарностью.

Спасибо, Фил TestApplication.mxml 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           initialize="init(event)"
           minWidth="900" minHeight="600">

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        protected function init(event:FlexEvent):void {
            var ac:ArrayCollection = new ArrayCollection();
            ac.addItem("A1");
            ac.addItem("B2");
            ac.addItem("C3");
            myList.dataProvider = ac;
        }
    ]]>
</fx:Script>

<s:List id="myList" width="410" height="350" itemRenderer="MyItemRenderer" requireSelection="true"/>
</s:Application>

MyItemRenderer.mxml 

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">
<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>

<s:transitions>
    <s:Transition fromState="*" toState="selected" id="itemHasBeenSelected" >
        <mx:AnimateProperty property="width" toValue="300" duration="3000" target="{textInput}" />
    </s:Transition>
    <s:Transition fromState="selected" toState="*" id="itemHasBeenUnselected">
        <mx:AnimateProperty property="width" toValue="100" duration="3000" target="{textInput}" />
    </s:Transition>
</s:transitions>

<s:Group width="100%">
    <s:Label text="{data}" color.selected="red" color.normal="black"/>
    <s:TextInput x="100" id="textInput" width="100"/>
</s:Group>

</s:ItemRenderer>

1 Ответ

1 голос
/ 04 августа 2011

Чтобы ответить на ваши вопросы, но в обратном порядке:

(2) Вы хотите использовать возможность autoReverse, которая является свойством искрового перехода. Вы можете сделать это, просто добавив autoReverse="true" к своим текущим переходам, но я бы также предложил упростить их до следующего отдельного перехода и использовать эффект Spark Resize вместо MX AnimateProperty: 

<s:Transition autoReverse="true">
  <s:Resize target={textInput}" duration="3000"/>
</s:Transition>

Затем, если вы определите значения для width на самом компоненте, переход позаботится об остальном: 

<s:TextInput x="100" id="textInput" width.normal="100" width.selected="300"/>

Это должно позаботиться о "выталкивании" между значениями состояний normal и selected. Что касается вопроса зависания:

(1) Если вы посмотрите видео Чета Хааза на Adobe TV об автореверсивных переходах , он заявляет, что одним из главных недочетов или недостатков в автореверсной архитектуре является то, что он обрабатывает только переходы из A-> B и B-> A. Если вы попытаетесь перейти в третье состояние (в вашем случае «завис»), автореверс не удастся. К сожалению, по крайней мере, у нас есть автореверс, который даже не был доступен в Flex 3.

ОДНАКО, есть обходной путь, по крайней мере, для простого ItemRenderer, который вы опубликовали: Попробуйте полностью удалить состояние hovered. 

<!--s:State name="hovered" /-->

До тех пор, пока вы не планируете делать что-то особенное в ItemRenderer во время состояния наведения, это должно работать нормально, и это избавит от всплесков между состояниями.

...