Intro

Since 0.6, Clutter has undergone some major API overhauls in just about every area. We now have a concept of layout and allocation, similar to GTK, and especially in 1.0, our animation API has changed (and improved) dramatically.

We already had the ability to create visually rich user interfaces, but more than ever we now have the ability to create visually rich, portable, efficient, and most importantly, usable interfaces.

I'm going to go over some basics, just to refresh memories - because of course, I'm sure you're all Clutter experts by now.

If you aren't already familiar with Clutter, I'm sure you'll be familiar with one of the many windowing toolkits currently available. So, rather than speak of Windows and Widgets in Clutter, we have Stages and Actors. This is just a difference in terminology, but it better represents the flexibility and dynamism that you have with Clutter.

I'm going to go over some brief code examples now.

With very little code, one can create a stage, with an actor.

[basic-actor.c]

With a little more code, we can have a background on this stage.

[basic-actor-bg.c]

And with just a little bit more, we can add some animation.

[basic-actor-bg-anim.c]

But this talk was called *complex* clutter animations, so that's enough of that and now the main talk starts.

Animations can be used to enhance the user experience, by providing better indicators as to what's going on, easing between transitions and providing a clear divide between differing processes.

They can also be used to hinder. The basic guideline is that if a user ever finds themselves waiting for an animation, you're doing it wrong.

There are some caveats with the earlier demonstrated API. Every Clutter actor has an implicit animation object, but only one. You can create your own animation objects, but this isn't quite as convenient, as you'll have to keep track of these objects yourself.

We also don't currently have API to coordinate multiple animations as easily as we'd like. I'm sure that we will in the near future, but not right now.

So I'll go over a few slightly more complex things that you may want to do.

Interrupting/reversing animation

The great thing about the new Clutter animation API is that you don't need to keep track of anything to be able to stop, or reverse an animation.

It's as simple as retrieving the animation object, getting it's timeline and telling it to stop. Similarly, once you have that timeline, you can also change the direction, thus reversing what animation was running.

Because every Clutter actor has an implicit animation singleton, any new animation you start using clutter_actor_animate will continue from any previously set animation.

For example, the following demo uses clutter_actor_animate to move the image to the cursor position.

[basic-anim-interrupt.c]

Note how animating to a new position interrupts the previous animation.

Chaining together multiple animations

Doing multiple animations that can't be done in a single animate call complicates things slightly. You'd probably come across this if you want to have animations on the same actor that start and end at different times. There are various ways of doing this, and how you've implemented your application and/or actors may affect which method you want to pick.

One method is to attach to the end of the singleton animation and start any new animation necessary at the end of the last phase inside the completed callback. The benefit of this is that interrupting the animation is easy and you don't have to manage the lifetime of any objects, but this is only feasible when your multi-part animation can easily be broken up into distinct steps.

[chain-anim-1.c]

Using clutter_animation_new, you can create your own animation objects. These won't conflict with the actor's animation singleton, which can be used at the same time if so desired. In conjunction with clutter_timeline_set_delay, it's possible to create whichever animations you need, tell them to start when you need them, and that way you can start off a chain of animations from a single function with no callbacks.

[chain-anim-2.c]

Any animations you create yourself, you'll need to manage, however. So that means unref'ing them if you don't plan on reusing them.

One further method is to somewhat combine the last two methods, by using multiple animation objects and a single master timeline that controls when you start each phase of the animation. This has the same drawbacks of the first method, perhaps even more so, but in some situations can make your animation easier to reverse.

To give a more practical example, I'll show a chained animation in the Moblin Web Browser.

Animating layouts

Unfortunately, as great as the new animation API is, it doesn't particularly help you when animating layouts. You could create your application using fixed positioning, as in Clutter 0.6, and that would let you use the new animation API, but using layouting makes things much easier to create resizeable (and thus portable) applications. And you want this.

Again, there's no one way of animating layouts, but I'll discuss two that I've found useful, and demonstrate them in the Moblin Web Browser.

The first way is the easiest way: cheat. Assuming your allocation function allocates space depending on the properties of its children, such as size, you leave your allocation unchanged and you animate the child property to fit the kind of animation you want.

This is used to animate opening and closing tabs in the Moblin Web Browser.

The second way is to store a timeline (and an alpha if you want non-linear progression), and change your allocation function to be able to be able to handle a 'transition' variable, representing how far you are through the animation.

When you run the timeline, store the progression or the alpha value and relayout your actor.

This method is used when animating the visual tab switcher transition in the Moblin Web Browser that I showed earlier.

Layouting is often seen as an expensive action, but it isn't in Clutter. The only thing you need to be careful of is measuring text - so don't resize labels on every frame of a layout animation.

Texture deformation

Now, I'd like to show something that demonstrates the possibilities there are using Clutter, but that isn't something that has been taken advantage of much yet, and that's mesh deformation.

This is something that any platform that's capable of running Clutter is capable of, it doesn't require shaders or anything like that. The laptop I'm presenting on has Intel 945 graphics hardware, the most common chipset used in netbooks at the moment.