对象按坐标顺序移动答案

【问题标题】：Sequential movement of an object by coordinates对象按坐标顺序移动
【发布时间】：2022-09-28 14:04:45
【问题描述】：

我需要按时钟和逆时针顺序移动一个对象。但是 for 循环的工作方式不同，它只朝后一个方向移动。当您单击按钮时，对象必须先顺时针转动，然后再逆时针转动。执行动画时可能会有某种延迟？我该怎么做？

import QtQuick 2.15
import QtQuick.Window 2.14
import QtQuick3D 1.15
import QtQuick.Controls 2.14


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr(\"Hello World\")
    visibility: \"Maximized\"
    property int scl: 5
    property int angle: 360
    Node{
        id: standAloneScene
        DirectionalLight {
            ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
        }
        Node {
            id: sphere
            Model {
                id: model_sphere
                source: \"#Cube\"
                x: 200
                y: 100
                z: 0
                materials: [
                    DefaultMaterial {
                        diffuseColor: Qt.rgba(0.053, 0.130, 0.219, 0.75)
                    }
                ]
            }
        }
        ParallelAnimation{
            id: start
            running: false
            NumberAnimation {
                target: sphere
                property: \"eulerRotation.y\"
                to: angle
                duration: 2000
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: model_sphere
                property: \"eulerRotation.y\"
                to: 2*angle
                duration: 2000
                easing.type: Easing.InOutQuad
            }
        }

        OrthographicCamera {
            id: cameraOrthographicFront
            eulerRotation.y: 45
            eulerRotation.x: -45
            x: 600
            y: 800
            z: 600
        }
    }
    Rectangle {
        id: view
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        height: parent.height
        color: \"#848895\"
        border.color: \"black\"

        View3D {
            id: topLeftView
            anchors.fill: parent
            importScene: standAloneScene
            camera: cameraOrthographicFront
        }
        Button {
            id: posmoveZ
            width: view.width/8
            height: view.height/16
            anchors.top: view.top
            anchors.right: view.right
            text: \"start\"
            font.pixelSize: height
            onClicked: {
                for(var i=0; i<6; i++){
                    if(i % 2 == 0){
                        angle = 360
                    }
                    else{
                        angle = -360
                    }
                    start.restart();
                }
            }
        }
    }
}

你知道将ParallelAnimation 放在SequentialAnimation 中有点令人沮丧吗？

标签： qt animation 3d qml qt5.15

【解决方案1】：

对您的问题最简单的答案是将您的动画放入 SequentialAnimation 中，即

SequentialAnimation {
    loops: 3
    ParallelAnimation {
        id: clockwise
        NumberAnimation { /* ... */ }
        NumberAnimation { /* ... */ }
    }
    ParallelAnimation {
        id: counterClockwise
        NumberAnimation { /* ... */ }
        NumberAnimation { /* ... */ }
    }
}

此外，您应该让 QML 使用 Button 的默认宽度和高度。这是完整的解决方案：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    visibility: "Maximized"
    property int scl: 5
    property int angle: 360

    Node{
        id: standAloneScene
        DirectionalLight {
            ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
        }
        Node {
            id: sphere
            Model {
                id: model_sphere
                source: "#Cube"
                x: 200
                y: 100
                z: 0
                materials: [
                    DefaultMaterial {
                        diffuseColor: Qt.rgba(0.053, 0.130, 0.219, 0.75)
                    }
                ]
            }
        }

        SequentialAnimation {
            id: sequentialAnimation
            loops: 3
            ParallelAnimation{
                id: clockwise
                running: false
                property int count: 3
                NumberAnimation {
                    target: sphere
                    property: "eulerRotation.y"
                    from: 360
                    to: 0
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: model_sphere
                    property: "eulerRotation.y"
                    from: 720
                    to: 0
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
            }
            ParallelAnimation{
                id: counterClockwise
                running: false
                NumberAnimation {
                    target: sphere
                    property: "eulerRotation.y"
                    from: 0
                    to: 360
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: model_sphere
                    property: "eulerRotation.y"
                    from: 0
                    to: 720
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
            }
        }

        OrthographicCamera {
            id: cameraOrthographicFront
            eulerRotation.y: 45
            eulerRotation.x: -45
            x: 600
            y: 800
            z: 600
        }
    }
    Rectangle {
        id: view
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        height: parent.height
        color: "#848895"
        border.color: "black"

        View3D {
            id: topLeftView
            anchors.fill: parent
            importScene: standAloneScene
            camera: cameraOrthographicFront
        }
        Button {
            id: posmoveZ
            anchors.top: view.top
            anchors.right: view.right
            anchors.margins: 10
            text: "start"
            font.pixelSize: height
            enabled: !clockwise.running && !counterClockwise.running
            onClicked: {
                sequentialAnimation.restart();
            }
        }
    }
}

【讨论】：