Layout Animations in Clutter

I’ve been playing around with layout animations in Clutter recently and made a video of what I have achieved. Currently, Clutter has very good and understood support for animations using fixed positioning, but I wanted to experiment with animations inside a layout manager. After a lot of thought, the solution was simpler than I had imagined. In its current form, it involves storing the child allocations at the start of the animation and then simply calculating the children’s positions between the start and final destinations based on the alpha value from the timeline. Animation is disabled for most allocations, but is started by certain events such as changing child properties or orientation. The add and remove animations required some additional logic to make sure the new actor faded in once the animation had finished.

I made a video of MxBoxLayout that shows changing packing options (expand, fill and alignment) as well as adding and removing children, and changing orientation (the layout children are just ClutterRectangles):

The work is currently in a branch of the Moblin UI Toolkit repository (animated-box-layout) which I will merge once I have added an enable-animations property to the actor.

In other news, there is now a page on Moblin.org for the Moblin UI Toolkit, and I expect API reference documentation to be available on-line soon too. There is also a new component in Moblin bugzilla specifically for the new toolkit (under “Moblin Distribution”).

5 thoughts on “Layout Animations in Clutter”

  2. one of the things I want to add to the new LayoutManager class is the ability to animate children in a consistent way across layout manager; if the approach of BoxLayout seems to scale I’m definitely for adding it to Clutter core.

    for instance, something like:

    LayoutManager::get_allocations(progress) ➔ ActorBox[]
    LayoutManager::begin_animation(duration, mode)
    LayoutManager::end_animation()

    would be able to fit the BoxLayout private implementation.

    I’ll hack something like this on the plane and see on Monday if I can get Mx to use it 🙂

  4. aaaand done: animate-layout-manager branch in Clutter’s Git repository; I need to think about a toggle property to control animations, and probably some properties to control duration and easing mode – so that they can be even styled in Mx.

    thanks for the inspiration, Thomas 🙂

Comments are closed.