×
Namespaces

Variants
Actions
Revision as of 04:20, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Animated slide popup dialog using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create an animated slide popup dialog using Qt Quick.

Article Metadata
Code Example
Installation file: Media: SlidePopUpQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Compatibility
Platform(s): Symbian^3
Symbian
Symbian^3
Platform Security
Signing Required: Self-Signed
Article
Keywords: Popup, Dialog
Created: somnathbanik (05 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)

Introduction

In this article we will see how to create an animated slide popup dialog using SequentialAnimation. We will create a Button in the main screen and when user clicks on the Button it will display an animated popup dialog from the bottom of the screen.

Note.pngNote: This image isn't animated. Try the example to see it working!

Implementation

Let’s create an empty QML project. We will first create a Button in the home screen. Initially the y position of the popup Item is set out of the screen height, so that on Button click it changes it State from its initial position to y=0.

  states:
State {
name: "Item"; when: window.inSecondScreen == true
PropertyChanges { target: secondPage; y: 0; }
}

To make a smooth State change, we use Transition with a certain time duration.

             }
transitions: Transition {
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
}

We set a fading animation while loading and unloading the popup dialog, so that when user clicks on the Button we start the fade-in animation.

  SequentialAnimation {
id: animation
PauseAnimation { duration: 300 }
PropertyAnimation {
target: secondPage
properties: "opacity"
duration: 250
to: 1.0
}
}

And while unloading the popup dialog we start the fade-out animation using SequentialAnimation.

   SequentialAnimation {
id: animationreverse
PauseAnimation { duration: 50 }
PropertyAnimation {
target: secondPage
properties: "opacity"
duration: 200
to: 0
}
}

Using SequentialAnimation we change the opacity of the popup dialog while loading and unloading. This gives a slide popup effect while loading and unloading the popup screen.

Source Code

This page was last modified on 11 October 2012, at 04:20.
89 page views in the last 30 days.