Qt介面的淡入淡出效果大家可能都有所接觸，不過能不能以“卷軸”的形式慢慢呈現出來呢，我這裡先呈上兩個效果

展開過程

定格的時候

上原始碼，如果不需要就直接略過哈

標頭檔案：

#ifndef QREELWIDGET_H
#define QREELWIDGET_H

#include <QTimeLine>
#include <QWidget>
#include <QPainter>

class QReelWidget : public QWidget
{
    Q_OBJECT

public:
    QReelWidget(QWidget *parent = 0);
    void paintEvent(QPaintEvent*);
    void setOriPos(const QPoint&);
    void setOriSize(const QSize&);
    void showExpan();

private slots:
    void onShow();
    void onExpansion();

private:
    bool bFinally;
    QPoint oriPos;
    QSize  oriSize;
    QTimeLine animaShow;
    QTimeLine animaExpan;
};

#endif // QREELWIDGET_H
 

#include "QFadeWidget.h"

QReelWidget::QReelWidget(QWidget *parent) :
    QWidget(parent)
{
    oriSize = QSize(0, 0);
    connect(&animaShow, SIGNAL(frameChanged(int)), SLOT(onShow()));
    connect(&animaExpan, SIGNAL(frameChanged(int)), SLOT(onExpansion()));
    animaShow.setFrameRange(0, 100);
    animaShow.setDuration(100); //平移過程持續時間
    animaShow.setCurveShape(QTimeLine::EaseInCurve); //先慢後快
    animaExpan.setFrameRange(0, 100);
    animaExpan.setDuration(500); //展開過程持續時間
    animaExpan.setCurveShape(QTimeLine::LinearCurve); //勻速
}

void QReelWidget::paintEvent(QPaintEvent*)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QPen p(QColor(179,196,204)); //畫邊框用，顏色深一點邊框更明顯，效果會更好一些
    p.setWidth(2);
    painter.setPen(p);

    QLinearGradient linearGradient(QPointF(0, 0), QPointF(0, rect().height()));
    linearGradient.setColorAt(0, QColor(236,240,244));
    linearGradient.setColorAt(1, QColor(203,215,221));
    linearGradient.setSpread(QGradient::PadSpread);

    painter.save();
    QPainterPath path;
    /* 窗體圓角設定
     * 底部留25高度畫“卷軸”
     * 注意不能用 addRoundRect方法，否則圓角弧度會隨窗體大小自動調整，這裡要的是絕對弧度 */
    path.addRoundedRect(QRect(rect().topLeft(),QPoint(rect().right(),rect().bottom()-25)),8,8);
    painter.fillPath(path,QBrush(linearGradient));
    painter.drawPath(path);
    painter.restore();
    if(bFinally) { //定格，即最終呈現的時候
        painter.save();
        //因為窗體左下角有一個弧度，還要考慮曲線外留下的空白區域，先“填補”它
        QRect r(0,height()-33,15,16);
        painter.fillRect(r,QColor(203,215,221));
        painter.drawLine(r.topLeft(), r.bottomLeft());

        painter.restore();
        //用貝塞爾曲線填充
        QPoint startPos(20,height()-25);
        QPoint endPos(20,startPos.y()+25);
        QPainterPath path1(startPos);
        //貝塞爾曲線的兩個控制點可能沒那麼精確，大家可以參考貝塞爾曲線演算法做到更精確的控制，我這就不贅述了
        path1.cubicTo(QPoint(0,startPos.y()), QPoint(-15,startPos.y()+8), endPos);
        //閉合曲線區域
        path1.closeSubpath();
        painter.fillPath(path1, QColor(43,43,43));
        painter.drawPath(path1);
    }
    else { //動畫的時候
        painter.save();
        //同上面一樣，先“填補”窗體左下角的空白區域

        /* 注意這裡的橢圓高度控制為15，底部給定格的時候留下一定區域
         * 因為定格的時候“捲筒”要展開 */
        QRect r(0,height()-33,20,15);
        painter.fillRect(r,QColor(203,215,221));
        //畫三條邊框線
        painter.drawLine(r.topLeft(), r.bottomLeft());
        painter.drawLine(QPoint(20,height()-25), r.bottomRight());
        painter.drawLine(QPoint(10,height()-25), QPoint(20,height()-25));

        painter.restore();
        //用橢圓填充
        QPainterPath path1;
        path1.addEllipse(0,height()-25,20,15);
        painter.fillPath(path1, QColor(43,43,43));
        painter.drawPath(path1);
    }
}

void QReelWidget::onShow()
{
    /* 顯示Widget的時候首先按幀數逐漸平移到指定位置oriPos
     * 我這裡x方向總共移動10，y方向移動60，大家可以根據需要自己控制
     * 若不需要平移的效果大可直接忽略 */
    int indexFrame = animaShow.currentFrame();
    move(oriPos.x()+10/100.0*(100-indexFrame), oriPos.y()+60/100.0*(100-indexFrame));
    if(indexFrame >= 99) //平移完後開始逐漸展開
        animaExpan.start();
}
void QReelWidget::onExpansion()
{
    /* 展開過程，oriSize為Widget的原始尺寸
     * 展開過程寬度至少為20，因為“卷軸”部分的寬度為20 */
    int indexFrame = animaExpan.currentFrame();
    resize(20+(oriSize.width()-20)/100.0*indexFrame, oriSize.height());
    if(indexFrame >= 99) { //最終定格
        bFinally = true;
    }
}
//展開顯示
void QReelWidget::showExpan()
{
    bFinally = false;
    resize(20,height()); //最初保持“卷軸”部分的寬度
    move(oriPos.x()+10,oriPos.y()+60);
    show();
    animaShow.stop();
    animaExpan.stop();
    animaShow.start();
}
//設定原始左上角座標
void QReelWidget::setOriPos(const QPoint& p)
{
    this->oriPos = p;
}
//設定原始尺寸
void QReelWidget::setOriSize(const QSize& s)
{
    this->oriSize = s;
}
 

testWidget * tw = new testWidget;
tw->setOriPos(QPoint(100, 100));
tw->setOriSize(QSize(400,300));
tw->showExpan();

本文涉及貝塞爾曲線，有興趣的朋友可查閱相關資料進一步瞭解