问题描述
是否有使用 Lottie 动画的 qt 应用程序的正常示例?
理想情况下,我想为 Android 和 iOS 使用 QML 组件 LottieAnimation (https://doc.qt.io/qt-5/qml-qt-labs-lottieqt-lottieanimation.html)。
看到一个 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")
}
}
}
}
}
解决方法
Android 和 iOS 仅支持由网络播放器处理的一小部分效果,这使得大部分动画都出现故障。请务必查看 Lordicon.com - 他们拥有最多的 Web、iOS 和 Android 支持的动画图标。 Useanimations.com 的图标很少,但大多数也适用于移动项目。