Qt动画类实例一

代码之路

#include "AnimationTest.h"
#include <QLabel>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPainter>
#include <QDebug>

#define  CORNER_WIDTH 20        // 拐角边框宽度;
#define  CORNER_HEIGHT 6        // 拐角边框高度;

AnimationTest::AnimationTest(QWidget *parent)
    : QWidget(parent)
{
    initTopWidget();

    this->setWindowIcon(QIcon(":/AnimationTest/Resources/icon.jpg"));

    this->setProperty("cornerOpacity", 0.0);

    this->setWindowFlags(Qt::FramelessWindowHint);

    this->setStyleSheet("QWidget{background:white;} \
                        QPushButton{background:rgb(14, 150, 254);border:none;color:white;font-size:18px;font-weight:bold;}\
                        QPushButton:hover{background:rgb(44, 137, 255);}\
                        QPushButton:pressed{background:rgb(14, 135, 228);padding-top:3px;padding-left:3px;}\
                        ");
    this->setFixedSize(QSize(370, 370));
}

// 初始化顶层Widget;
void AnimationTest::initTopWidget()
{
    m_backWidget = new QLabel(this);
    m_backWidget->setObjectName("BackWidget");
    m_backWidget->setFixedSize(QSize(350, 350));
    m_backWidget->setPixmap(QPixmap(":/AnimationTest/Resources/backImage.jpg").scaled(m_backWidget->width(), m_backWidget->height()));

    m_topWidget = new QWidget(m_backWidget);
    m_topWidget->setFixedSize(QSize(350, 350));
    m_topWidget->move(QPoint(-m_topWidget->width(), 0));

    m_moveAnimation = new QPropertyAnimation(m_topWidget, "pos");
    m_moveAnimation->setDuration(300);
    m_moveAnimation->setStartValue(QPoint(-m_topWidget->width(), 0));
    m_moveAnimation->setEndValue(QPoint(0, 0));

    m_opcityAnimation = new QPropertyAnimation(this, "cornerOpacity");
    m_opcityAnimation->setDuration(300);
    m_opcityAnimation->setStartValue(0);
    m_opcityAnimation->setEndValue(1.0);

    connect(m_opcityAnimation, SIGNAL(valueChanged(const QVariant&)), this, SLOT(update()));

    QLabel* topWidgetInfo = new QLabel;
    topWidgetInfo->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    topWidgetInfo->setPixmap(QPixmap(":/AnimationTest/Resources/labelInfo.png"));

    QPushButton* pButtonPreview = new QPushButton(QStringLiteral("预览"));
    pButtonPreview->setFixedSize(QSize(100, 50));
    QPushButton* pButtonDownloadJPG = new QPushButton(QStringLiteral("下载JPG"));
    pButtonDownloadJPG->setFixedSize(QSize(100, 50));
    QPushButton* pButtonDownloadPNG = new QPushButton(QStringLiteral("下载PNG"));
    pButtonDownloadPNG->setFixedSize(QSize(100, 50));

    QHBoxLayout* hLayoutLabel = new QHBoxLayout;
    hLayoutLabel->addStretch();
    hLayoutLabel->addWidget(topWidgetInfo);
    hLayoutLabel->addStretch();
    hLayoutLabel->setMargin(0);

    QHBoxLayout* hLayoutButton = new QHBoxLayout;
    hLayoutButton->addStretch();
    hLayoutButton->addWidget(pButtonPreview);
    hLayoutButton->addWidget(pButtonDownloadJPG);
    hLayoutButton->addWidget(pButtonDownloadPNG);
    hLayoutButton->addStretch();
    hLayoutButton->setSpacing(6);
    hLayoutButton->setMargin(0);

    QVBoxLayout* vLayout = new QVBoxLayout(m_topWidget);
    vLayout->addLayout(hLayoutLabel);
    vLayout->addLayout(hLayoutButton);
    vLayout->setMargin(0);
    vLayout->setSpacing(0);

    QHBoxLayout* mainLayout = new QHBoxLayout(this);
    mainLayout->addWidget(m_backWidget);
    mainLayout->setMargin(10);
}

// 进入离开事件;
// 主要进行动画的操作;
void AnimationTest::leaveEvent(QEvent *event)
{
    m_moveAnimation->setStartValue(QPoint(0, 0));
    m_moveAnimation->setEndValue(QPoint(m_topWidget->width(), 0));
    // 注掉以上两行代码使用下面代码则收缩往相反方向;
    // 使用以上两行代码则窗口收缩往相同方向;
//  m_moveAnimation->setDirection(QAbstractAnimation::Backward);
    m_moveAnimation->start();

    m_opcityAnimation->setDirection(QAbstractAnimation::Backward);
    m_opcityAnimation->start();
}

void AnimationTest::enterEvent(QEvent *event)
{
    m_moveAnimation->setStartValue(QPoint(-m_topWidget->width(), 0));
    m_moveAnimation->setEndValue(QPoint(0, 0));
    // 注掉以上两行代码使用下面代码则收缩往相反方向;
    // 使用以上两行代码则窗口收缩往相同方向;
//  m_moveAnimation->setDirection(QAbstractAnimation::Forward);
    m_moveAnimation->start();

    m_opcityAnimation->setDirection(QAbstractAnimation::Forward);
    m_opcityAnimation->start();
}

// 绘制事件,主要绘制四角的边框;
void AnimationTest::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    // 左上角;
    drawCorner(&painter, QPoint(0, 0), 0);
    // 右上角;
    drawCorner(&painter, QPoint(this->width(), 0), 90);
    // 右下角;
    drawCorner(&painter, QPoint(this->width(), this->height()), 180);
    // 左下角;
    drawCorner(&painter, QPoint(0, this->height()), -90);
}

// 绘制单个角的边框;
void AnimationTest::drawCorner(QPainter* painter, QPoint pos, int translateAngle)
{
    painter->save();
    // 通过角度，位置转换进行绘制四个角的边框;
    int transparentValue = 255 * this->property("cornerOpacity").toFloat();
    QBrush rectBrush(QColor(30, 150, 230, transparentValue));
    painter->translate(pos);
    painter->rotate(translateAngle);

    painter->fillRect(QRect(0, 0, CORNER_WIDTH, CORNER_HEIGHT), rectBrush);
    painter->fillRect(QRect(0, 0 + CORNER_HEIGHT, CORNER_HEIGHT, CORNER_WIDTH - CORNER_HEIGHT), rectBrush);
    painter->restore();
}