Revision as of 03:49, 24 April 2012

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

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

• 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