×
Namespaces

Variants
Actions
(Difference between revisions)

Animated Moving Ball in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik -)
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Qt Quick]][[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Animation]][[Category:Silverlight]]
{{Abstract|This article demonstrates how to create an animated moving ball in Qt and WP7.}}
+
{{Abstract|This article demonstrates how to create an animated moving ball using Qt Quick and WP7.}}
{{ArticleMetaData
+
{{SeeAlso|
|sourcecode= [[Media: MovingBallQML.zip]] [[Media: MovingBallWp7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
* [http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html QML Animations and Transitions]
 +
* [http://social.msdn.microsoft.com/Search/en-US/windowsphone?query&#61;Animations&refinement&#61;184&ac&#61;8 Search] (Windows Phone Dev Center)
 +
* [http://msdn.microsoft.com/en-us/library/ms752312.aspx Animations Overview] (MSDN)
 +
** [http://msdn.microsoft.com/en-us/library/ms742868.aspx Storyboards Overview]
 +
}}
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:MovingBallWp7.zip]] [[Media:MovingBallQML.zip]]  
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= N8(Nokia Belle), Windows Phone  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= N8 (Nokia Belle)
 
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
 
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
|platform= WP7.1, Symbian^3 OS  <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 7.5, Symbian^3
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 
|signing= Self-Signed <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing= Self-Signed <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Animation<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= Animation<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|creationdate= 15th April, 2012<!-- Format YYYYMMDD -->
+
|translated-by= <!-- [[User:XXXX]] -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20120414
 +
|author= [[User:Somnathbanik]]
 
}}
 
}}
 
==Introduction==
 
==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.  
+
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.  
 +
<gallery widths=200px heights=400px>
 +
File: MovingBallQML.png|Animated moving ball in Qt
 +
File: MovingBallWp7.png|Animated moving ball in WP7
 +
</gallery>
  
 +
{{Note|The screenshots above are static. The best way to view the animation is to run the code on a device or simulator.}}
  
{| class="wikitable"
+
==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 !! Windows Phone
+
|-
+
|
+
[[Image: MovingBallQML.png|thumb|201px| Animated moving ball in Qt]]
+
||
+
[[Image: MovingBallWp7.png|thumb|201px| Animated moving ball in WP7 ]]
+
  
|-
+
===Qt Project (MainPage.qml)===
| Example of Qt || Example of WP
+
We create a [http://doc.qt.nokia.com/4.7/qml-rectangle.html Rectangle] element with a certain {{Icode|radius}} to make it a circle.  
|}
+
<code css>
 
+
 
+
{{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.  
+
<code cpp>
+
 
Rectangle {
 
Rectangle {
 
             id: rectRed
 
             id: rectRed
Line 47: Line 51:
 
}
 
}
 
</code>
 
</code>
To change the  x and y coordinates of the circle in an animated manner we use  SmoothedAnimation
+
To change the  ''x'' and ''y'' coordinates of the circle in an animated manner we use  [http://doc.qt.nokia.com/4.7/qml-smoothedanimation.html SmoothedAnimation Element].
<code cpp>
+
<code css>
 
Behavior on x { SmoothedAnimation { velocity: 200 } }
 
Behavior on x { SmoothedAnimation { velocity: 200 } }
            Behavior on y { SmoothedAnimation { velocity: 200 } }
+
Behavior on y { SmoothedAnimation { velocity: 200 } }
 
+
 
</code>
 
</code>
When user clicks on any place of the device screen we catch the x and y coordinates and update the position of the circle.
+
When user clicks on any place of the device screen we catch the ''x'' and ''y'' coordinates and update the position of the circle.
<code cpp>
+
<code cpp-qt>
 
MouseArea{
 
MouseArea{
 
             anchors.fill:parent
 
             anchors.fill:parent
Line 67: Line 70:
 
</code>
 
</code>
 
This will give a feeling of linear animated behavior of the motion of the circle.  
 
This will give a feeling of linear animated behavior of the motion of the circle.  
 +
 
=== WP7 Project (MainPage.xaml)===
 
=== WP7 Project (MainPage.xaml)===
In WP7 we draw a Canvas and add a circle inside it using EllipseGeometry.
+
In WP7 we draw a Canvas and add a circle inside it using [http://msdn.microsoft.com/en-us/library/system.windows.media.ellipsegeometry.aspx EllipseGeometry].
 +
 
 
<code xml>
 
<code xml>
  <EllipseGeometry x:Name="myCircle"
+
<EllipseGeometry x:Name="myCircle"   Center="200,100" RadiusX="15" RadiusY="15" />
        Center="200,100" RadiusX="15" RadiusY="15" />
+
</code>
 +
 
 +
We then define a [http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx Storyboard] to animate the ball.
  
</code>
 
We use Storyboard to animate the ball.
 
 
<code xml>
 
<code xml>
 
+
<Storyboard x:Name="myStoryboard">  
<Storyboard x:Name="myStoryboard">
+
<PointAnimation
                    <PointAnimation
+
x:Name="myAnimation"
          x:Name="myAnimation"
+
Storyboard.TargetProperty="Center"
          Storyboard.TargetProperty="Center"
+
Storyboard.TargetName="myCircle"
          Storyboard.TargetName="myCircle"
+
Duration="0:0:0.5"/>
          Duration="0:0:0.5"/>
+
</Storyboard>
                    </Storyboard>
+
  
 
</code>
 
</code>
  
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.
+
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.
<code pp>
+
            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();
+
  
 +
<code cpp-qt>
 +
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();
 
</code>
 
</code>
  
This will give a similar animated behavior like Qt.  
+
This will give a similar animated behavior like Qt.
  
 
==Summary==
 
==Summary==
 
This article is mainly for beginners who want to have an idea about basic animation in both Qt and WP7.  
 
This article is mainly for beginners who want to have an idea about basic animation in both Qt and WP7.  
 
 
 
  
 
==Source Code==
 
==Source Code==
*The full source code of Qt example is available here: [[File: MovingBallQML.zip]]
+
*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]]
+
*The full source code of WP7 example is available here: [[File: MovingBallWp7.zip]][[Category:Windows Phone 7.5]]

Revision as of 08:16, 30 November 2012

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

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested 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)

Contents

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.pngNote: 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

205 page views in the last 30 days.
×