Animated Moving Ball in Qt and Windows Phone

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

Article Metadata

---

Code Example

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

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): N8(Nokia Belle), Windows Phone

---

Compatibility

Platform(s): WP7.1, Symbian^3 OS

---

Platform Security

Signing Required: Self-Signed

---

Article

Keywords: Animation

Created: somnathbanik (15 Apr 2013)

Last edited: somnathbanik (14 Apr 2012)

Introduction

This is a very basis 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.

Qt	Windows Phone
Animated moving ball in Qt	Animated moving ball in WP7
Example of Qt	Example of WP

Note: The animation is not clear in these images, to get the actual effect please try it on device.

Implementation

Let’s create an empty project for both Qt and WP7. First we will work on Qt project and then will move on to WP7 project. We will create a circular area and when 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 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 use 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.

Invalid language.

You need to specify a language like this: <source lang="html4strict">...</source>

Supported languages for syntax highlighting:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, asm, asp, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, oobas, oracle11, oracle8, oxygene, oz, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, python, q, qbasic, rails, rebol, reg, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, uscript, vala, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic

            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