Animated Moving Ball in Qt and WP7

Comments

Hamishwillee - References References References

Hi Somnath

For me this is a really good example of why you need to provide references. In this case its not enough to provide links to API items - you need to link to the overviews for animation so that people can get the broad overview of animation that you're not going to provide in a simple example. I've done this by adding the SeeAlso section.

You need to do this because the article is very limited - a person reading about this will know that it is possible to animate on behaviours in Qt using SmoothAnimation and similar on WP for silverlight using a Storyboard. However this isn't enough for them to understand their options, or even that there are other animation options. I think you need to say a bit more about animating on Behaviour - what is actually going on here - you declare the Behaviour on X, y, and when these values change, the animation declared is used to move to the new position. Similar for WP. What are the other options to using storyboard?

I guess I'm saying that its not very useful just to compare code chunks. This shows one aspect of one way of doing something - it doesn't help people understand how to do something "similar" themselves. You need to provide a bit more background

Regards

Hamish

hamishwillee 08:31, 30 April 2012 (EEST)

Log in or Join to leave comments.

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

See Also

• QML Animations and Transitions
• Search (Windows Phone Dev Center)
• Animations Overview (MSDN)
  • Storyboards Overview

Article Metadata

---

Code Example

Source file: Media:MovingBallWp7.zip Media:MovingBallQML.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): N8 (Nokia Belle)

---

Compatibility

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

---

Platform Security

Signing Required: Self-Signed

---

Article

Keywords: Animation

Created: somnathbanik (14 Apr 2012)

Last edited: hamishwillee (10 Apr 2013)

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.

• 

  Animated moving ball in Qt

• 

  Animated moving ball in WP7

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"> 
<PointAnimation
x: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.

Summary

This article is mainly for beginners who want to have an idea about basic animation in both Qt and WP7.

Source Code

• The full source code of Qt example is available here: File:MovingBallQML.zip
• The full source code of WP7 example is available here: File:MovingBallWp7.zip