Qt - Create Button with images which fade out & fade in in parallel on hoverEvent
In C++/Qt6, I would like to develop a button with an animation (I imagine that I'll have to use QParallelAnimationGroup) which fade out an image in parallel of a fade in another image as the icon of the button.
Here is what I want (made with a movie maker):
button fade out-fade in images, demo of the effect I'm looking for
I already developed a QToolButton with animations that makes the button fade out, then fade in (in sequence) with a new icon. I used QPropertyAnimation and QSequentialAnimationGroup Here is the code :
.h
#ifndef FADINGIMAGESPUSHBUTTON_H
#define FADINGIMAGESPUSHBUTTON_H
#include <QToolButton>
#include <QPropertyAnimation>
#include <QGraphicsOpacityEffect>
#include <QSequentialAnimationGroup>
class FadingImagesPushButton : public QToolButton
{
Q_OBJECT
public:
FadingImagesPushButton(QWidget *parent = nullptr, const QString & title = "", const QString & imageNormalPath = "", const QString & imageHoverPath = "");
protected:
static const int s_AnimDuration;
virtual bool event(QEvent * e) override;
void hoverEnter();
void hoverLeave();
QString m_imageNormalPath;
QString m_imageHoverPath;
int m_curTimeAnim_toHover;
int m_curTimeAnim_toNormal;
QPropertyAnimation *m_AnimNormalFadeOut;
QPropertyAnimation *m_AnimHoverFadeIn;
QPropertyAnimation *m_AnimHoverFadeOut;
QPropertyAnimation *m_AnimNormalFadeIn;
QSequentialAnimationGroup *m_toHoverAnimGroup;
QSequentialAnimationGroup *m_toNormalAnimGroup;
QGraphicsOpacityEffect *m_effect;
protected slots:
void switchToHoverImage();
void switchToNormalImage();
void deleteAndNullToHoverAnimGroup();
void deleteAndNullToNormalAnimGroup();
};
#endif // FADINGIMAGESPUSHBUTTON_H
.cpp
#include "fadingimagespushbutton.h"
#include <QEvent>
const int FadingImagesPushButton::s_AnimDuration = 800;
FadingImagesPushButton::FadingImagesPushButton(QWidget *parent,const QString & title, const QString & imageNormalPath, const QString & imageHoverPath)
:QToolButton(parent),m_imageNormalPath(imageNormalPath),m_imageHoverPath(imageHoverPath)
{
setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
setFixedSize(275,280);
setIconSize(QSize(270,240));
QFont font;
font.setPointSize(18);
setAttribute(Qt::WA_Hover);
setFont(font);
setText(title);
setIcon(QIcon(m_imageNormalPath));
m_effect = new QGraphicsOpacityEffect(this);
setGraphicsEffect(m_effect);
m_toHoverAnimGroup = nullptr;
m_toNormalAnimGroup = nullptr;
}
bool FadingImagesPushButton::event(QEvent *e)
{
switch(e->type())
{
case QEvent::HoverEnter:
hoverEnter();
return QToolButton::event(e);
case QEvent::HoverLeave:
hoverLeave();
return QToolButton::event(e);
default:
break;
}
return QToolButton::event(e);
}
void FadingImagesPushButton::hoverEnter()
{
int realDurationFadeOut = s_AnimDuration;
int realDurationFadeIn = s_AnimDuration;
if(m_toNormalAnimGroup)
{
int animGroupDuration = m_toNormalAnimGroup->currentTime();
if(animGroupDuration < s_AnimDuration)
{
realDurationFadeOut = 0;
realDurationFadeIn = animGroupDuration;
}
else
{
realDurationFadeOut = animGroupDuration - s_AnimDuration;
realDurationFadeIn = s_AnimDuration;
}
m_toNormalAnimGroup->stop();
}
if(realDurationFadeOut !=0)
{
m_AnimNormalFadeOut = new QPropertyAnimation(m_effect,"opacity");
m_AnimNormalFadeOut->setDuration(realDurationFadeOut);
m_AnimNormalFadeOut->setStartValue(1.*((float)realDurationFadeOut/(float)s_AnimDuration));
m_AnimNormalFadeOut->setEndValue(0.);
m_AnimNormalFadeOut->setEasingCurve(QEasingCurve::InBack);
}
m_AnimHoverFadeIn = new QPropertyAnimation(m_effect,"opacity");
m_AnimHoverFadeIn->setDuration(realDurationFadeIn);
m_AnimHoverFadeIn->setStartValue(1. - ((float)realDurationFadeIn/(float)s_AnimDuration));
m_AnimHoverFadeIn->setEndValue(1.);
m_AnimHoverFadeIn->setEasingCurve(QEasingCurve::InBack);
m_toHoverAnimGroup = new QSequentialAnimationGroup(this);
if(realDurationFadeOut !=0)
m_toHoverAnimGroup->addAnimation(m_AnimNormalFadeOut);
m_toHoverAnimGroup->addAnimation(m_AnimHoverFadeIn);
connect(m_toHoverAnimGroup,&QSequentialAnimationGroup::currentAnimationChanged, this, &FadingImagesPushButton::switchToHoverImage);
connect(m_toHoverAnimGroup,&QSequentialAnimationGroup::finished, this, &FadingImagesPushButton::deleteAndNullToHoverAnimGroup);
m_toHoverAnimGroup->start();
}
void FadingImagesPushButton::hoverLeave()
{
int realDurationFadeOut = s_AnimDuration;
int realDurationFadeIn = s_AnimDuration;
if(m_toHoverAnimGroup)
{
int animGroupDuration = m_toHoverAnimGroup->currentTime();
if(animGroupDuration < s_AnimDuration)
{
realDurationFadeOut = 0;
realDurationFadeIn = animGroupDuration;
}
else
{
realDurationFadeOut = animGroupDuration - s_AnimDuration;
realDurationFadeIn = s_AnimDuration;
}
m_toHoverAnimGroup->stop();
}
if(realDurationFadeOut !=0)
{
m_AnimHoverFadeOut = new QPropertyAnimation(m_effect,"opacity");
m_AnimHoverFadeOut->setDuration(realDurationFadeOut);
m_AnimHoverFadeOut->setStartValue(1.*((float)realDurationFadeOut/(float)s_AnimDuration));
m_AnimHoverFadeOut->setEndValue(0.);
m_AnimHoverFadeOut->setEasingCurve(QEasingCurve::InBack);
}
m_AnimNormalFadeIn = new QPropertyAnimation(m_effect,"opacity");
m_AnimNormalFadeIn->setDuration(realDurationFadeIn);
m_AnimNormalFadeIn->setStartValue(1.-((float)realDurationFadeIn/(float)s_AnimDuration));
m_AnimNormalFadeIn->setEndValue(1.);
m_AnimNormalFadeIn->setEasingCurve(QEasingCurve::InBack);
m_toNormalAnimGroup = new QSequentialAnimationGroup(this);
if(realDurationFadeOut !=0)
m_toNormalAnimGroup->addAnimation(m_AnimHoverFadeOut);
m_toNormalAnimGroup->addAnimation(m_AnimNormalFadeIn);
connect(m_toNormalAnimGroup,&QSequentialAnimationGroup::currentAnimationChanged, this, &FadingImagesPushButton::switchToNormalImage);
connect(m_toNormalAnimGroup,&QSequentialAnimationGroup::finished, this, &FadingImagesPushButton::deleteAndNullToNormalAnimGroup);
m_toNormalAnimGroup->start();
}
void FadingImagesPushButton::switchToHoverImage()
{
setIcon(QIcon(m_imageHoverPath));
}
void FadingImagesPushButton::switchToNormalImage()
{
setIcon(QIcon(m_imageNormalPath));
}
void FadingImagesPushButton::deleteAndNullToHoverAnimGroup()
{
m_toHoverAnimGroup = nullptr;
}
void FadingImagesPushButton::deleteAndNullToNormalAnimGroup()
{
m_toNormalAnimGroup = nullptr;
}
and the result in demo :
Solution
I manage to apply the effect expected, here is the code.
NB : in my case the second image (hover) is a layer that I apply above the normal image, but if you want to merge two different images, just change applyComposition() a little
NB2 : we will want to test the computing load. Applying two QPainter each 50 ms may not be the best way. Maybe prebuild 16 images with QPainter would be better
.h
#ifndef FADINGIMAGESPUSHBUTTON_H
#define FADINGIMAGESPUSHBUTTON_H
#include <QToolButton>
#include <QElapsedTimer>
class FadingImagesPushButton : public QToolButton
{
Q_OBJECT
public:
FadingImagesPushButton(QWidget *parent = nullptr, const QString & title = "", const QString & imageNormalPath = "", const QString & imageHoverPath = "");
protected:
static const int s_AnimDuration;
virtual bool event(QEvent * e) override;
QString m_imageNormalPath;
QString m_imageHoverPath;
QElapsedTimer toHoverTimer;
QElapsedTimer toNormalTimer;
void applyComposition();
qreal m_currentOpacity;
qreal m_leaveLastOpacity;
qreal m_enterLastOpacity;
QImage m_hoverLayer;
QImage m_normalImage;
bool m_leavingNow;
bool m_enteringNow;
protected slots:
void hoverEnter();
void hoverLeave();
};
#endif // FADINGIMAGESPUSHBUTTON_H
.cpp
#include "fadingimagespushbutton.h"
#include <QEvent>
#include <QPainter>
#include <QImage>
#include <QTimer>
const int FadingImagesPushButton::s_AnimDuration = 800;
FadingImagesPushButton::FadingImagesPushButton(QWidget *parent,const QString & title, const QString & imageNormalPath, const QString & imageHoverPath)
:QToolButton(parent),m_imageNormalPath(imageNormalPath),m_imageHoverPath(imageHoverPath)
{
setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
setText(title);
setAttribute(Qt::WA_Hover);
setIcon(QIcon(m_imageNormalPath));
m_hoverLayer.load(m_imageHoverPath,"PNG");
m_normalImage.load(m_imageNormalPath,"PNG");
m_leaveLastOpacity = 1.;
m_enterLastOpacity = 0.;
m_leavingNow = false;
m_enteringNow = false;
}
bool FadingImagesPushButton::event(QEvent *e)
{
switch(e->type())
{
case QEvent::HoverEnter:
m_enteringNow = true;
m_leavingNow = false;
toHoverTimer.start();
hoverEnter();
return QToolButton::event(e);
case QEvent::HoverLeave:
m_leavingNow = true;
m_enteringNow = false;
toNormalTimer.start();
hoverLeave();
return QToolButton::event(e);
default:
break;
}
return QToolButton::event(e);
}
void FadingImagesPushButton::hoverEnter()
{
if(m_enteringNow && !m_leavingNow && toHoverTimer.elapsed() < toNormalTimer.elapsed())
{
m_currentOpacity = m_leaveLastOpacity - (float)toHoverTimer.elapsed() / (float)s_AnimDuration;
if(m_currentOpacity < 0.)
m_currentOpacity = 0.;
applyComposition();
m_enterLastOpacity = m_currentOpacity;
if(m_currentOpacity > 0.)
{
QTimer::singleShot(50,this,&FadingImagesPushButton::hoverEnter);
}
else
{
m_enteringNow = false;
}
}
}
void FadingImagesPushButton::hoverLeave()
{
if(m_leavingNow && !m_enteringNow && toNormalTimer.elapsed() < toHoverTimer.elapsed())
{
m_currentOpacity = m_enterLastOpacity + (float)toNormalTimer.elapsed() / (float)s_AnimDuration;
if(m_currentOpacity > 1.)
m_currentOpacity = 1.;
applyComposition();
m_leaveLastOpacity = m_currentOpacity;
if(m_currentOpacity < 1.)
{
QTimer::singleShot(50,this,&FadingImagesPushButton::hoverLeave);
}
else
{
m_leavingNow = false;
}
}
}
void FadingImagesPushButton::applyComposition()
{
QImage result = m_hoverLayer.convertToFormat(QImage::Format_ARGB32);
QPixmap mask(result.size());
QPainter painterOpacity(&result);
painterOpacity.setCompositionMode(QPainter::CompositionMode_DestinationOut);
painterOpacity.setOpacity(m_currentOpacity);
painterOpacity.drawPixmap(0,0,mask);
painterOpacity.end();
QPainter composition(&result);
composition.setCompositionMode(QPainter::CompositionMode_DestinationOver);
composition.drawImage(0,0,m_normalImage);
composition.end();
setIcon(QIcon(QPixmap::fromImage(result)));
}
- Which number, 0 or 1, should I define the variabliable of loops for arrays from?
- The `write` syscall in C writes to an unexpected position
- Can I dup and change the buffer behaviour of the new fd without changing the old one?
- OpenCV Error: Sizes of input arguments do not match (The operation is neither 'array op array')
- how compiler works to evaluate sizeof operator in c
- Code Fragment: is this pure C?
- ‘struct' declared inside parameter list
- Can time(NULL) ever return failure?
- Format specifier in scanf for bool datatype in C
- What does %[^\n] mean in C?
- What does it mean by `-fno-signed-char, --signed-char` for gcc & clang?
- How can embedded systems be elegantly compatible with 32-bit and 64-bit timestamp content printing?
- Specifying size of enum type in C
- Graphical user interface Tutorial in C
- gcc arm optimizes away parameters before System Call
- ARM V7 inline assembly - moving a C variable into a register
- How to fix "pointer ‘old’ may be used after ‘realloc’ [-Wuse-after-free]" warning in C?
- Why is an empty integer array filled with seemingly garbage data in C?
- Confusion of virtual memory
- Variable address does not fall within the stack range in /proc/self/maps
- Why does carg(-0) return -pi?
- To the power of in C?
- How do you do exponentiation in C?
- Will this be a tail call or not?
- Calculating a catalan number in C
- Why is the '&' operator needed for an int variable but not for an array in C?
- populating an array at compile time in C
- Why is the initialization of this structure global variable wrong?
- Efficient linked list design for a C file manager
- Function with a malloc on a pointer declared in main()