Revision as of 09:13, 20 April 2012 by hamishwillee (Talk | contribs)

Basic animation in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

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
Keywords: Animation
Created: somnathbanik (25 Oct 2014)
Last edited: hamishwillee (20 Apr 2012)



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.


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.

<Storyboard x:Name="myAnimation">
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
<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"/>

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)

Source Code

165 page views in the last 30 days.