Rebecca Worledge

Announcing QtLottie

Published Friday March 8th, 2019
7 Comments on Announcing QtLottie
Posted in Announcements, Declarative UI, Design, Graphics

QtQuick was designed to be useful for both software developers and for UX designers. Ideally this would be a seamless blend of the two, but very often this ends up with the designers desiging things with Adobe tools, and the engineers working from PDFs, JPGs, etc to recreate what the design team want. In the case of complex animations this can mean recreating everything entirely in code.

Wouldn’t it be much easier if they engineers could just embed the designers’ animations directly in the UI?

Engineers over at Airbnb thought the same, and in 2017 released their way of doing it.

The BodyMovin plugin is an After Effects plugin that exports the animations to a JSON format, which can be run on the web. The Airbnb engineers created a native iOS and Android runtime library for these JSON files, called Lottie. This allows embedding and replaying of the BodyMovin JSON files. The idea picked up quickly, and if you have an iOS or Android device of your own, you most likely have something using Lottie on there somewhere.

With the release of Qt 5.13, we are happy to introduce a new Qt-based Lottie player. This gives engineers and UI designers the ability to embed Adobe After Effect animations directly into QtQuick applications, without any need to rebuild the animation using code later on. We are at the Technical Preview stage, so not all features are supported yet and you may find downloaded Lottie files don’t always work. We will look deeper at the technical details in a future blog post.

Internally, the BodyMovin JSON files are rendered in an embedded renderer – a micro renderer if you will. This parses and loads the JSON, and then runs the animations, trimming, layers, and other effects. This is wrapped up in the LottieAnimation QML element, which can be controlled by the QML code in the UI just like any other QtQuick element.

QtQuick already offers a powerful toolkit for making smooth, powerful, animations to designers. This complements it nicely, offering designers the ability to embed animations quickly and easily.

Using Qt Lottie is as straightforward as any other QtQuick element. Add the element to your QML file, specify what it’s properties are, and define it’s behavior, using JavaScript where necessary. The second video has a little ‘mouse twinkle’ effect, which is also created using a Lottie file:


    MouseArea {
        anchors.fill: parent
        onClicked: {
            sparkle.anchors.horizontalCenterOffset = (window.width/2 - mouseX) * -1
            sparkle.anchors.verticalCenterOffset = (window.height/2 - mouseY) * -1
            sparkle.opacity = 1.0
            sparkle.gotoAndPlay(0)
        }

        LottieAnimation {
            id: sparkle
            anchors.centerIn: parent
            scale: 0.15
            source: ":/4436-celebrating-stars.json"
            autoPlay: false
            frameRate: 20
            onFinished: fade.start()
            PropertyAnimation {
                id: fade
                target: sparkle
                property: "opacity"
                to: 0.0
                duration: 2000
                easing.type: Easing.InOutQuad
            }
        }
    }

Our sample above moves the animation to the position of the mouse click, starts the Lottie animation running from the beginning, and then fades it out when the animation emits the ‘finished’ signal. Another quick sample here:
heart


// LottieHeart.qml
import QtQuick 2.0
import Qt.labs.lottieqt 1.0

Item {
    id: root
    property bool selected: false
    Image {
        id: backgroundImage
        anchors.fill: parent
        source: "heart-outline.png"
    }
    LottieAnimation {
        id: animation
        anchors.centerIn: parent
        source: ":/3990-favheart.json"
        scale: 0.4
        autoPlay: false
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (root.selected) {
                animation.gotoAndStop(0)
            } else {
                animation.gotoAndPlay(0)
            }
            root.selected = !root.selected
        }
    }
}

A simple little click on/off favorites button.

You’ll notice in the sample code that both of my Lottie animations are scaled. This isn’t something you will normally need to do if you are creating your JSON Lottie files from scratch, but in this case I am using Lottie files downloaded from a public repository, and I scaled them to fit.

If you are ready to take a look, you can get hold of Lottie already using the Qt online installer – it’s available with the 5.13 alpha release. You can also grab the code from the Qt repository on github. If you don’t have a copy of After Effects, there are several thousand ready made Lottie animations available from lottiefiles.com. Be aware that Qt Lottie supports a subset of all the BodyMovin features, and not all of the files will play, but don’t despair, many will. You can get the source for the little test app in the first video from here, and the Qt Lottie source code contains a test app with some very simple reference Lottie files that can be used for calibration.

The Qt Lottie documentation is here.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Announcements, Declarative UI, Design, Graphics

7 comments

QTBUG-2019 says:

Cool stuff despite the fact that animations are rendered on CPU. Any plans to accelerate rendering?

Rebecca Worledge Rebecca Worledge says:

Currently no, although we don’t rule it out.

The use-case for Qt Lottie is small animations and effects, such as check boxes, waiting indicators, or buttons. These would be added inside a more comprehensive Qt UI, and the assumption is that the CPU time for these smaller effects would be negligible. If you are using effects that need accelerated rendering, you may be better off using Qt Design Studio.

tim blechmann says:

very interesting! is the rendering done directly via the scene graph? or are there frame buffer objects involved?

Rebecca Worledge Rebecca Worledge says:

Nothing so fancy at the stage. The LottieAnimation class is a QQuickPaintedItem, which means that it’s painted using QPainter when the SceneGraph itself is ready for it. For this size of animation, that likely isn’t a bad thing.

We’ll be looking closer at Qt Lottie’s rendering, pre-rendering, JSON parsing and the pros and cons of the approach taken in a future blog post.

Jack says:

Another solution looking for a problem.

Seriously who works in an evironment where designers are expecting to create usable software directly from After Effects?

Is it’s Qt’s mission to put real developers out of the job?

@Jack: No, certainly our intention is not to “put real developers out of job”. Currently the growth rate of embedded devices is exponential, while number of C++ developers grows only modestly. Desktop and mobile comes on top and these are also growing. Thus, we want to make tools and frameworks that help developers to be more productive and others, like designers , to participate into creation of applications and devices. More info of this from my old blog post from 2016: https://blog.qt.io/blog/2016/09/15/internet-of-things-why-tools-matter/

jason says:

By some argument C++ is shrinking, w.r.t. to the number of C++ developers relative to the size of all developers.

Also, if your job security comes from writing animations, you might want to get a few more skills… It is _very_ common in startups to have a capable graphic designer who can do the animation and it’s best if Qt can just take that person’s work and an engineer add it to the app without hassle. The engineer’s time is better spent on things the GD can’t do… Also I have found a good GD is able to create more artistic animations than myself because I’m just not that practiced at it. I think Lottie is a seriously smart move, and I applaud it’s inclusion.

Commenting closed.

Get started today with Qt Download now