Basic animation in Qt and WP7

Comments

Komalpatel - What is storyboard and DoubleAnimation?

I am also getting error in method start_Animation. // Start the animation when the object loads.

       private void Start_Animation(object sender, EventArgs e)
       {

           myAnimation.Begin();

}

komalpatel 17:11, 3 January 2012 (EET)

Somnathbanik - What is storyboard and DoubleAnimation?

DoubleAnimation can be used to archive animated behavior in WP7 similar to as that of PropertyAnimation/ NumberAnimation/RotationAnimation in Qt Quick .

In this article the DoubleAnimation creates a transition between two double values, i.e. To and From of its property. And to animate the property we use Storyboard which targets Name and Property of the animation.

Please share the error

somnathbanik 09:28, 4 January 2012 (EET)

Komalpatel - What do lines at the top most portion of .xaml file maens for?

To try provided code to understand many topics, I need to make changes in lines: <phone:PhoneApplicationPage

   x:Class="weather.Page1"    
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
   mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
   shell:SystemTray.IsVisible="True"
       Title="MainWindow">

So I need to know about that first.

komalpatel 06:27, 5 January 2012 (EET)

Somnathbanik - What do lines at the top most portion of .xaml file maens for?

These are the namespace (xmlns) of the reference added in the project.

I believe remaining you can understand with the syntax, in simple word they are the resources and properties used in the project.

somnathbanik 09:14, 5 January 2012 (EET)

Log in or Join to leave comments.

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 (30 Nov 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