Wiki

Actions
(Difference between revisions)

Animated Moving Ball in Qt and Windows Phone

This article demonstrates how to create an animated moving ball using Qt Quick and WP7.

Code Example
Tested with
Devices(s): N8 (Nokia Belle)

Compatibility
Platform(s): Windows Phone 7.5, Symbian^3
Windows Phone 8
Windows Phone 7.5

Platform Security
Signing Required: Self-Signed

Article
Keywords: Animation
Created: somnathbanik (14 Apr 2012)
Last edited: hamishwillee (30 Nov 2012)

Introduction

This is a very basic article for beginners to show how to create an animated moving ball in both Qt and WP7. When user clicks on the device screen the ball moves to the clicked area.

Note: The screenshots above are static. The best way to view the animation is to run the code on a device or simulator.

Implementation

Both Qt and Windows Phone apps draw a circle. When a user clicks on the device screen we take the x and y coordinates of that point and change the ball position to that point with an animated behavior.

Qt Project (MainPage.qml)

We create a Rectangle element with a certain radius to make it a circle.

`Rectangle {             id: rectRed             width: 20; height: 20             radius: 10             color: "green"}`

To change the x and y coordinates of the circle in an animated manner we use SmoothedAnimation Element.

`Behavior on x { SmoothedAnimation { velocity: 200 } }Behavior on y { SmoothedAnimation { velocity: 200 } }`

When user clicks on any place of the device screen we catch the x and y coordinates and update the position of the circle.

`MouseArea{             anchors.fill:parent             onClicked:             {                 rectRed.x = mouseX                 rectRed.y = mouseY             }         }`

This will give a feeling of linear animated behavior of the motion of the circle.

WP7 Project (MainPage.xaml)

In WP7 we draw a Canvas and add a circle inside it using EllipseGeometry.

`<EllipseGeometry x:Name="myCircle"    Center="200,100" RadiusX="15" RadiusY="15" />`

We then define a Storyboard to animate the ball.

`<Storyboard x:Name="myStoryboard"> <PointAnimationx:Name="myAnimation"Storyboard.TargetProperty="Center"Storyboard.TargetName="myCircle"Duration="0:0:0.5"/></Storyboard>`

When user clicks on any place of the device screen it catches the x and y coordinates of the point and updates the position of the circle.

`double pointX = e.GetPosition(null).X;double pointY = e.GetPosition(null).Y;Point myPoint = new Point();myPoint.X = pointX;myPoint.Y = pointY;myAnimation.To = myPoint;myStoryboard.Begin();`

This will give a similar animated behavior like Qt.