Topmost semi transparent Click Through window with fade animation

Welcome,

This article is a follow up of the partly same named article, please start there if you come here first:

click to the begining

This time we extend our few lines of example with few lines of animation. This example is also use the Qt's framework capabilities like property animation and state machine.

First we initialize our state machine. For this fade animation we will add two state to the notification dialog. One is a hidden state with opacity of 0 (fully transparent) and the other is the visible state with the opacity of 0.9 (transparent).

...
    _stateMachine = new QStateMachine();

    QState* hide = new QState();
    QState* show = new QState();

    hide->assignProperty(_notificationDialog, "windowOpacity", 0.0);
    show->assignProperty(_notificationDialog, "windowOpacity", 0.9);

    auto st1 = hide->addTransition(this, SIGNAL(signalFadeIn()), show);
    st1->addAnimation(new QPropertyAnimation(_notificationDialog, "windowOpacity"));
    auto st2 = show->addTransition(this, SIGNAL(signalFadeOut()), hide);
    st2->addAnimation(new QPropertyAnimation(_notificationDialog, "windowOpacity"));

    _stateMachine->addState(hide);
    _stateMachine->addState(show);
    _stateMachine->setInitialState(hide);
    _stateMachine->start();
...

The first lines is the states, which we assign values. The "windowOpacity" property sets the windows opaque/transparent states. The transitions are connecting which state follow the other. In the current example is really simple show->hide->show.

We almost set!

We only need a really simple method of calling different states!

...
    emit this->signalFadeIn();

    QTimer::singleShot(5000, [this](){
        emit this->signalFadeOut();
    });
...

That's it! We start with a simple fade in animation and after 5 seconds the dialog will disappear.

The example source code could be download from HERE!

 

Thanks for visiting.

 

ps.:

we should set the notification window position because we create it within the main dialog constructor.

Tags: 
Headline: 
Topmost transparent window with fade animation
Date modified: 
Wednesday, January 4, 2017 - 22:00
Date published: 
Main entity of page: 
https://www.gepardorm.eu/content/topmost-semi-transparent-click-through-window-fade-animation
Keywords: 
C++,Transparent,Click Through,Dialog,Qt,Lambda,Example,QPropertyAnimation,QStateMachine
Author: 
Publisher: 
Mega-Siraj Bt