VGroup: как сделать так, чтобы новый элемент отображался плавно (изменение размера) при добавлении / удалении

При добавлении / удалении элементов в / из VGroup мне нужно, чтобы это происходило плавно, измените размер элемента. Я считаю, что должен использовать эффекты перехода. Но как это сделать?

  1. на уровне элемента (элемента)?
  2. на уровне V-группы?
  3. Должен ли я использовать вместо этого DataGroup и делать это на уровне ItemRenderer?

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

Например, я определил состояние "смерть", которое изменяет размер элемента до высоты=0. Но затем, после того, как он уменьшился, он должен каким-то образом уведомить VGroup, чтобы удалить его или удалить себя из VGroup. Это кажется излишне сложным.

То, что я надеюсь, - это способ связать эффект с вставкой и удалением элементов из V-группы? Есть идеи?

Заранее спасибо, Нуно

2 3
effects

2 ответа:

Я считаю, что нашел правильный способ сделать это. Существует два события "addedEffect" и "removedEffect", которые вызываются при добавлении компонента в качестве дочернего элемента VGroup.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         width="100%"
         addedEffect="{addedEffect}" 
         removedEffect="{removedEffect}" 
         clipAndEnableScrolling="true" xmlns:gui="gui.*">

  <fx:Declarations>

    <s:Sequence id="addedEffect" targets="{[this, callWindow]}">
      <s:Move duration="300" xTo="0" target="{callWindow}" />
    </s:Sequence>

    <s:Sequence id="removedEffect" targets="{[this, callWindow]}">
      <s:Move duration="300" xFrom="0" xTo="300" target="{callWindow}" />
      <s:Scale target="{this}"
               scaleYFrom="1.0" scaleYTo="0.0" 
               duration="300"/>
    </s:Sequence>

  </fx:Declarations>

  <gui:CallWindow id="callWindow"
                     width="100%" minHeight="0" x="300" />

</s:Group>

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

Спасибо, Нуно

3

Я поместил следующий код в HGroup (будет точно таким же для VGroup), чтобы сделать эффект изменения размера, когда компоненты добавляются в панель/контейнер, может указать вам правильное направление. Вы можете увидеть его работу по следующей ссылке:

Http://bbishop.org/blog/?p=448 

public class ComboContainer extends HGroup
    {
        private var resizeEffect:Resize;
        private var fadeEffect:Fade;

        private var defaultHeight:int = 50;

        public function ComboContainer()
        {
            super();
            this.height 0;
            this.verticalAlign = flashx.textLayout.formats.VerticalAlign.MIDDLE;    
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
        }

        private function onCreationComplete(event:Event):void{

            resizeEffect = new Resize();
            resizeEffect.heightFrom = 0;
            resizeEffect.heightTo = defaultHeight;
            resizeEffect.duration = 200;

            fadeEffect = new Fade();
            fadeEffect.alphaFrom = 0;
            fadeEffect.alphaTo = 1;
            fadeEffect.duration = 200;

            fadeEffect.play([this]);
            resizeEffect.play([this]);
        }
2