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

Question

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

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

看到一个使用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")
}
}
}
}
}

Answer 1

Android和iOS只支持网络播放器处理的一小部分效果，这使得大多数动画都出现了故障。请务必查看Lordicon.com，它们拥有Web、iOS和Android支持的最多的动画图标。Useanimations.com的图标很少，但大多数图标也适用于移动项目。

Answer 2

我对桌面平台有一个想法。使用QQuickWidget加载qml脚本，在该脚本中加载带有QtLottie的Lottie json文件。