Add Color to Image in Animation (Cross Dissolve Effect)

? Offline

Hello all,

Currently I am trying to have an effect on one of my images where an image goes from being grayscale to having color when a button is clicked. The desired effect I want to achieve is in this gif below:

Essentially, I want a cross dissolve effect

However, this is not the case right now, as this is how my app is performing. I especially don't like the way the gray image fades out before the color image fades in. Here it is:

Here is my current code. I tried doing something where I used QLabels, the QPropertyAnimation class, and the QGraphicsOpacityEffect class. label is the gray image, while label_2 is the color image:

Constructor Code:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),    
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->label_2->setVisible(false);
}

Button Method:

void MainWindow::on_pushButton_2_clicked()
{
    QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(this);
    ui->label->setGraphicsEffect(eff);
    QPropertyAnimation *a = new QPropertyAnimation(eff,"opacity");
    a->setDuration(4000);
    a->setStartValue(1);
    a->setEndValue(0);
    a->setEasingCurve(QEasingCurve::OutBack);
    a->start(QPropertyAnimation::DeleteWhenStopped);
    connect(a,SIGNAL(finished()),this,SLOT(hideLogo()));

    QGraphicsOpacityEffect *eff2 = new QGraphicsOpacityEffect(this);
    ui->label_2->setGraphicsEffect(eff2);
    QPropertyAnimation *a2 = new QPropertyAnimation(eff2,"opacity");
    a2->setDuration(2000);
    a2->setStartValue(0);
    a2->setEndValue(1);
    a2->setEasingCurve(QEasingCurve::InBack);
    ui->label_2->setVisible(true);
    a2->start(QPropertyAnimation::DeleteWhenStopped);
}

hideLogo slot:

void MainWindow::hideLogo(){
  ui->label->hide();
}

If someone could point me to how to better perform a cross dissolve effect (something like what is shown in the first gif), I would be very grateful.

Note: I am not affiliated with the Boston Celtics in any way; I just typically use their logo for testing purposes.

JoeCFD

try these easing curves to see if they help.
https://doc.qt.io/qt-5/qeasingcurve.html#Type-enum
https://doc.qt.io/qt-5/qvariantanimation.html#easingCurve-prop

JoeCFD

@WesLow said in Add Color to Image in Animation (Cross Dissolve Effect):

QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(this);
ui->label->setGraphicsEffect(eff);
QPropertyAnimation *a = new QPropertyAnimation(eff,"opacity");
a->setDuration(4000);
a->setStartValue(1);
a->setEndValue(0);
a->setEasingCurve(QEasingCurve::OutBack);
a->start(QPropertyAnimation::DeleteWhenStopped);
connect(a,SIGNAL(finished()),this,SLOT(hideLogo()));

    QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(this);
    ui->label->setGraphicsEffect(eff);
    QPropertyAnimation *a = new QPropertyAnimation(eff,"opacity");
    a->setDuration(4000);
    a->setStartValue(1);
    a->setEndValue(0);
    a->setEasingCurve(QEasingCurve::OutBack);
    a->start(QPropertyAnimation::DeleteWhenStopped);
    connect(a,SIGNAL(finished()),this,SLOT(hideLogo()));

one QPropertyAnimation * a is enough. You can toggle start and end values 

    a->setStartValue(0);
    a->setEndValue(1);

Can you try to raise duration to see if there is any difference.

JoeCFD

try these easing curves to see if they help.
https://doc.qt.io/qt-5/qeasingcurve.html#Type-enum
https://doc.qt.io/qt-5/qvariantanimation.html#easingCurve-prop

? Offline

@JoeCFD Thank you so much! The InCirc/OutCirc curves worked!