A simple animation

[franky]

Hi all,

We have a simple rectangle:

Rectangle {
        id: root
        width: 800; height: 600
        border.width: 5
        border.color: "white"
        color: "green"
}

Rectangle {
        id: root
        width: 800; height: 600
        border.width: 5
        border.color: "white"
        color: "green"
}

To copy to clipboard, switch view to plain text mode 

And also a small ball as a white rectangle:

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "white"
    radius: width/2
}

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "white"
    radius: width/2
}

To copy to clipboard, switch view to plain text mode 

That ball is inside that rectangle. How to make that ball at a fixed speed go up and when it hits the upper side of the rectangle, it returns down and up again, for 10 times, please?

[high_flyer]

Show us what you have tried and explain to us what it does wrong.

[franky]

I tried to use NumberAnimation but it needs x and y properties, while I want the ball goes up/down/right/left just like a normal ball when you shoot it in a closed room and it goes toward any direction until it stops. What type of animations should I use for that and using what specifications, please?

[franky]

I used this:

main.qml:

import QtQuick 2.6
import QtQuick.Window 2.2
 
 Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Ball_in_Room")
 
    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "gray"
        color: "moccasin"
        property real xPos: root.width
        property real yPos: Math.random() * root.height
 
        Ball { id: ball }
 
        ParallelAnimation {
           id: anim
               NumberAnimation {
                        target: ball
                        properties: "x"
                        to: root.xPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
               NumberAnimation {
                        target: ball
                        properties: "y"
                        to: root.yPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
        }
 
         MouseArea {
             anchors.fill: ball
             onClicked: anim.start()
         }
       }
     }

import QtQuick 2.6
import QtQuick.Window 2.2

 Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Ball_in_Room")

    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "gray"
        color: "moccasin"
        property real xPos: root.width
        property real yPos: Math.random() * root.height

        Ball { id: ball }

        ParallelAnimation {
           id: anim
               NumberAnimation {
                        target: ball
                        properties: "x"
                        to: root.xPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
               NumberAnimation {
                        target: ball
                        properties: "y"
                        to: root.yPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
        }

         MouseArea {
             anchors.fill: ball
             onClicked: anim.start()
         }
       }
     }

To copy to clipboard, switch view to plain text mode 

Ball.qml:

import QtQuick 2.8
 
Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "blue"
    radius: width/2
}

import QtQuick 2.8

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "blue"
    radius: width/2
}

To copy to clipboard, switch view to plain text mode 

Would you please help me complete the animation?

[high_flyer]

Have a look here http://doc.qt.io/qt-5/qtquick-animation-example.html, specifically the section 'PropertyAnimation' which is basically doing what you want.