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

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

3 голосов
/ 20 апреля 2011

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

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

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

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

Надеюсь, что это способ связать эффект со вставкой и удалением элементов из VGroup? Есть идеи?

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

Ответы [ 2 ]

3 голосов
/ 22 апреля 2011

Мне кажется, я нашел правильный способ сделать это.Существует два события «AddedEffect» и «Удаленный эффект», которые вызываются, когда компонент добавляется как дочерний элемент 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>

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

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

2 голосов
/ 20 апреля 2011

Я поместил следующий код в 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]);
        }
...