Video to image transitions

  • Hi everyone. I'm trying to make transitions between videos and images using OpacityEffect and PropertyAnimation.
    I load an image into a QLabel and the video in a QVideoWidget. I'm using QWidget::stackUnder(QWidget*) to get the image on the top and make a fade out effect to the video on the back. The animation seems very lagged.
    Can anyone tell me a better way to approach this transitions?
    in mainwindow.cpp

    QVideoWidget *v = new QVideoWidget(ui->centralWidget);
    QLabel *l =  new QLabel(ui->centralWidget);
    QMediaPlayer *p = new QMediaPlayer(this);
    l->setPixmap(QPixmap("img.jpg").scaled(this->size(), Qt::IgnoreAspectRatio));
    QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect();
    QPropertyAnimation *anim = new QPropertyAnimation(effect,"opacity");


  • Alternative approach:

    1. take screen-shoot of underlying widget
    2. create new QWidget and place it on top of VideoWidget
    3. set to top widget image of underlying widgets
    4. override paint() and draw pixmap
    5. add new animation and animate opacity of Image (not widget!)
    6. (optionally) on resize update image of underlying widgets and apply current opacity level (is animation is played).

    That way You go away from widget based opacity to image one with should be much faster.

    Alternative 2 (with should be even faster then above):

    1. create QGraphicsScene
    2. add VideoItem
      3a. animate VideoItem opacity from 0 to 1 (background must be set to static image)
      3b. or add on top PixmapItem and animate it's opacity from 1 to 0

Log in to reply