Building an Ubuntu SDK App: rev 8

Back again for one more article on developing an Ubuntu SDK app.  This one might be short,  but it covers one of the cooler bits of magic that QML gives you: Transitions.  But first, be sure to read the previous articles in this series!

Transitions

It used to be that if you wanted to animate parts of your app, you had to setup timers, calculate distances and speeds, program each step along the way, and do it all without killing the user’s CPU.  Sure it could be done, it was done, but it wasn’t easy.  QML is different, QML Transitions aren’t something you have to bolt on yourself, they’re built in at the foundation.

A Transition is defined as a collection of Animation components that can change different properties in different ways, triggered automatically by a change in a component’s state or other properties.  All you, the developer, needs to do is tell QML what you want to change, and how.

ListView Event Transitions

QML offers a variety of ways to define transitions, depending on what you need.  All Items have a transitions  property, which takes a list of Transition instances that will be called whenever the Item’s state property is changed.  You can also define a Transition for any property change using the “Behavior on <property> {}” syntax, which creates a Transition for changes on the named property.

But for me, it was a third item that fit best.  QML’s ListView component has several properties that take a Transition instance, properties such as add and remove, which correspond to an item being added or removed from the ListView.  These transitions are then applied to the delegate ListItem component when it is being added or removed.  I used these properties to make the items slide in and out of view when changing subreddit, or moving from one page to another.

    ListView {
        id: articleList
        ...
        add: Transition {
            id: addAnimation
            property bool forward: true
            SequentialAnimation {
                NumberAnimation { properties: "x"; from: addAnimation.forward ? articleList.width : -articleList.width; to: 0; duration: 300 }
            }

        }
        remove: Transition {
            id: removeAnimation
            property bool forward: true
            SequentialAnimation {
                NumberAnimation { properties: "x"; from: 0; to: removeAnimation.forward ? -articleList.width : articleList.width; duration: 300 }
            }
        }
    }

At first I just had transitions going in one direction, but I wanted to give some implicit meaning to them, going one direction for “more results” and another for “new results” (reload, change subreddit, etc).  That’s why I added the extra forward property, which is used to determine the direction of the transition.

You can see it in action in this video:

Next Time: Who knows?

This is the last revision currently in my bzr branch.  I have some other code in the works, for Sharing using the new Friends service, and HUD integration.  But for one reason or another, neither is working quite the way I want it yet, and they haven’t been committed to my branch yet.  There were typically several days between revisions when I was developing uReadIt, and I’ve been blogging about it nearly every day since my first post.  Once I have some time to hack on uReadIt some more, I will have more to write about, so stay tuned!

This entry was posted in OpenSource, Programming, Projects, Upstream and tagged , , , , , , . Bookmark the permalink.

2 Responses to Building an Ubuntu SDK App: rev 8

  1. Peter says:

    Please can you explain how to install the ubuntu-sdk? I have been trying for over a week now on my 12.04 LTS installation. Searching the internet there seems to be a lot of problems with installing it with unmet dependencies and conflicting versions. Surely it should not be this difficult and should work straight out of the box? I’m bursting to write apps as a former C# developer please help!

Comments are closed.