Sequential movement of an object by coordinates

Question

I need to move an object by the clock and counterclockwise sequentially. But the for loop works differently, it only moves in the latter direction. When you click on the button, the object must first turn clockwise, and then counterclockwise. Maybe there is some kind of delay when performing the animation? How can I do it?

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();
                }
            }
        }
    }
}

Answer 1

The simplest answer to your problem is put your animations inside a SequentialAnimation, i.e.

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

Also, you should let QML use the default width and height of a Button. Here's the complete solution:

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();
            }
        }
    }
}