Simple Fun Faders

If you're using pre-Bindows 3.0 Beta, here's a simple way to do component fading in Bindows.

When Bindows 3.0 is released, it'll do a lot more including resize and relocation animations. Hopefully, this little fader will wet your appetite for that release.

For a preview of the animation capabilities found in Bindows 3.0, check out my earlier writeup.

Here's an example of what the fader object, MyFader, can do. We're cycling through a six photo collection of 1/24 model cars from Tamiya --




Fading is achieved by dynamically changing a component's opacity. One of the great things about using a toolkit like Bindows is that you don't have to worry about browser specifics like setting filter ( IE ) or -moz-opacity ( Firefox ).

All of that is abstracted for you.With Bindows, this is easy to do by repeatedly calling a BiComponent's setOpacity() method.

You basically setup a timer and then at intervals call setOpacity() incrementing by 0.1 until you reach 1 ( "fade in" ) or decrementing by 0.1 until you reach 0 ( "fade out" ).

There's not much coding behind it. Here's what the reusable object, MyFader looks like --



MyFader isn't a component. It doesn't need to be because MyFader doesn't need to be rendered, but it does need to dispatch events.

So, we make it a BiEventTarget. When a fade starts, MyFader dispatches the "fadestart" event and when it ends, MyFader dispatches the "fadeend" event.

Use these two events to coordinate fading. This is what we're doing when we're swapping the six model cars. You can view that source here.

Not all fading is aesthetic. We can also use fading to provide visual feedback. Here's an example of a cascading menu with fade-ins when a list is updated. To see it in action, select an item --



Note that the cascading menus are lists and each item is a BiListItem, but we don't fade each item. Instead we fade the entire list. It's always better to animate the container/parent rather than each child ( much like event delegation where you handle events at the parent level ).

It's much easier to coordinate by fading one component rather than many. JavaScript after all uses a single threaded model.

You can get all the code here including the MyFader object.

To see the model car example, go here.
The cascading list example is here.

Have fun!