×
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 - Subedit)
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
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 Harmattan]][[Category:Symbian]][[Category:Animation]]
 
{{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|

Revision as of 13:51, 13 June 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 (13 Jun 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

163 page views in the last 30 days.