How do I play/overlay Lottie JSON animations via qml?

Support Software & Applications
,
1

I was just messing around playing with qml to have an overlay of json animation on screen.
I made a qml file to import a json, and play/overlay on the screen

my current qml 
import QtQuick
import QtQuick.LottieAnimation

Window {
    visible: true
    width: 500
    height: 500
    color: "transparent"
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint | Qt.WindowTransparentForInput

    LottieAnimation {
        anchors.fill: parent
        // Use the absolute path to test first
        source: "file:///home/gaurav/Downloads/Other/test.json"
        autoPlay: true
        loops: Animation.Infinite
    }

    // Auto-close after 3 seconds
    Timer {
        interval: 3000
        running: true
        onTriggered: Qt.quit()
    }
}


❯ qml6 ~/Downloads/Other/anilonch.qml
QQmlApplicationEngine failed to load component
file:///home/gaurav/Downloads/Other/anilonch.qml:2:1: module "QtQuick.LottieAnimation" is not installed
qml: Did not load any objects, exiting.
I see these are on the system 
❯ pamac search qt6-lottie
qt6-lottie  6.11.0-1 [Installed]                                                                                                extra
    A family of player software for a certain json-based file format for describing 2d vector graphics animations

❯ find /usr/lib/qt6/qml -name "*Lottie*"
/usr/lib/qt6/qml/Qt/labs/lottieqt/Lottie.qmltypes

Attempting via import Qt.labs.lottieqt doesn’t give an error but doesn’t render the animation either.

Is there anyway I can fix this, or another way I can animate the json on screen via a command, I wanted to have an animation on screen when I run certain scripts.
Or maybe a bug in Unstable

system 
❯ inxi -b
System:
  Host: G-Manjaro-X240 Kernel: 6.18.21-1-MANJARO arch: x86_64 bits: 64
  Desktop: KDE Plasma v: 6.6.3 Distro: Manjaro Linux (Unstable)

No updates in queue

2

Don’t think so. I just tried

Example QML 
import QtQuick
import Qt.labs.lottieqt

Item {
    width: 400
    height: 400

    // The animation retains its native resolution; use anchors or items to position it.
    LottieAnimation {
        id: anim
        anchors.fill: parent
        source: "circle-loader.json" // Path to your Lottie JSON file
        loops: LottieAnimation.Infinite
        autoPlay: true
        quality: LottieAnimation.MediumQuality

        onStatusChanged: {
            if (status === LottieAnimation.Ready) {
                console.log("Animation loaded and ready");
            }
        }
    }
}

with this simple animation

https://iconscout.com/free-lottie-animation-pack/free-circle-loader-animation-pack_252568

Could be something with the animation itself.

1 Like
3

Your qml definitely works! also with my battery_full.json, I also added 3 sec timer for it to close.

 // Auto-close after 3 seconds
    Timer {
        interval: 3000
        running: true
        onTriggered: Qt.quit()
    }

do you by any chance know how to make the window have transparent bg, and frameless window?

4

You have this in your qml already. I couldn’t see a mistake. I just have Item in there by chance. When running with qml6 a window is created automatically but you can also use Window as in your example. And something like

color: "transparent"
flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground

should do. Or do you mean coloring inside the Lottie animation itself?

5

Yea, but the flags always give errors

❯ qml6 ~/Downloads/Other/anilonch2.qml
QQmlApplicationEngine failed to load component
file:///home/gaurav/Downloads/Other/anilonch2.qml:8:5: Cannot assign to non-existent property "flags"
qml: Did not load any objects, exiting.
qml 
import QtQuick
import Qt.labs.lottieqt

Item {
    width: 500
    height: 500
    color: "transparent"
    flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground

    // The animation retains its native resolution; use anchors or items to position it.
    LottieAnimation {
        id: anim
        anchors.fill: parent
        source: "/home/gaurav/Downloads/Other/battery_animation.json" // Path to your Lottie JSON file
        loops: LottieAnimation.Infinite
        autoPlay: true
        quality: LottieAnimation.MediumQuality

        onStatusChanged: {
            if (status === LottieAnimation.Ready) {
                console.log("Animation loaded and ready");
            }
        }
    }
    Timer {
        interval: 6000
        running: true
        onTriggered: Qt.quit()
    }
}
6

You need to change this to Window { as I tried to explain, see

If there is no window defined in the qml file, then qml6 creates a surrounding window - the flags are still on the Item tag which doesn’t have these Window properties hence the syntax error.

7

oh, sorry slight oversight on my part :sweat_smile:
well, with Window { it runs and prints qml: Animation loaded and ready but it doesn’t render the window or animation :grinning_face_with_smiling_eyes:

Is there a specific wiki page I can learn about this properly?

8

For the animation i posted it does - even with frameless window and transparent background. Perhaps the secret lies in the particular animation?

Don’t know. I reckon the official Qt Group’s documentation is the most comprehensive out there.