Kirill Grouchnikov's Blog

Animating your lists, tables and trees

Most of the comments on Romain's blog were animation-related. Indeed, the latest trend in the UI world seems to be animations (on pretty much everything), including fade-ins on rollovers, selections, layout changes and what not. So, what better thing to add to the latest drop of denied Substance if not the support for animated fades on lists (was already there in release 3.0), tables and trees.

So, if you're running under the latest dev drop (and by all means, try it out on the real-world applications and let me know of the issues you encounter - i know of few of them already which i'll fix tomorrow between the Flying Irish and Longhorns games) - you'll see something similar to the movie linked below (which is my first experience with the Wink).

In order to view the Flash movie, click right here and wait for the movie to load (in a separate page). It's 1.6MB

Note that you have animations on rollovers and selections, with multiple animations running on the same list / tree / table (all on the same thread). In addition, the animations take into account the model changes and control changes (tree collapse e.g.) that happen during the animation cycles. Click the link below to launch the WebStart application shown in the demo video.

Comments

• Will these effects cope with custom renderers ? Also, would it be easy to 'borrow' this code from substance and apply it to something using standard (in my case Windows) look and feel as I would quite like to add the animation effects but I also want to keep a relatively standard look and feel.

  Cheers
  Rob

  Posted by: rasto1968 on September 16, 2006 at 09:05 AM

• With those kind of animations I feel like working on very, very slow computer... Not everything need to be animated. That is why I disable all these animations where I can.

  Posted by: euxx on September 16, 2006 at 10:32 AM

• rasto,
  The only requirement from custom renderer is not not override the paint / paintComponent and fill the background by yourself. You're most welcome to try this on your app, see how it looks and let me know.
  euxx
  In the demo video i specifically set slow animation globally to show the effects. The default setting is twice as fast, and you can use the fast setting (five times as fast) or none setting (no animations at all). These can be set both globally and on per-component basis.

  Posted by: kirillcool on September 16, 2006 at 11:27 AM

• rasto
  Substance uses this animation layer which can be easily used in any third-party look-and-feel. In addition, there is the timingframework that is used in aerith (much simpler to use for simpler cases, but can't handle complex scenarios) and the JGoodies' Animation. In case you're interested in simple animations (background / foreground on a single component), you can use these two on any look-and-feel. In case of lists / tables / trees i'm afraid that you'll have to make significant changes in your application if you want to use the animations under Windows LAF. By the way, under Vista the Windows LAF will be animated in Mustang.

  Posted by: kirillcool on September 16, 2006 at 11:33 AM

• "Complex scenarios" must be defined. Because I wrote a complex animations with the timing framework: http://jext.free.fr/sendmail.mov

  Besides, the Timing Framework does contain stuff that you might not know yet (can your stuff animate the change from a screen to another automatically? Like the cross-fades in Aerith.)

  Posted by: gfx on September 16, 2006 at 04:41 PM

• Romain,
  I think that i defined complex scenarios pretty clearly both here and on Javalobby thread: how do you animate list, table and tree renderers? My "stuff" doesn't aim to be a general-purpose animation framework. It is highly LAF-oriented in its current form, and doesn't handle layout animations. Yet :)
  By the way - i've downloaded this .mov file and it can't play in QuickTime 6.5.2 on my Windows box :(

  Posted by: kirillcool on September 16, 2006 at 05:32 PM

• Right - plays under version 7.1.3. Indeed a complex animation, however not very connected to the example at hand - which is animation of cell renderers. Just serves to illustrate that each one has its own strengths and weaknesses.

  Posted by: kirillcool on September 16, 2006 at 05:43 PM

• Unrelated to the main topic of the article--

  But I am so glad that substance has been denied. It is HIDEOUS!! Sun, please bundle the synthetica LAF with Java 6 (with its many beautiful skins). Synthetica seems performant and the skins look awesome. Substance looks like a LAF designed by engineers instead of artists -- that is to say, it looks like crap.

  Check out synthetica themes here:
  http://www.javasoft.de/jsf/public/products/synthetica/themes

  -Bryan

  Posted by: prime21 on September 18, 2006 at 11:36 AM

• Bryan,
  Care to detail the specifics of why Substance is hideous and how it can be improved?

  Posted by: kirillcool on September 18, 2006 at 11:45 AM

• Bryan,

  That's hardly constructive. If anything I think Substance is a great beginning for finetuning a LAF. I would suggest toning down some of the features, but if anything it's exuberant, while my opinion is way too many engineers these days try to look like lame emulation layers- I would place Synthetica in this category.

  Modern guis have pizazz to them, and while I dont work on these myself, I do appreciate a Java LAF that has some sense of grandeur, not another wannabe reporting console or itunes doppleganger.

  Posted by: ilazarte on September 18, 2006 at 05:17 PM

• ilazarte:

  I would love an itunes doppleganger. It's quite obvious that people like the itunes UI. Swing doesn't need to pioneer a new look. We tried that with Java 1.2 Metal and it is a black eye to this day. I love Ocean. A major improvement to steel metal, but it still doesn't look as good as many native GTK+ themes, XP/Vista, or MacOS. It would be nice to have a crossplatform look and feel that looks good. My understanding is that Substance was an attempt to do just that, but I believe that the output of that project is another Metal-esque, ultra-bold, eye-sore. We can do better. Want an example? Follow the link I posted above. Synthetica looks great. The default theme isn't so sexy, but the other themes look fantastic and they are performant too.

  kirillcool:

  Substance is too LOUD. It continues the metal legacy of having an ultra-bold, deep and bumpy look. It is not soft and subtle like every other popular UI today. That is my primary complaint. Let's back off on the 2 pixel wide dark black border lines please! And bold fonts should be forbidden! Ocean only looks good with swing.boldMeta=false (this is the default for SwingSet with Java 5).

  BTW kirillcool, I think the animation effects look great! :-)

  -Bryan

  Posted by: prime21 on September 19, 2006 at 09:39 AM

This work is licensed under a Creative Commons License.