apache-flex 在Flex 4中为子元素制作动画

bn31dyow  于 2022-10-31  发布在  Apache
关注(0)|答案(2)|浏览(145)

有人知道如何在Flex 4中动画化布局的子元素的大小/位置吗?
示例:
我有一个自定义布局的列表组件。我希望当我改变子元素的位置时,我希望它们以动画的方式移动到新的位置。

3pvhb19x

3pvhb19x1#

目前,Flex 4:/中还没有内置的方式或计划来制作动画布局。
为了实现这一点,我在布局中设置了“setLayoutBoundsPosition”和“setLayoutBoundsSize”的动画效果。因此,不要为布局中的每一项创建“Move”和“Resize”效果(这实际上会显式地设置宽度和高度),而是设置矩阵。然后确保布局不会再次无效(如果直接设置宽度/高度,就会发生这种情况),或者可能会出现无限循环。(我还没有得到它的工作相当正确的Spark效果,但它真的很容易做到与Tweener/Tweenmax,因为他们有插件等使用“setActualSize”或“setLayoutBoundsSize”等)。
我使用TweenMax来制作布局动画,他们有一些插件来简化这一过程。TweenMax看起来比Spark Effects快3倍(20帧/秒vs 7帧/秒),所以我会使用它。它看起来像这样,在你的布局的updateDisplayList方法中。
TweenMax.to(child, duration, {setLayoutBoundsPosition:{x:childX * i, y:childY * i}});

xxb16uws

xxb16uws2#

就像你平常一样...

public override function updateDisplayList(width:Number, height:Number) : void {
    for (var i:uint = 0; i < target.numElements; i++)
    { 
       var resizeElement:Resize = new Resize(target.getElementAt(i) as IVisualElement);
       resizeElement.widthTo = 500;
       resizeElement.play();
    }
}

相关问题