×
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 (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Animation]]
+
[[Category:Porting Windows Phone and Qt]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]]
 
{{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.}}
 
{{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|
 
{{SeeAlso|
Line 8: Line 8:
 
|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]]) -->
|devices= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= Nokia Lumia 820, Lumia 920
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
+
|sdk= [http://www.microsoft.com/en-us/download/details.aspx?id=35471 Windows Phone SDK 8.0], Qt SDK 1.2
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 8.0/ 7.1
 
|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 -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->

Latest revision as of 08:01, 27 June 2013

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
SDK: Windows Phone SDK 8.0, Qt SDK 1.2
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Symbian
Article
Keywords: Animation
Created: somnathbanik (25 Oct 2014)
Last edited: hamishwillee (27 Jun 2013)

Contents

[edit] 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.

[edit] 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.

[edit] 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();

[edit] 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();
}

[edit] Source Code

This page was last modified on 27 June 2013, at 08:01.
136 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.

×