Animated slide popup dialog using Qt Quick

Comments

(no comments yet)

Log in or Join to leave comments.

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