How to make the animation run as expected

deepak05

Here I want the heading to go in 45* angle from on place to another, but while coming back it is going to the top and then coming to the required place. This is the code:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.6

Window {
id: root
visible: true
title: qsTr("Hello World")
property bool fullScreen: true
height: 7804
width: 640

Item
{
    id:screen
    state: fullScreen?"landscape":"landscape-small"
    height: parent.height
    states: [
        State {
            name: "landscape"
            PropertyChanges {
                target: screen
                width:parent.width
            }
            AnchorChanges
            {
                target: screen

// anchors.fill: parent
anchors.left: root.left
}

            PropertyChanges {
                target: rect
                width:200
                height:200
            }
            AnchorChanges {
                target: name
                anchors.top: screen.top
                anchors.horizontalCenter: screen.horizontalCenter
            }
            PropertyChanges {
                target: name
                anchors.topMargin: 150
            }
            PropertyChanges {
                target: root
                width: 640
            }
        },
        State {
            name: "landscape-small"
            PropertyChanges {
                target: screen
                width: 200
                 anchors.right: parent.right

            }

            PropertyChanges {
                target: rect
                width:100
                height:100
            }
            AnchorChanges {
                target: name
                anchors.top: rect.bottom
                                anchors.horizontalCenter: screen.horizontalCenter

            }
            PropertyChanges {
                target: name
                anchors.topMargin: 20
            }
            PropertyChanges {
                target: root
                width: 300

            }
        }
    ]
    transitions: [
        Transition {
            from: "landscape"
            to: "landscape-small"
            ParallelAnimation
            {
                NumberAnimation
                {
                    target: root
                    property: "scale"
                    duration: 304
                    easing.type: Easing.Linear

// easing.bezierCurve: [0.5,0,0,1]
}
// PauseAnimation { duration: 100 }
ParallelAnimation
{
NumberAnimation
{
target: screen
duration: 304
easing.type: Easing.Linear
// easing.bezierCurve: [0.5,0.5,0,1]
property: "width"
}

                    NumberAnimation
                    {
                        target: name
                        //                    properties: "x,y"
                        duration: 304
                        easing.type: Easing.Linear
                        easing.bezierCurve: [0.5,0.5,0,1]
                        //                    to: rect.bottom
                        //                    from: screen.top
                    }
                    NumberAnimation
                    {
                        target: rect
                        property: "scale"
                        duration: 304
                        easing.type: Easing.Linear
                        easing.bezierCurve: [0.5,0,0,1]
                    }

                    AnchorAnimation
                    {
                        duration: 304
                        easing.type: Easing.Linear
                        easing.bezierCurve: [0.5,0.5,0,1]
                    }
                }
            }
        },
        Transition {
            from: "landscape-small"
            to: "landscape"

// ParallelAnimation
// {

                //                PauseAnimation { duration: 100 }
                ParallelAnimation
                {
                    NumberAnimation
                    {
                        target: root

// property: "scale"
properties: "x,y"
duration: 30
easing.type: Easing.Linear
easing.bezierCurve: [0.5,0,0,1]
}
AnchorAnimation
{
duration: 304
easing.type: Easing.Linear
easing.bezierCurve: [0.5,0,0,1]
}

                    NumberAnimation
                    {
                        target: screen
                        duration: 304
                        property: "width"
                        easing.type: Easing.Linear
                        easing.bezierCurve: [0.5,0.5,0,1]
                    }

// NumberAnimation
// {
// target: name
//// properties: "x,y"
// duration: 608
// easing.type: Easing.Linear
// easing.bezierCurve: [0.5,0,0,1]
// // to: screen.top
// // from: rect.bottom
// }
// NumberAnimation {
// target: name
// property: "x"
// to: screen.width / 2 - name.width / 2
// duration: 608
// easing.type: Easing.Linear
// }
// NumberAnimation {
// target: name
//// property: "y"
//// to: 150 // same as anchors.topMargin in "landscape"
// duration: 608
// easing.type: Easing.Linear
// }
PathAnimation
{
target: name

                    }

                    NumberAnimation
                    {
                        target: rect
                        property: "scale"
                        duration: 304
                        easing.type: Easing.Linear
                        easing.bezierCurve: [0.5,0,0,1]
                    }


                }

// NumberAnimation
// {
// target: root
// property: "scale"
// duration: 304
// easing.type: Easing.Linear
//// easing.bezierCurve: [0.5,0,0,1]
// }
// }
}
]
Rectangle
{
id: rect
width: 200
height: 200
color:"red"
anchors.right: parent.right
anchors.rightMargin: 40
anchors.verticalCenter: parent.verticalCenter
MouseArea
{
anchors.fill: parent
onClicked: fullScreen=!fullScreen
}
}
Text {
id: name
anchors.horizontalCenter: screen.horizontalCenter
text: qsTr("Highway to Hell")

        //        anchors.verticalCenter: parent.verticalCenter
    }
}

}

Markkyboy

Please learn to format your code correctly. It makes things so much easier for those attempting to help you.