Animated slide popup dialog using Qt Quick

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

Article Metadata

---

Code Example

Source file: Media: SlidePopUpQML.zip

Installation file: Media: SlidePopUpQML.sis

---

Tested with

SDK: Qt SDK 1.2

Devices(s): N8 (Nokia Belle)

---

Compatibility

Platform(s): 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.

• 

  Home Screen

• 

  Pop Up Dialog

Note: 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

• The full source code of the example is available here: File:SlidePopUpQML.zip