QPropertyAnimationを使ったウィジェットのアニメ表示

ウィジェットをフェードアウトやフェードインさせたり、色を変化させるなどしてアニメ効果をつけたい場合はQPropertyAnimationを使います。

このクラスでアニメーション可能なのは色や透過色、ウィジェットの位置や大きさなどです。

例えばあるラベルをフェードインさせながら画面に表示させたい場合、次のようなコードが書けます。

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    QGraphicsOpacityEffect* opacityEffect = new QGraphicsOpacityEffect(ui->label);
    ui->label->setGraphicsEffect(opacityEffect);
        /// ラベルにエフェクトを設定
    
    /** 透過アニメーションの設定と開始 */
    QPropertyAnimation * anim = new QPropertyAnimation(this, "opacity");
    anim->setTargetObject(opacityEffect);
    anim->setStartValue(0.0);
    anim->setEndValue(1.0);
    anim->setDuration(5000);
    anim->start(QAbstractAnimation::DeleteWhenStopped);
}

ウィジェットに透過効果を持たせるにはQGraphicsEffectを使うので初めにそれをウィジェットに設定します。

その後、QPropertyAnimationにsetTargetObjectで透過効果を設定し、初めと終わりの透過を設定してからフェードインアニメを開始しています。ちなみにsetValueで設定できる透過色の範囲は0.0から1.0の間です。

アニメーション中では下の画像のようにテキストだけでなく、ウィジェット全体に透過色が指定されます。

高度なアニメーションの方法

先ほど紹介した例では始まりと終わりの2点しか透過色を設定していませんでしたがsetKeyValuAtを使えば任意の場所でアニメーションの切り替えができます。

それが次のコードです。

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    QGraphicsOpacityEffect* opacityEffect = new QGraphicsOpacityEffect(ui->label);
    ui->label->setGraphicsEffect(opacityEffect);
        /// ラベルにエフェクトを設定
    
    /** 透過アニメーションの設定と開始*/
    QPropertyAnimation * anim = new QPropertyAnimation(this, "opacity");
    anim->setTargetObject(opacityEffect);
    anim->setKeyValueAt(0.0, 1.0);
    anim->setKeyValueAt(0.5, 0.0);
    anim->setKeyValueAt(1.0, 1.0);
    anim->setDuration(5000);
    anim->start(QAbstractAnimation::DeleteWhenStopped);
}

setKeyValueAtでは全体を1とみなして0.0から1.0の範囲内で任意の時間のプロパティを変えることができます。

この例では5秒間のうち、前半の2.5秒でフェードアウトして、後半の2.5秒でフェードインしています。

ここでは透過アニメーションについて紹介しましたが、そのほかのプロパティ(位置や色)でもアニメーションは可能です。

以上がウィジェットへのアニメーションの設定方法です。お疲れ様でした!