Smooth ( animated ) GUI transitions

Question

From time to time you can see smooth animated transition displayed for resizing, expanding and appearing graphical controls. Not just some tail-wagging file search dog, but animation of widget configuration changing it's state structurally and/or geometrically.

I haven't used Windows Vista much, but sure know that on XP you can set this sort of effects for drop-down menus. What about other systems/graphical shells? Is it achieved automatically at the system level so that the application code (even graphical framework) doesn't deal with it at all?

I know that Qt has a set of classes for animation. How about other gui frameworks (wxwidgets, swing, gtk,.. you name it)? Couldn't there be clashes with the system animation (-> prev paragraph) as some frameworks rely on the native API?

What are the best practices for design, in terms of mirco-arhcitechture, of animated transitions for controls? What visual design could be used? How do they operate together with layouts/sizer and automatic sizing? What about performance?

It's a broad question, and I hardly expect it to be solved by a single answer. But just any clue that'd help to understand the general picture would be greatly appreciated.

Answer 1

There are a couple of Java animation frameworks around:

• https://animation.dev.java.net/
• https://timingframework.dev.java.net/

From what I can tell (having used the second one), they handle the timing aspect and let the client handle the actual animation part.

Answer 2

One "best practice": make sure animations don't get in the way of accepting input.

For example, if you're fading a menu in, activate the keyboard shortcut context before the fade, so that J. Random Poweruser doesn't have to sit around for 200ms (or longer if something stalls on disk access or the like) before hitting the shortcut key. Same with accepting clicks, etc.

Answer 3

We use Infragistics to provide all the UI bells an whistles and stuff. There are some downsides -- it takes a while to get up to speed on the controls. But they provide excellent sample applications and eventually you can put together some complex user interfaces without too much custom control work.

Answer 4

Windows 7 introduces a C++/COM-based animation framework called Windows Animation. http://channel9.msdn.com/posts/yochay/Windows-Scenic-Animation-Overview/

It hasn't been announced whether it will be redistributed for Vista or not.

It handles timing, state management, has a small library of transition curves, and has some cool features like compression and velocity matching to deal with colliding animations.

It doesn't actually paint things on screen; that's up to the application, which can use GDI or Direct 2d.

In Windows, there is no system-wide set of animations that is used as part of the theme, and there are no best practices. I'd recommend developing a set of principles for your own application, and look at existing applications to get ideas. The iPhone and the Zune desktop software are both good examples of software making extensive and consistent use of animations.

Answer 5

WPF (.NET 3.0?)and Silverlight(v1.0+) is able to render animation. You set up triggers, which then start the playback of frames.

Answer 6

I have created a C# library for these sorts of UI animations, called Transitions: http://code.google.com/p/dot-net-transitions/

It can animate most UI properties of forms or controls. It works with .NET 2 or later.

Answer 7

I would recommend reading Filthy Rich Clients by Romain Guy and Chet Hasse. In fact the timingframework mentioned in one of the other answers was written by Chet Hasse originally and is a substantial part of this book. It focuses on Java, but the same principles can be applied to all languages. As far as animation in other languages JavaFX has these types of animations built into the language. Flare which is a Flex library has some cool animated transitions built in for graphs and information visualization. JQuery and YUI have nice animation capabilities as well.