Announcing QtLottie

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.

https://youtu.be/i6OSlvknI-Y

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.

https://youtu.be/tI_NBYguqYU

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.


Blog Topics:

Comments