Qt Lottie动画

Lottie是由矢量图形组成的动画

QML VectorImage：https://doc.qt.io/qt-6/zh/qml-qtquick-vectorimage-vectorimage.html

QML LottieAnimation：https://doc.qt.io/qt-6/zh/qml-qt-labs-lottieqt-lottieanimation.html

下载公开的Lottie动画：https://lottiefiles.com/free-animations/free

WEB中制做Lottie动画：http://creator.lottiefiles.com/

也可以用Adobe after effects

安装Qt Lottie

在Maintenance.exe中安装Qt Lottie

配置

LottieAnimation不需要额外配置，安装后在QML中import Qt.lottieqt即可使用类型

VectorImage原本用于加载svg，如果想加载Lottie需要插件（显示Lottie时边缘不够锐利，不建议使用），配置步骤：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QStandardPaths>
#include <QLibraryInfo>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);

    QCoreApplication::addLibraryPath(
        "C:/Qt/6.11.1/mingw_64/plugins" //添加插件目录
    ); 

    engine.loadFromModule("qml_quick", "Main");
    return QGuiApplication::exec();
}

插件一般在：C:\Qt\6.11.1\mingw_64\plugins\vectorimageformats\qlottievectorimage.dll

使用

import Qt.labs.lottieqt

LottieAnimation {
    scale: 0.3
    source: "json/Success.json"
    autoPlay: true
    loops: -1
}
//或
VectorImage {
    width: 350
    height: 350
    source: "json/Success.json"
    assumeTrustedSource: true //加载lottieqt插件并且此属性设置为真时，才可以加载Lottie JSON
}