任何人都知道如何在 Flex 4 中为布局的子元素的大小/位置设置动画?
例子:
我有一个带有自定义布局的列表组件。我希望当我更改子元素的位置时,我希望它们动画移动到新位置。
任何人都知道如何在 Flex 4 中为布局的子元素的大小/位置设置动画?
例子:
我有一个带有自定义布局的列表组件。我希望当我更改子元素的位置时,我希望它们动画移动到新位置。
目前还没有内置的方式,也没有计划在 Flex 4 中制作动画布局:/。
为了实现这一点,我所做的是对布局中的“setLayoutBoundsPosition”和“setLayoutBoundsSize”的设置进行动画处理。因此,不要为布局中的每个项目创建“移动”和“调整大小”效果,这实际上会明确设置宽度和高度,而是设置矩阵。然后确保布局不会再次失效(如果您直接设置宽度/高度会发生这种情况),否则您可能会开始陷入无限循环。您可能需要做一些技巧才能使其正常工作(我还没有让它与 Spark 效果一起正常工作,但使用 Tweener/Tweenmax 真的很容易,因为它们有插件等使用“setActualSize ”或“setLayoutBoundsSize”等)。
我使用 TweenMax 为布局设置动画,他们有一些插件可以让这变得简单。TweenMax 看起来也比 Spark Effects 快 3 倍(20 fps 对 7fps),所以我会选择它。updateDisplayList
在您的布局方法中,它看起来像这样。
TweenMax.to(child, duration, {setLayoutBoundsPosition:{x:childX * i, y:childY * i}});
就像你平时...
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();
}
}