Advanced animations on core Swing components – part I

July 8th, 2007 | 9 Comments »

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.

Advanced animations on core Swing components – part IV This is the fourth part in the ongoing series about advanced animations on core Swing...
Advanced animations on core Swing components – part III This is the third part in the ongoing series about advanced animations on core Swing...
Advanced animations on core Swing components – part II The first part showed the animations added (among the rest) on menus, sliders, tables and...
Advanced animations on core Swing components – part V This is the fifth part in the ongoing series about advanced animations on core Swing...

9 Comments on “Advanced animations on core Swing components – part I”

1 Asd said at 3:02 pm on July 8th, 2007:
The animations are much too slow in my opinion. I had been using substance for some apps but the animations got on my nerves and i turned it off.
2 Asd said at 3:03 pm on July 8th, 2007:
And I know they are slower in your videos, they are still too slow with normal settings
3 Kirill Grouchnikov said at 3:23 pm on July 8th, 2007:
Asd – by default, the selection animation sequence lasts 0.25sec and all the rest last 0.5sec. I find it a good choice, but if you don’t like it, it can be easily sped up (by 50% using the AnimationKind.FAST) or turned off (using AnimationKind.NONE or various FadeConfigurationManager APIs).

Thanks
Kirill
4 Andres Almiray said at 4:37 pm on July 8th, 2007:
I’m speechless… these are really great improvements Kirill. It may also be nice to animate the menus instead of having them appear out of nowhere. Keep it up!
5 Romain Guy said at 5:40 pm on July 8th, 2007:
Kirill, you should give it a try with 0.1 or 0.15 seconds.
6 Kirill Grouchnikov said at 5:58 pm on July 8th, 2007:
Andres – i tried to do it a few times. There are two options. First is to use setSize on the popup menu, which results in very (very very) choppy animations. Another is to use native translucency tricks (via JNA project, for example) and have the menu fade in or slide out.

Romain – my previous comment was incorrect (sorry about that). The animation thread has 40ms sleep time, and the default setting is to have 5 animation steps (meaning 0.2sec and not 0.5sec). The fast setting (AnimationKind.FAST) will result in 0.12sec for the entire animation sequence (3 animation steps).
7 anoweb said at 6:03 am on July 10th, 2007:
is it possible to use Substance (to get the animations and custom comps) but maintain the Ocean LAF or even Nimbus when it’s “released”? I am not to keen on most of the skins/themes I have seen so far for substance.

Thanks
8 Kirill Grouchnikov said at 8:18 am on July 10th, 2007:
anoweb – the animations in Substance are enabled by default. So yes, it is possible to use Substance animations without writing Substance-specific code and then switch to another LAF. And if you’re not satisfied with Substance skins, you can always write one. And you’re welcome to try the Nebula skin which uses colors from Nimbus.
9 Advanced animations on core Swing components - part V said at 11:53 pm on September 19th, 2007:
[...] first part showed rollover and selection background animations on menus, sliders, tables and table [...]