Flex 3のTileListでエフェクトを移動する

Question

これまでに行ったサンプルコードを提供しています。私がしたいのは、私がダウンボタンタイルリストをクリックするとゆっくりとスクロールしてデータを変更するときです。下のボタンをクリックするだけで効果は変わりますが、効果はありません。私はネット上で多くを検索したが、私はそれのためのより良い方法を見つけることができません。その可能性がある場合は、そのために最善の方法を教えてください。ここで

は私が事前にこれまで

<?xml version="1.0"?> 

<mx:Sequence id="dataChangeEffectSequence"> 
    <mx:Move duration="1500" easingFunction="{Elastic.easeOut}" perElementOffset="20"/> 
</mx:Sequence> 

<mx:Script> 
    <![CDATA[ 
     import mx.effects.easing.Elastic; 
     import mx.controls.Alert; 
     import mx.events.ScrollEvent; 

     private var arrImage:Array = [ 
      {source:"Images/1.png",tooltip:"1"}, 
      {source:"Images/2.png",tooltip:"2"}, 
      {source:"Images/3.png",tooltip:"3"}, 
      {source:"Images/4.png",tooltip:"4"}, 
      {source:"Images/5.png",tooltip:"5"}, 
      {source:"Images/6.png",tooltip:"6"}, 
      {source:"Images/7.png",tooltip:"7"}, 
      {source:"Images/8.png",tooltip:"8"}, 
      {source:"Images/9.png",tooltip:"9"}, 
      {source:"Images/10.png",tooltip:"10"}]; 

     public function onInit():void 
     { 
      tileList.dataProvider = arrImage; 
     } 

     public function btnUP_click():void 
     { 
      var scrollPosition:int = tileList.verticalScrollPosition - 1; 

      if(scrollPosition >= 0) 
      { 
       tileList.verticalScrollPosition = scrollPosition; 
      } 
      else 
      { 
       tileList.verticalScrollPosition = 0; 
      } 
     } 

     public function btnDown_click():void 
     { 
      var scrollPosition:int = tileList.verticalScrollPosition + 1; 

      if(scrollPosition <= tileList.maxVerticalScrollPosition) 
      { 
       tileList.verticalScrollPosition = scrollPosition; 
      }    
     } 

    ]]> 
</mx:Script> 

<mx:Button width="100" label="UP" id="btnUP" click="{btnUP_click();}" /> 

<mx:TileList id="tileList" dataProvider="{arrImage}" columnCount="1" columnWidth="100" 
    useRollOver="false" selectable="false" backgroundAlpha="0" borderStyle="none" 
    rowHeight="65" verticalScrollPolicy="off" horizontalScrollPolicy="off" 
    itemsChangeEffect="{dataChangeEffectSequence}" > 
    <mx:itemRenderer> 
     <mx:Component> 
      <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="0" 
       verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
       <mx:Script> 
        <![CDATA[ 
         import mx.controls.Alert; 
         override public function set data(value:Object):void 
         { 
          if(value !=null) 
          { 
           super.data = value; 
           if(img !=null) 
           { 
            img.source = data.source; 
            img.toolTip = data.tooltip; 
           } 
          } 
         } 
        ]]> 
       </mx:Script> 
       <mx:Image id="img" showEffect="{outerDocument.dataChangeEffectSequence}" /> 
      </mx:VBox> 
     </mx:Component> 
    </mx:itemRenderer> 
</mx:TileList> 

<mx:Button width="100" label="DOWN" id="btnDown" click="{btnDown_click();}" /> 

</mx:Application> 

おかげ..

Answer 1

TileListをContainer（CanvasやVBoxなど）に入れ、すべての項目の高さにします（variableRowHeightがある場合は、少し複雑かもしれません）。次に、TileListではなくVBoxでのスクロールを処理します。

また、VBoxはitemRendererとして多くのオーバーヘッドを持っています。イメージをそこに置くことを検討したいかもしれません。これにはhorizo​​ntalAlignプロパティとverticalAlignプロパティがあります。

Answer 2

あなたはこのようなListなどSparkコンポーネントを使用することができますを行なったし、useVirtualLayoutを設定している私のサンプルコードです本当に。

コードの問題は、dataproviderが更新されたときにすべてのitemrendererが作成されて表示されることです。 useVirtualLayoutをtrueに設定すると、表示された項目のみが作成され、スクロールするとリサイクルされます。あなたはあなたのitemrendererのdataChangeイベントを聞いて、トランジションを開始することができます。