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"
}

And also a small ball as a white rectangle:


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

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

Ball.qml:


import QtQuick 2.8

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


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.