Skip to main content
Known Participant
September 2, 2009
Question

Animator vs. Effect

  • September 2, 2009
  • 1 reply
  • 890 views

Here's something I just thought about, trying to draw a distinction between Animations and Effects.

ANIMATORS are what bring things to life.  They are acting on changes within the object it is a part of (or attached to) to make the changes in its properties look realistic.  All living objects should have an animator, like the way a plant or an animal has an "animator"... it doesn't move by something outside itself, unless acted on of course.

EFFECTS are common types of animations the Animator performs.  For instance, and animator can "move" and "resize" an object, or "rotate", "pixelate", or even "bend" an object.  Those are all effects, but in the end the Effects are just modifying properties, through an Animator.

TRANSITIONS are EFFECTS played between two states.  They aren't animations themselves, they're just triggers for effects.

The Animator is the core object doing the animation, and should be part of an object, to bring it to life, but it can also act on other objects, such as rounding up its children (layouts), or grabbing something from the outside and pulling it in, or pushing it away.  An object can also use its own Animator to set its properties, so if it wanted to move from x = 0 to x = 100, it would just say "animator.animate({xFrom:0, xTo:100})", or the MXML equivalent.

Effects are more run when an event or trigger occurs.  This works very well with Skins who have well-defined states (up, over, down, etc.), and you can just do transitions between them.  It doesn't work so well when you just want to move 30 items from the radius of a large circle into a square in the center, that's an Animation, not an Effect.  If you make an effect that can do that, it's a "Layout + Effect" in one, which should really be two objects, the Layout and the Animator.

Animators can run from events too, or they can be run other ways.  Effects can also be manually played, just as little blocks of predefined/packaged-up Animator actions.

So if you want to animate a property "x" on an object, you have a few options:

1) Create a "move" Effect that is not part of the object, set the destination x value, and press play, or trigger it somehow (won't work unless you have manual event listeners or the [Effect] tag on the object).

2) Create an "Animate" Effect, set a few motion paths and key frames, and press play.

2) Say "object.animate({x:newValue})", then and the Animator will animate the properties according to its settings (ease, duration, etc).  I have this working for the Spark VerticalLayout, CarouselLayout, and CoverFlowLayout.  It's very simple.  Next up is the scrollbar.

If you go the Effect route, you have to create an effect and manually configure it for every new animated property change you want.  That's a lot of work.  You may even have to manually "garbage collect" them, since they aren't inside the object your animating.

When trying to make simple effects between objects in layouts and whatnot, I spend most of my time writing event handlers and making sure this and that boolean/property is okay so that this effect or that effect can run on one of the 30 targets.  Then if I want to sequence them, it gets crazy.

I know Effects work for Skins, because skins are very basic animations, but for things like Flash animations, it wont work, unless some hardcore people do a ton of coding in the background for a year to get it done.

If you went with the Animator, then you could very easily have a consistent set of motions and animations in your living application, without having to build effects that brought it to life.  That more closely represents reality than creating effects.  You could still add effects, say when rolling over a button it flipped in 3d, or you could just tell the object's animator that you want "rotation" to be one of the animated properties, and it would do it for you.

If components had animators. they'd be more alive.  Effects are too bulky and require a TON more code to do even the simplest thing.  The Animator is an interface to effects, plus more.

I like Animators, tell my why you don't like them, and why you do.

Best,

Lance

This topic has been closed for replies.

1 reply

viatroposAuthor
Known Participant
September 2, 2009

Another thing is that if you start trying to apply Effects to objects in a Container, like Tink's Efflex project, you begin having to modify the item (child) by grabbing the parent and doing layout functions to the child from the child, which is the exact opposite of how layouts should work.  Layouts should be done from the parent going through its children like Spark and Openflux do it, not the children each figuring out how to position themselves in the parent.

The ListBase data change effect is better, but that stuff still shouldn't be dependent on the component, which could be abstracted out in an "layoutTarget.animator.animate(element, {x:(element.width * i) + gap, y:10})" call.

In short, Effects applied on a larger scale can be abstracted out into an Animator that just animates properties, creating effects in the background if it needs to.

viatroposAuthor
Known Participant
September 2, 2009

I think this looks pretty nice:

<spark:VerticalLayout>

     <spark:animator>

          <spark:Animator>

               <spark:Animate filter="move">

                    <spark:AnimatorMotionPath />

               </spark:Animate>

               <spark:Animate filter="resize">

                    <spark:AnimatorMotionPath />

               </spark:Animate>

          </spark:Animator>

     </spark:animator>

</spark:VerticalLayout>

<spark:VerticalScrollBar>

     <spark:animator>

          <spark:Animator>

               <spark:Animate>

                    <spark:customFilter>

                         <mx:EffectFilter filterProperties="[value]"/>

                    </spark:customFilter>

               </spark:Animate>

          </spark:Animator>

     </spark:animator>

</spark:VerticalScrollBar>

Then in the components you could just check to see if the animator exists, then create a token object {x:curX...}, and pass it to the animator which will handle playing the effects.

That way you don't have to create [Effect] tags for every little thing you want (like the 'scrollPage' effect and 'scrollEnd' effect, etc.), nor will you have to write a custom implementation for it, it can be built into the core easily.  You can just write filters and filter functions in the effect no problem.

- Lance