Flex 4 中的子元素动画 [英] Animating child elements in Flex 4

问题描述

有谁知道如何在 Flex 4 中为布局的子元素的大小/位置设置动画?

Anyone know how to animate the size/position of child elements of a layout in Flex 4 ?

示例:

我有一个带有自定义布局的列表组件.我希望当我更改子元素的位置时，我希望它们以动画方式移动到新位置.

I have a list component with a custom layout. I want when I change the positions of the child elements I want them to animate their move to the new positions.

推荐答案

目前没有内置的方式，也没有计划，在 Flex 4 中制作动画布局:/.

There is currently no built in way, nor plans, to make animated layouts in Flex 4 :/.

我所做的就是为布局中的setLayoutBoundsPosition"和setLayoutBoundsSize"设置动画.因此，不是为布局中的每个项目创建移动"和调整大小"效果，这实际上会显式设置宽度和高度，而是设置矩阵.然后确保布局不会再次失效(如果您直接设置宽度/高度，则会发生这种情况)，否则您可能会开始无限循环.您可能需要做一些技巧才能使其正常工作(我还没有让它与 Spark Effects 一起工作，但使用 Tweener/Tweenmax 确实很容易，因为它们有插件等可以使用setActualSize"" 或 "setLayoutBoundsSize" 等).

What I've done to make this happen is to animate the setting of "setLayoutBoundsPosition" and "setLayoutBoundsSize" in the layout. So instead of creating a "Move" and "Resize" effect for each item in the layout, which would actually set the width and height explicitly, set the matrix. Then make sure the layout isn't invalidated again (which will happen if you set the width/height directly), or you might start getting an infinite loop. You might have to do some tricks to get this to work right (I haven't got it to work quite right with the Spark Effects, but it's really easy to do with Tweener/Tweenmax, since they have plugins and such to use "setActualSize" or "setLayoutBoundsSize", etc.).

我使用 TweenMax 来制作布局动画，他们有一些插件可以让这一切变得简单.TweenMax 明显看起来也比 Spark Effects 快 3 倍(20 fps 对 7fps)，所以我会这样做.它看起来像这样，在布局的 updateDisplayList 方法中.

I use TweenMax to animate layouts, and they have a few plugins to make this easy. TweenMax visibly looks like 3x faster (20 fps vs 7fps) than Spark Effects, too, so I'd go with that. It looks something like this, in the updateDisplayList method of your layout.

TweenMax.to(child, duration, {setLayoutBoundsPosition:{x:childX * i, y:childY * i}});

这篇关于Flex 4 中的子元素动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！