×
Namespaces

Variants
Actions
(Difference between revisions)

Basic animation in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
vdharankar (Talk | contribs)
m (Vdharankar - - WP7 Project (MainPage.xaml))
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]]
+
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Animation]]
{{Abstract|This article demonstrates how   to create basic animation in   Qt and WP7.}}
+
{{Abstract|This article demonstrates how to create basic animation in Qt and WP7. For a more detailed explanation of animation on each framework see the topics [http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html QML Animation and Transitions] and [http://msdn.microsoft.com/en-us/library/cc189019(v=vs.96).aspx Windows Phone Animation Overview], respectively.}}
 
+
{{SeeAlso|
{{ArticleMetaData
+
* [http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html QML Animation and Transitions]
|sourcecode= [[Media: FadingAnimationQt.zip]] [[Media: FadingAnimationWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
* [http://msdn.microsoft.com/en-us/library/cc189019(v&#61;vs.96).aspx Windows Phone Animation Overview] (msdn)
 +
}}
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media: FadingAnimationQt.zip]] [[Media: FadingAnimationWP7.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= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
 
|devices= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
Line 9: Line 12:
 
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|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 -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|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= 25th October,2011<!-- Format YYYYMMDD -->
 
|creationdate= 25th October,2011<!-- Format YYYYMMDD -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|author= [[User:Somnathbanik]]
 
}}
 
}}
 
==Introduction==
 
==Introduction==
Animation are created by changing its property value over time to time.  We can create animation with the built-in element which are used to change the various type of property value.
+
The animation frameworks on Qt and Windows Phone are conceptually similar. To create an animation we specify a property to change and (possibly) its end points, and the animation framework(s) smoothly animates the property (and UI) according to some specified easing curve.
 
+
 
+
{| class="wikitable"
+
|-
+
! Qt !! Windows Phone
+
|-
+
|
+
[[Image: FadingAnimationQt.png|thumb|201px| Fading Animation in Qt ]]
+
||
+
[[Image: FadingAnimationWP7.png|thumb|201px| Fading Animation  in WP7 ]]
+
 
+
|-
+
| Example of Qt || Example of WP
+
|}
+
 
+
==Basic Idea==
+
Here we will see how can we create a basic fading animation for both Qt and WP7.  For Qt we will use the [http://doc.qt.nokia.com/4.7/qml-propertyanimation.html PropertyAnimation] and for WP7 we have [http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation%28v=VS.96%29.aspx DoubleAnimation] to create similar kind of effect. We will take an image as our animation object and this will be a continuous animation.
+
  
 +
This example shows how to fade an image on Qt and WP7 by animating its opacity.  For Qt we use the [http://doc.qt.nokia.com/4.7/qml-propertyanimation.html PropertyAnimation] and for WP7 we use [http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation%28v=VS.96%29.aspx DoubleAnimation] to create similar effect. In both cases the animations will cycle continuously.
 +
<gallery widths=200px heights=400px>
 +
File: FadingAnimationQt.png|Fading Animation in Qt
 +
File: FadingAnimationWP7.png|Fading Animation in WP7
 +
</gallery>
  
 
==Implementation==
 
==Implementation==
Lets create an empty project for both Qt and WP7, in this case first we will see how to create the animation example on Qt and will port the same code on WP7.  
+
First create an empty project for both Qt and WP7. The next section shows how to create the animation example on Qt. The following section then implements the same functionality on WP7.  
 
===Qt Project (main.qml)===
 
===Qt Project (main.qml)===
We take an image as our animation object  
+
We take an image as our object to be animated:
<code cpp>
+
<code css>
 
Image {
 
Image {
 
         id: imageAnimation
 
         id: imageAnimation
Line 49: Line 48:
 
           }
 
           }
 
</code>
 
</code>
To animation the image we use [http://doc.qt.nokia.com/4.7/qml-propertyanimation.html PropertyAnimation], where we change the {{Icode|opacity}} of the image to ''Zero''. To create a continuous animation we make the animation loop as infinite.  [http://doc.qt.nokia.com/4.7/qml-pauseanimation.html PauseAnimation]  property holds the duration of the animation pause as 1000 milliseconds
 
  
<code cpp>
+
To animate the opacity change we use a sequential animation. This animation first runs a [http://doc.qt.nokia.com/4.7/qml-pauseanimation.html PauseAnimation] with duration of 1000 milliseconds and then a  [http://doc.qt.nokia.com/4.7/qml-propertyanimation.html PropertyAnimation], changing the {{Icode|opacity}} of the image to 0. To create a continuous animation we set the animation loop  type to {{Icode|infinite}}. 
  
 +
<code css>
 
SequentialAnimation {
 
SequentialAnimation {
 
             id: animation
 
             id: animation
Line 65: Line 64:
 
         }
 
         }
 
</code>
 
</code>
When all the components are ready we call the {{Icode|start()}} method to start the animation.
+
We call the {{Icode|start()}} method to start the animation once the component has been created.
<code cpp>
+
<code javascript>
 
Component.onCompleted: animation.start();
 
Component.onCompleted: animation.start();
 
</code>
 
</code>
 +
 
===WP7 Project (MainPage.xaml) ===
 
===WP7 Project (MainPage.xaml) ===
In WP7 we use [http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation%28v=VS.96%29.aspx DoubleAnimation], the animation object is set to an image and the {{Icode|Opacity}} is changed from '''1''' to '''0''' in a time duration. We also make this animation as infinite with {{Icode|RepeatBehavior}} property, {{Icode|AutoReverse}} property reverses the animation property, so when the {{Icode|Opacity}} is '''0''' it brings back to '''1'''.
+
In WP7 we use [http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation%28v=VS.96%29.aspx DoubleAnimation] inside a StoryBoard. The animation object is set to an image and the property {{Icode|Opacity}} is changed from '''1.0''' to '''0.0''' over a specified duration. We also set this animation to infinite using the {{Icode|RepeatBehavior}} property. {{Icode|AutoReverse}} property reverses the animation property, so when the {{Icode|Opacity}} is '''0.0''' it brings back to '''1.0'''.
 
<code xml>
 
<code xml>
 
   <StackPanel>
 
   <StackPanel>
Line 83: Line 83:
 
                 </StackPanel.Resources>
 
                 </StackPanel.Resources>
 
                 <TextBlock Text="Fade In/Out Animation" FontSize="35" FontFamily="Times New Roman" Foreground="Red" Margin="70,100,0,0" />
 
                 <TextBlock Text="Fade In/Out Animation" FontSize="35" FontFamily="Times New Roman" Foreground="Red" Margin="70,100,0,0" />
           <Image Margin="0,100,0,0"  Height="200" Width="300" Source="Thumbnails/1.jpeg"  Loaded="Start_Animation" x:Name="MyAnimatedImage"/>
+
           <Image Margin="0,100,0,0"  Height="200" Width="300" Source="Thumbnails/1.jpeg"  Loaded="Start_Animation" x:Name="MyAnimatedImage"/>
                   
+
 
+
 
             </StackPanel>
 
             </StackPanel>
 
 
 
</code>  
 
</code>  
  
 
{{Icode|Loaded}} property start the animation by calling the method {{Icode|Start_Animation()}}
 
{{Icode|Loaded}} property start the animation by calling the method {{Icode|Start_Animation()}}
<code cpp>
+
<code csharp>
 
+
 
// Start the animation when the object loads.
 
// Start the animation when the object loads.
 
         private void Start_Animation(object sender, EventArgs e)
 
         private void Start_Animation(object sender, EventArgs e)
         {
+
         {
         
+
 
             myAnimation.Begin();
 
             myAnimation.Begin();
 
         }
 
         }
 
 
 
</code>
 
</code>
  
 
==Source Code==
 
==Source Code==
*The full source code of Qt example is available here: [[File: FadingAnimationQt.zip]]
+
*The full source code of Qt example is available here: [[File: FadingAnimationQt.zip]]
*The full source code of WP7 example is available here: [[File: FadingAnimationWP7.zip]]
+
*The full source code of WP7 example is available here: [[File: FadingAnimationWP7.zip]][[Category:Windows Phone 7.5]]

Revision as of 08:14, 30 November 2012

This article demonstrates how to create basic animation in Qt and WP7. For a more detailed explanation of animation on each framework see the topics QML Animation and Transitions and Windows Phone Animation Overview, respectively.

WP Metro Icon Porting.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): WP7 Emulator
CompatibilityArticle
Keywords: Animation
Created: somnathbanik (25 Oct 2014)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

The animation frameworks on Qt and Windows Phone are conceptually similar. To create an animation we specify a property to change and (possibly) its end points, and the animation framework(s) smoothly animates the property (and UI) according to some specified easing curve.

This example shows how to fade an image on Qt and WP7 by animating its opacity. For Qt we use the PropertyAnimation and for WP7 we use DoubleAnimation to create similar effect. In both cases the animations will cycle continuously.

Implementation

First create an empty project for both Qt and WP7. The next section shows how to create the animation example on Qt. The following section then implements the same functionality on WP7.

Qt Project (main.qml)

We take an image as our object to be animated:

Image {
id: imageAnimation
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: "Thumbnails/1.jpeg"
}

To animate the opacity change we use a sequential animation. This animation first runs a PauseAnimation with duration of 1000 milliseconds and then a PropertyAnimation, changing the opacity of the image to 0. To create a continuous animation we set the animation loop type to infinite.

SequentialAnimation {
id: animation
PauseAnimation { duration: 1000 }
PropertyAnimation {
target: imageAnimation
loops: Animation.Infinite
properties: "opacity"
duration: 800
to: 0
}
}

We call the start() method to start the animation once the component has been created.

Component.onCompleted: animation.start();

WP7 Project (MainPage.xaml)

In WP7 we use DoubleAnimation inside a StoryBoard. The animation object is set to an image and the property Opacity is changed from 1.0 to 0.0 over a specified duration. We also set this animation to infinite using the RepeatBehavior property. AutoReverse property reverses the animation property, so when the Opacity is 0.0 it brings back to 1.0.

  <StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="myAnimation">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedImage"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="Fade In/Out Animation" FontSize="35" FontFamily="Times New Roman" Foreground="Red" Margin="70,100,0,0" />
<Image Margin="0,100,0,0" Height="200" Width="300" Source="Thumbnails/1.jpeg" Loaded="Start_Animation" x:Name="MyAnimatedImage"/>
</StackPanel>

Loaded property start the animation by calling the method Start_Animation()

// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
myAnimation.Begin();
}

Source Code

119 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×