Question

在我的QML程序中，我需要使用Animation来测试问题。请在您的系统上运行以下代码。我不知道为什么当我使用这个ParallelAnimation时，球不能反映它何时碰到墙壁！

这是 main.qml ：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 720
    height: 620

    Rectangle {
        id: table
        anchors.fill: parent
        color: "gray"

        Rectangle {
            id: ball
            property double xincrement: Math.random() + 0.5 
            property double yincrement: Math.random() + 0.5
            width: 15
            height: width
            radius: width / 2
            color: "white"
            x: 300; y: 300
        }

        Racket {
            id: myRacket
            x: table.width - 50
            y: table.height/3
            color: "blue"
        }

        ParallelAnimation {
            id: anim
            NumberAnimation {
                target: ball
                properties: "x"
                to: timer.xMove
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: timer.yMove
            }
        }

        Timer {
            id: timer
            interval: 20; repeat: true; running: true
            property double xMove: ball.x + ball.xincrement
            property double yMove: ball.y + ball.yincrement

            onTriggered: {
                if(ball.x + ball.width >= table.width || ball.x <= 0)
                    ball.xincrement *= -1

                xMove += ball.xincrement
                yMove += ball.yincrement
                anim.restart()

                if(ball.y <= 0 || ball.y + ball.height >= table.height)
                    ball.yincrement *= -1
            }
        }
    }
}

这里也是 Racket.qml ：

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65

    MouseArea {
        anchors.fill: root
        anchors.margins: -root.height
        drag.target: root
        drag.axis: Drag.YAxis
        drag.minimumY: 0
        drag.maximumY: 600
    }
}

EDIT1 ：

我在没有Animation的情况下使用了此代码，效果很好！（掉落的部分是相同的）

...
Rectangle {
            id: ball
            property double xincrement: Math.random() + 0.5
            property double yincrement: Math.random() + 0.5
            width: 15
            height: width
            radius: width / 2
            color: "white"
            x: 300; y: 300
        }
...

Timer {
            id: timer
            interval: 20; repeat: true; running: true

            onTriggered: {
                if(ball.x + ball.width >= table.width || ball.x <= 0)
                    ball.xincrement *= -1

                ball.x += ball.xincrement * 2.0
                ball.y += ball.yincrement * 2.0

                if(ball.y <= 0 || ball.y + ball.height >= table.height)
                    ball.yincrement *= -1
            }
        }
    }
}

Answer 1

您的问题是PropertyAnimation有a default duration of 250 ms。

添加

duration: 0

对你的两个NumberAnimation都会解决问题，相当于没有动画的第二个解决方案。

但是，您可以使用纯动画重现完全相同的行为而不使用任何Timer：

ParallelAnimation {
    id: anim

    property double xMove: ball.x + ball.xincrement
    property double yMove: ball.y + ball.yincrement

    NumberAnimation {
        target: ball
        properties: "x"
        to: anim.xMove
        duration: 20
    }

    NumberAnimation {
        target: ball
        properties: "y"
        to: anim.yMove
        duration: 20
    }

    onStopped: {
        updatePosition()
    }

    Component.onCompleted: {
        updatePosition()
    }

    function updatePosition() {
        if(ball.x + ball.width >= table.width || ball.x <= 0)
            ball.xincrement *= -1

        if(ball.y <= 0 || ball.y + ball.height >= table.height)
            ball.yincrement *= -1

        anim.xMove += ball.xincrement
        anim.yMove += ball.yincrement
        anim.restart()
    }
}

QML代码和动画无法按预期工作

1 个答案: