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

问题描述

有没有使用 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")
                }
           }
        }
    }
}

标签： qtqmllottie

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

问题描述

解决方案

推荐阅读