Simple wave effect on items in a DataGroup

This post demonstrates one way of creating a simple wave effect on items in a DataGroup. A post on polyGeek.com reminded me of an old sample I had laying around that was kind of interesting.

Try mousing over the renderers to see the item renderers transition on top of the wave motion. If you run your mouse down a bunch of renderers in a row I think it looks pretty neat.

View Source

Here is how I accomplished the main wave effect:

  1. Setup an ItemRenderer with a non-null postLayoutTransformOffsets
  2. Use an Animate with two motion paths: y and rotationZ
  3. Set the repeatBehavior to reverse and repeatCount to 0 so it will continuously repeat
  4. Set the startDelay of the effect proportional to the itemIndex so the effect starts at a different time for each renderer
  5. Then start the effect on the dataChange event if it isn’t already playing

Note that this probably won’t play well with useVirtualLayout=”true” or in a spark List or when adding or removing items.

Try setting autoReverse=”true” on both of the transitions in the ItemRenderer to see a slightly different behavior when quickly mousing across a few renderers.

This probably isn’t the best way of accomplishing this (writing a custom layout would be better), but it’s not bad for just 100 lines of MXML.

2 thoughts on “Simple wave effect on items in a DataGroup”

Comments are closed.