Using the AnimateProperty Effect
I’ve been using the AnimateProperty effect a lot lately for creating single or compound effects in Flex, so I thought I’d share a few simple examples. The AnimateProperty effect not only allows you to animate a property like width, height, etc., but it also allows you to animate a style property as well, so you can really get into the details of how you want a component to animate. Here’s some quick examples:
You can recreate the Resize, Fade, and Move effects by using the AnimateProperty effect and animating size, position and alpha:
With the AnimateProperty effect you can also animate certain styles by setting isStyle=”true” in the effect properties. This allows you to do things like animate the cornerRadius and fontSize of a Button:
Like I said, these are simple examples, but with a little experimentation you can add another level of detail to any effect you might be trying to create and it some cases have a bit more control.
September 1st, 2007 at 8:00 am
Very nice! I’ve been using Tweener to do some of these effects. Not anymore!
September 3rd, 2007 at 3:05 pm
HI, that’s great! thanks,
Can you show us an example tilelist transition effects where you have a tilelist and slider and when you move the slider objects in the tilelist fadeout and delete.
thanks,
September 4th, 2007 at 7:23 am
This is amazing how little code is involved to produce these effects.
September 6th, 2007 at 8:57 am
This is very cool being able to animate styles. I looked into the source of AnimateEffect and it uses the setStyle method to modify the style incrementally. Recently I heard from one of the Flex engineers that calling setStyle is one of the most expensive operations in the framework so I’m wondering if it’s realistic to use this in real-world applications. If the performance isn’t affected too negatively then great, but I’m a bit wary.
Ant thoughts/experiences?
September 10th, 2007 at 8:48 pm
@Ryan - setStyle is one of the most expensive operations and is also used for doing runtime CSS. I haven’t used any of the isStyle portions of the AnimateProperty effect, but all I can suggest is to use it sparingly and evaluate any negative impacts that may take place, especially any performance hits.
January 29th, 2008 at 3:41 am
Thanks for easy demo..
Know some body how to AnimateProperty percentage of width or height?
July 9th, 2008 at 11:03 am
@Mathic - set myAnimateProperty.property = ‘percentWidth’ instead of just ‘width’