Animating the QListWidgetItem objects within the QListWidget

philm001

Hello all,

I am currently animating the QListWidget to have a fade in effect. However, I found out that I need to also animate the QListWidgetItem objects within the QListWidget. (unless someone knows how to propagate the animation to the QListWidgetItem objects )

My current method is to specify the Graphics effect for each item within the QListWidget and to animate that. However, when the animation attempts to run, I recieve an error stating I am attempting to animate a non-existing property opacity of my QObject.

So I was wondering, what is the best method in animating the QListWidgetItem objects within QListWidget?

Here is a small snippet of the code in questions:

QGraphicsOpacityEffect *fadeInBackEff = new QGraphicsOpacityEffect(this);
        QGraphicsOpacityEffect *fadeInFinishEff = new QGraphicsOpacityEffect(this);
        QGraphicsOpacityEffect *fadeInListEff = new QGraphicsOpacityEffect(this);

        QGraphicsOpacityEffect *fadeInText1Eff = new QGraphicsOpacityEffect(this);
        QGraphicsOpacityEffect *fadeInText2Eff = new QGraphicsOpacityEffect(this);

        p_finishButton->setGraphicsEffect(fadeInFinishEff);
        p_backButton->setGraphicsEffect(fadeInBackEff);
        p_physicsList->setGraphicsEffect(fadeInListEff);

        p_physicsList->item(0)->listWidget()->setGraphicsEffect(fadeInText1Eff);
        p_physicsList->item(1)->listWidget()->setGraphicsEffect(fadeInText2Eff);

        QPropertyAnimation *fadeInBackAnim = new QPropertyAnimation(fadeInBackEff, "opacity");
        QPropertyAnimation *fadeInFinishAnim = new QPropertyAnimation(fadeInFinishEff, "opacity");
        QPropertyAnimation *fadeInListAnim = new QPropertyAnimation(fadeInListEff, "opacity");

        QPropertyAnimation *fadeInText1Anim = new QPropertyAnimation(fadeInText1Eff, "opacity");
        QPropertyAnimation *fadeInText2Anim = new QPropertyAnimation(fadeInText2Eff, "opacity");

        fadeInBackAnim->setDuration(1000);
        fadeInBackAnim->setStartValue(0);
        fadeInBackAnim->setEndValue(1);
        fadeInBackAnim->setEasingCurve(QEasingCurve::InBack);

        fadeInFinishAnim->setDuration(1000);
        fadeInFinishAnim->setStartValue(0);
        fadeInFinishAnim->setEndValue(1);
        fadeInFinishAnim->setEasingCurve(QEasingCurve::InBack);

        fadeInListAnim->setDuration(1000);
        fadeInListAnim->setStartValue(0);
        fadeInListAnim->setEndValue(1);
        fadeInListAnim->setEasingCurve(QEasingCurve::InBack);

        fadeInText1Anim->setDuration(1000);
        fadeInText1Anim->setStartValue(0);
        fadeInText1Anim->setEndValue(1);
        fadeInText1Anim->setEasingCurve(QEasingCurve::InBack);

        fadeInText2Anim->setDuration(1000);
        fadeInText2Anim->setStartValue(0);
        fadeInText2Anim->setEndValue(1);
        fadeInText2Anim->setEasingCurve(QEasingCurve::InBack);

raven-worx

@philm001 said in Animating the QListWidgetItem objects within the QListWidget:

So I was wondering, what is the best method in animating the QListWidgetItem objects within QListWidget?

There is no way.
In QtQWidgets you can only animate QWidgets. For animating list items you are very limited and can only be achieved with very cumbersome work (e.g. by overrriding the paintEvent() and animate the opacity of the painter while painting the specific item).

In QML this could be done easily.

Devopia53

@philm001

You can use QListWidget::setItemWidget()/QVariantAnimation to implement similar functionality you want. But as @raven-worx said, it is a very cumbersome job. like this:

auto    w = new QWidget(this);
auto    item = listWidget->item(0);
auto    animation = new QVariantAnimation(this);

connect(animation, &QVariantAnimation::valueChanged, [w](const QVariant &value){
    w->setStyleSheet(QString("background-color: rgba(255, 0, 0, %1)").arg(value.toInt()));
});
animation->setDuration(1000);
animation->setStartValue(255);
animation->setEndValue(0);

listWidget->setItemWidget(item, w);

animation->start();

philm001

I see, then is there anything that I can do to the text? Say before the animation begins, the text is 100 % clear and afterwards, the text is 100 % visible.

mrjj

@philm001
Hi, its the same with text. The qlistwidget draws the items so
i think you must subclass and use PaintEvent for it to work.
(using the animated values)

philm001

@Devopia53 Your solution works nicely but the background of the list is black. Only turns to white after the animation is finished and mouse moves over it. I ma looking into changing the background of the list back to white.

Any thoughts?

Other then that, it is working the way I am thinking!

mrjj

@philm001
Im wondering if you reset to empty stylesheet it then revert to showing as normally ?
w->setStyleSheet(QString());

raven-worx

@philm001
the stylesheet declaration should rather look like this i guess:

w->setStyleSheet(QString("QListView::item { background: rgba(255, 0, 0, %1)}").arg(value.toInt())