Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Animated slide popup dialog using Qt Quick

From 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 01:20.
120 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×