Basic animation in Qt and Windows Phone

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.

See Also

• QML Animation and Transitions
• Windows Phone Animation Overview (msdn)

Article Metadata

---

Code Example

Source file: Media: FadingAnimationQt.zip Media: FadingAnimationWP7.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): WP7 Emulator

---

Compatibility

Platform(s): WP7.1

---

Article

Keywords: Animation

Created: somnathbanik (25 Oct 2013)

Last edited: hamishwillee (25 Apr 2012)

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.

• 

  Fading Animation in Qt

• 

  Fading Animation in WP7

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

• 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