2月 2, 2009 0
[flex]Box(HBox,VBox)に子を追加した時のアニメーション
BoxにaddChildした後に、
追加したComponentに移動までスクロールバーが移動するAnimeクラスを作成しました。
○作成したものはこんな感じ
http://maxfactory.biz/flex/sample/sample1.html
ソースは下記になります。
○Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:effects="*"
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.effects.easing.Linear;
private var number:uint = 1;
private function addItem():void
{
var s:TextInput = new TextInput();
s.text = "test" + number++;
s.width = 80;
s.height = 40;
vBox.addChild(s);
}
private function addItemRow():void
{
var s:TextInput = new TextInput();
s.text = "hoge" + number++;
s.width = 80;
s.height = 40;
hBox.addChild(s);
}
]]>
</mx:Script>
<effects:VBoxAnimateProperty id="vBoxAnimate" />
<effects:HBoxAnimateProperty id="hBoxAnimate" />
<mx:VBox>
<mx:ControlBar>
<mx:Button
label="縦追加"
click="addItem()" />
<mx:Button
label="横追加"
click="addItemRow()" />
</mx:ControlBar>
<mx:VBox id="vBox"
width="110" height="100" childAdd="vBoxAnimate.play(vBox)" />
<mx:HBox id="hBox"
width="110" height="100" childAdd="hBoxAnimate.play(hBox)" />
</mx:VBox>
</mx:Application>○HBoxAnimateProperty.as
package
{
import mx.containers.HBox;
import mx.core.UIComponent;
import mx.effects.AnimateProperty;
import mx.effects.easing.Linear;
import mx.events.FlexEvent;
public class HBoxAnimateProperty
{
public var duration:int;
public var easingFunction:Function;
private var hBox:HBox;
private var animateProperty:AnimateProperty;
public function HBoxAnimateProperty()
{
animateProperty = new AnimateProperty();
duration = 200;
easingFunction = Linear.easeOut;
}
public function play(target:HBox):void
{
hBox = target;
var item:UIComponent = hBox.getChildren()[hBox.getChildren().length-1];
item.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
private function creationCompleteHandler(e:FlexEvent):void
{
animateProperty.toValue = hBox.maxHorizontalScrollPosition;
animateProperty.target = hBox;
animateProperty.property = "horizontalScrollPosition";
animateProperty.easingFunction = easingFunction;
animateProperty.duration = duration;
animateProperty.play();
}
}
}VBoxAnimateProperty.as
というものも作成しましたが、
HBoxとほぼ同じなので省略。
childAddのイベントハンドラでアニメーションを開始しているのですが、
そのタイミングだと、maxHorizontalScrollPositionが追加する前の長さを返すので、
追加したComponentがcreationCompleteしてからアニメーションを実行するようにしました。
effectはeasyFunctionだが、変更できます。
あと、duration。その他も拡張していけばOK