动画持续时间不正确
Incorrect animation duration
我注意到 QML 的动画行为非常奇怪。
我开发了一个测试应用程序来使用动画功能。
在办公室的 PC 上,我在 Windows 7 64 位下安装了 Qt 5.4。
我确定动画 "played" 比预期的持续时间快。
例如
// *** Image item for "Failure" event ***
Image{
id: failPanel
x: 300
y: -300
source: "images/fail.png"
scale: 0.5
visible: false
function startAnim() {
visible = true
x = 300
y = -300
failAnim.restart()
}
SequentialAnimation {
id: failAnim
NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}
}
}
一切播放速度都比指定的持续时间快得多我没有注意它,直到我在家里用更快的 PC(Windows 8 64 位)重新编译相同的源代码。
在我的个人电脑上,动画按预期时间播放...
很奇怪。
好吧,我想知道是否有人已经遇到过这个问题,或者是否有与此主题相关的特定 QML 设置?
您可以使用JavaScript
的Date
对象来验证时间是否正确:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: root
y: 30
width: 1000
height: 800
visible: true
Rectangle{
id: failPanel
x: 300
y: -300
color: "red"
scale: 0.5
width: 400
height: 400
visible: false
property var startDate
Component.onCompleted: startAnim()
function startAnim() {
visible = true
x = 300
y = -300
failAnim.restart()
startDate = new Date()
print("started animation at", startDate.toISOString())
}
SequentialAnimation {
id: failAnim
NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}
onStopped: print("finished animation at", new Date().toISOString())
}
}
}
对我来说(Windows 10,Qt 5.6),它有效:
qml: started animation at 2016-01-31T06:29:31.209Z
qml: finished animation at 2016-01-31T06:29:34.631Z
您的问题听起来类似于 this 错误报告。您或许也能在那里找到类似的。
如果可能的话,我还建议尝试使用更新版本的 Qt。
我工作的公司也有类似的问题。
问题似乎是我们在启动动画后占用了主线程几毫秒。如果主线程正在工作,则 gui 不会更新,因为没有处理任何更新事件。当控制最终 returns 到事件循环时,所有更新事件都会立即处理,导致动画 ro 运行 更快。
解决方案是在您的程序 运行 空闲时启动动画。最简单的方法可能是连接一个插槽以使用排队连接的信号启动动画。然后动画将在控制权交给事件循环后开始。
我注意到 QML 的动画行为非常奇怪。 我开发了一个测试应用程序来使用动画功能。 在办公室的 PC 上,我在 Windows 7 64 位下安装了 Qt 5.4。
我确定动画 "played" 比预期的持续时间快。 例如
// *** Image item for "Failure" event ***
Image{
id: failPanel
x: 300
y: -300
source: "images/fail.png"
scale: 0.5
visible: false
function startAnim() {
visible = true
x = 300
y = -300
failAnim.restart()
}
SequentialAnimation {
id: failAnim
NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}
}
}
一切播放速度都比指定的持续时间快得多我没有注意它,直到我在家里用更快的 PC(Windows 8 64 位)重新编译相同的源代码。 在我的个人电脑上,动画按预期时间播放...
很奇怪。 好吧,我想知道是否有人已经遇到过这个问题,或者是否有与此主题相关的特定 QML 设置?
您可以使用JavaScript
的Date
对象来验证时间是否正确:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: root
y: 30
width: 1000
height: 800
visible: true
Rectangle{
id: failPanel
x: 300
y: -300
color: "red"
scale: 0.5
width: 400
height: 400
visible: false
property var startDate
Component.onCompleted: startAnim()
function startAnim() {
visible = true
x = 300
y = -300
failAnim.restart()
startDate = new Date()
print("started animation at", startDate.toISOString())
}
SequentialAnimation {
id: failAnim
NumberAnimation{ target: failPanel; property: "y"; to:300; duration: 700; easing.type: Easing.InOutQuad}
NumberAnimation{ target: failPanel; property: "y"; to:500; duration: 2000 }
NumberAnimation{ target: failPanel; property: "x"; to:-1500; duration: 700; easing.type: Easing.InBack}
onStopped: print("finished animation at", new Date().toISOString())
}
}
}
对我来说(Windows 10,Qt 5.6),它有效:
qml: started animation at 2016-01-31T06:29:31.209Z
qml: finished animation at 2016-01-31T06:29:34.631Z
您的问题听起来类似于 this 错误报告。您或许也能在那里找到类似的。
如果可能的话,我还建议尝试使用更新版本的 Qt。
我工作的公司也有类似的问题。 问题似乎是我们在启动动画后占用了主线程几毫秒。如果主线程正在工作,则 gui 不会更新,因为没有处理任何更新事件。当控制最终 returns 到事件循环时,所有更新事件都会立即处理,导致动画 ro 运行 更快。
解决方案是在您的程序 运行 空闲时启动动画。最简单的方法可能是连接一个插槽以使用排队连接的信号启动动画。然后动画将在控制权交给事件循环后开始。