pyqt5lottie

Implementing a Lottie JSON animation into PyQt5


I am working on a PyQt5 application and I want to bring in a Lottie JSON animation into it. I have searched far and wide but I could only find results like convert Lottie JSON to GIF/MP4. But thats not what I really want. I found something from the Qt website.

I assume that some changes must be made in above code and then must be implemented as a style sheet in PyQt5. But I am completely new to StyleSheets

Can someone give a short example of implementation of Lottie JSON into PyQt5?

EDIT 1: According to a comment posted by @musicamante it is said that Qt uses QML for Lottie. I found this example usage. Can someone give a short Python implementation of it?


Solution

  • The following must be taken into account:

    For the last, because QtLottie is only focused on QML, then it is not necessary to create a binding for Python but to copy the binaries. The first thing is to know the version of Qt with which PyQt5 was compiled:

    python -c "from PyQt5.QtCore import QT_VERSION_STR; print('Qt version', QT_VERSION_STR)"
    

    In the case of PyQt5 5.15.4 it was compiled with Qt 5.15.2.

    To get the Qt binaries you can use aqtinstall and download qtlottie (the following command is for linux).

    python -m pip install aqtinstall
    python -m aqt install --outputdir Qt 5.15.2 linux desktop -m qtlottie
    

    To know the folder where to copy the following command must be executed:

    python -c "from pathlib import Path; import PyQt5; print(Path(PyQt5.__file__).resolve().parent / 'Qt5')"
    

    which we will call PyQt5_DIR.

    So you should copy file "Qt/5.15.2/gcc_64/lib/libQt5Bodymovin.so.5.15.2" to "PyQt5_DIR/lib/libQt5Bodymovin.so.5" and the folder "Qt/5.15.2/gcc_64/qml/Qt/labs/lottieqt" to "PyQt5_DIR/qml/Qt/labs".

    Now the solution is to use QQuickWidget to be able to use QML together with the QtWidgets:

    import os
    import sys
    from pathlib import Path
    
    from PyQt5 import QtCore, QtWidgets, QtQuickWidgets
    
    CURRENT_DIRECTORY = Path(__file__).resolve().parent
    
    
    if __name__ == "__main__":
    
        app = QtWidgets.QApplication(sys.argv)
    
        label_widget = QtWidgets.QLabel("Animation", alignment=QtCore.Qt.AlignCenter)
    
        animation_widget = QtQuickWidgets.QQuickWidget(
            resizeMode=QtQuickWidgets.QQuickWidget.SizeRootObjectToView
        )
        filename = os.fspath(CURRENT_DIRECTORY / "main.qml")
        url = QtCore.QUrl.fromLocalFile(filename)
        animation_widget.setSource(url)
    
        widget = QtWidgets.QWidget()
        lay = QtWidgets.QVBoxLayout(widget)
        lay.addWidget(label_widget, stretch=0)
        lay.addWidget(animation_widget, stretch=1)
        widget.resize(640, 480)
        widget.show()
    
        sys.exit(app.exec())
    

    main.qml

    import QtQuick 2.15
    import Qt.labs.lottieqt 1.0
    
    Item {
        width: 100
        height: 100
        LottieAnimation {
            anchors.fill: parent
            loops: LottieAnimation.Infinite
            source: "https://assets9.lottiefiles.com/temp/lf20_7rPCHc.json"
        }
    }
    

    Output:

    enter image description here