×
Namespaces

Variants
Actions
(Difference between revisions)

Basic animation in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Animation category)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
 
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:MeeGo]][[Category:Symbian]][[Category:Animation]]
 
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:MeeGo]][[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.}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media: FadingAnimationQt.zip]] [[Media: FadingAnimationWP7.zip]]
 
|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]]) -->
Line 9: Line 9:
 
|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==
Line 25: Line 33:
 
|-
 
|-
 
|  
 
|  
[[Image: FadingAnimationQt.png|thumb|201px| Fading Animation in Qt ]]  
+
[[File: FadingAnimationQt.png|thumb|201px| Fading Animation in Qt ]]  
 
||  
 
||  
[[Image: FadingAnimationWP7.png|thumb|201px| Fading Animation in WP7 ]]
+
[[File: FadingAnimationWP7.png|thumb|201px| Fading Animation in WP7 ]]
  
 
|-
 
|-
Line 70: Line 78:
 
</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], 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'''.
 
<code xml>
 
<code xml>
 
   <StackPanel>
 
   <StackPanel>
Line 83: Line 91:
 
                 </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"/>
 
                      
 
                      
  
Line 105: Line 113:
  
 
==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]]

Revision as of 03:49, 24 April 2012

This article demonstrates how to create basic animation in Qt and WP7.

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 (24 Apr 2012)

Contents

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.


Qt Windows Phone
Fading Animation in Qt
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 PropertyAnimation and for WP7 we have DoubleAnimation to create similar kind of effect. We will take an image as our animation object and this will be a continuous animation.


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.

Qt Project (main.qml)

We take an image as our animation object

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

To animation the image we use PropertyAnimation, where we change the opacity of the image to Zero. To create a continuous animation we make the animation loop as infinite. PauseAnimation property holds the duration of the animation pause as 1000 milliseconds

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

When all the components are ready we call the start() method to start the animation.

Component.onCompleted: animation.start();

WP7 Project (MainPage.xaml)

In WP7 we use DoubleAnimation, the animation object is set to an image and the Opacity is changed from 1 to 0 in a time duration. We also make this animation as infinite with RepeatBehavior property, AutoReverse property reverses the animation property, so when the Opacity is 0 it brings back to 1.

  <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

129 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.

×