Animations are most probably one of the main ingredients of a modern UI. This applies not only to traditional (thick) rich clients, but also to the new (thin) web clients (at least judged by the amount of tutorials that show different animation, fading and sliding tricks using simple HTML and CSS coding). And Swing shouldn’t be left behind. This is why i started working on animations as a built-in layer in the Substance look-and-feel. It has started back in October 2005 with simple fades on buttons, continued with more advanced animations on tables, lists and trees and is still under significant development today (and in the near future).

I mentioned already that Swing has 41 different core components, and pretty much all of them are good targets for some kind of animations (if done in a consistent, non-invasive, non-distractive and configurable way). And so, the latest drop of 4.0dev (code-named Key Largo) provides even more advanced animations as before. In this series of postings i’ll show some of these animations in action. You’re more than welcome to try out the latest binary drops and post your feedback here, on project forums, mailing lists or in a private e-mail.

The first video below shows improved rollover animations on tables. Note that the animations have been extended to the table header as well, providing a consistent visual indication for the user (Business Black Steel skin is used):

The second video shows the improved selection animations on the tables. Not only the table headers are now animating in sync with the cell selection, but there’s a new animation on the focus ring on the currently focused cell. The focus ring is faded in and out along with the selection background, providing a streamlined and consistent animation effect (Business Black Steel skin is used):



The next video shows improved animations on the sliders. One of my previous entries showed the animations on slider thumbs. These has now been enhanced by fades on the selected portion of the slider track when the user hovers over the slider thumb (Office Silver 2007 skin is used):



The last video shows much improved animation implementation for menu bars and menu items. Note the smooth fade ins and fade outs using a custom state-aware theme on both the top-level menus and the menu items inside a menu (Office Silver 2007 skin is used):



Note that for illustration purposes, all the videos in this entry use slower animation speeds. Under the normal (default) setting, the animation sequences are faster and less distracting. Let me know your thoughts.