×
Namespaces

Variants
Actions
(Difference between revisions)

Basic animation in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik -)
 
somnathbanik (Talk | contribs)
(Somnathbanik -)
Line 1: Line 1:
[[Category:Windows Phone]]
+
[[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]]
 +
 
 
{{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
|sourcecode= [[Media: AnimationQt.zip]] [[Media: AnimationWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [[Media: FadingAnimationQt.zip]] [[Media: FadingAnimationWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.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 24: Line 26:
 
|-
 
|-
 
|  
 
|  
[[Image: AnimationQt.png|thumb|201px| Fading Animation in Qt ]]  
+
[[Image: FadingAnimationQt.png|thumb|201px| Fading Animation in Qt ]]  
 
||  
 
||  
[[Image: AnimationWP7.png|thumb|201px| Fading Animation  in WP7 ]]
+
[[Image: FadingAnimationWP7.png|thumb|201px| Fading Animation  in WP7 ]]
  
 
|-
 
|-
Line 33: Line 35:
  
 
==Basic Idea==
 
==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.
+
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.
  
  
Line 48: Line 50:
 
           }
 
           }
 
</code>
 
</code>
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
+
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>
 
<code cpp>
Line 64: Line 66:
 
         }
 
         }
 
</code>
 
</code>
When all the components are ready we call the start() method to start the animation.
+
When all the components are ready we call the {{Icode|start()}} method to start the animation.
 
<code cpp>
 
<code cpp>
 
Component.onCompleted: animation.start();
 
Component.onCompleted: animation.start();
 
</code>
 
</code>
 
===WP7 Project (MainPage.xaml) ===
 
===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
+
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 reverse the animation property, so when the Opacity is 0 it brings back to 1.
+
  property reverse the animation property, so when the {{Icode|Opacity}} is '''0''' it brings back to '''1'''.
 
<code cpp>
 
<code cpp>
 
   <StackPanel>
 
   <StackPanel>
Line 91: Line 93:
 
</code>  
 
</code>  
  
Loaded property start the animation by calling the method Start_Animation()
+
{{Icode|Loaded}} property start the animation by calling the method {{Icode|Start_Animation()}}
 
<code cpp>
 
<code cpp>
  
Line 106: Line 108:
  
 
==Source Code==
 
==Source Code==
The full source code  of Qt example is available here: [[File: AnimationQt.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: AnimationWP7.zip]]
+
*The full source code of  WP7 example is available here: [[File: FadingAnimationWP7.zip]]

Revision as of 15:19, 25 October 2011


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: somnathbanik (25 Oct 2011)

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 reverse 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

106 page views in the last 30 days.
×