0

在我的 QML 程序中，我需要使用Animations 来测试问题。请在您的系统上运行以下代码。我不知道为什么当我使用它时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
    }
}

编辑1：

我在没有 s 的情况下使用了这段代码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
            }
        }
    }
}
4

1 回答 1

0

PropertyAnimation您的问题是默认持续时间为 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()
    }
}
于 2018-02-14T19:04:13.887 回答