有没有使用 Lottie 动画的 qt 应用程序的正常示例？答案

【问题标题】：Are there any normal examples of qt applications using Lottie animations?有没有使用 Lottie 动画的 qt 应用程序的正常示例？
【发布时间】：2021-03-29 18:07:17
【问题描述】：

有没有使用 Lottie 动画的 qt 应用程序的正常示例？

理想情况下，我想在 Android 和 iOS 上使用 QML 组件 LottieAnimation (https://doc.qt.io/qt-5/qml-qt-labs-lottieqt-lottieanimation.html)。

很高兴看到一个带有 Lottie 动画的工作示例，它具有正确的 json 文件，该文件在特定坐标中具有整个指定大小。

我现在做不到：

找不到动画 lottie json 文件以使动画在应用中工作
找不到lottie的json格式描述
无法将彩票图像放入指定的矩形中

main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12
import Qt.labs.lottieqt 1.0
import QtQuick.Controls 2.12

Window {
    id: idRoot
    width: 360
    height: 653
    visible: true
    title: qsTr("Hello World")

    RowLayout {
        id: idControls
        anchors {
            left: parent.left
            right: parent.right
        }

        Button {
            text: "start"
            onClicked: {
                idLottieAnimation.start()
            }
        }

        ColumnLayout {
            Layout.preferredWidth: 40
            Button {
                text: "+"
                Layout.fillWidth: true
                onClicked: {
                    //idContent.scale = idContent.scale * 1.1
                    idLottieAnimation.scale = idLottieAnimation.scale * 1.1
                    idLottieAnimation.x = 0
                    idLottieAnimation.y = 0
                }
            }
            Button {
                text: "-"
                Layout.fillWidth: true
                onClicked: {
                    //idContent.scale = idContent.scale / 1.1
                    idLottieAnimation.scale = idLottieAnimation.scale / 1.1
                    idLottieAnimation.x = 0
                    idLottieAnimation.y = 0
                }
            }
        }
        Text {
            Layout.fillWidth: true
            wrapMode: Text.Wrap
            text: "window: " + idRoot.width + "-" + idRoot.height + "\n"
                + "lottie: " + idLottieAnimation.width + "-" + idLottieAnimation.height + "\n"
                + idLottieAnimation.x + "-" + idLottieAnimation.y + "\n"
                + "scale: " + idLottieAnimation.scale

        }
    }

    Flickable {
        id: idFlickable
        anchors.fill: parent
        anchors.topMargin: idControls.height + 10
        contentWidth: idContent.width;
        contentHeight: idContent.height
        interactive: true
        clip: true


        Rectangle {
            id: idContent
            width: 1000
            height: 1000
            border.width: 1
            border.color: "gray"

            LottieAnimation {
                id: idLottieAnimation
                width: 200  // ignored
                height: 200 // ignored
                loops: LottieAnimation.Infinite //2
                source: "qrc:/lf30_editor_ms0xldnk.json"

                Rectangle {
                    anchors.fill: parent
                    anchors.margins: -1
                    color: "transparent"
                    border.width: 1
                    border.color: "red"
                }

                onStatusChanged: {
                    console.log("onStatusChanged:", status, source)
                    if (status === LottieAnimation.Ready) {
                        // any acvities needed before
                        // playing starts go here
                        console.log("gotoAndPlay:", startFrame)
                        gotoAndPlay(startFrame);
                    }
                }
                onFinished: {
                    console.log("Finished playing")
                }
           }
        }
    }
}

【问题讨论】：

标签： qt qml lottie

【解决方案1】：

Android 和 iOS 仅支持 Web 播放器处理的一小部分效果，这使得大部分动画非常有问题。请务必查看 Lordicon.com - 他们拥有最多的 Web、iOS 和 Android 支持的动画图标。 Useanimations.com 的图标少得多，但大多数也适用于移动项目。

【讨论】：

【解决方案2】：

我有一个关于桌面平台的想法。使用QQuickWidget 加载qml 脚本，其中使用QtLottie 加载Lottie json 文件。

【讨论】：