Qt动画类实例一

一、简述

前段时间群里小伙伴想写个自定义的控件，二话不说，我就答应帮他写了，结果一拖就拖到了今天。实现起来很简单，简单应用了动画类的效果就OK了。主要是对窗口的pos及新增了一个cornerOpacity属性做了动画处理，实现了窗口在鼠标进出时左右滑动，以及四个边框角的忽隐忽现效果。

图一为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();
}

---

代码很简单，创建了两个动画类对象实现了以上效果，通过QPropertyAnimation 动画类我们可以实现更多好玩的效果，关键还是在于尝试。

下面简单介绍一下几个常用的动画类方法。

// 设置动画持续效果;
void setDuration(int msecs)

---

// 控制动画的变化曲线;
void setEasingCurve(const QEasingCurve & easing)
下面可以看到几个枚举值代表着变化的不同趋势。

// 设置动画的起始值;
void setStartValue(const QVariant & value)

// 设置动画的结束值;
void setEndValue(const QVariant & value)

上面两个是对应起来的，就拿上面移动位置举例，把widget从位置1移动到位置2，那么位置1就是起始值，位置2就是结束值（解释的挺2的）。

当然单纯这样的话我们可以通过时钟来把widget从位置1移动到位置2，效果也是一样的，不过简单的时钟的效果可能只能实现下面这种曲线效果。更复杂的可能相对麻烦，所以直接用动画类方便、快捷。

---

// 开始/结束 动画效果
void start(QAbstractAnimation::DeletionPolicy policy = KeepWhenStopped)

void stop()

下面为start()方法的参数，也就是动画结束之后是否删除该对象。

---

尾

以上写了一个简单的小例子以及简单地介绍了一下动画类，更多的在于大家的尝试。

晚安哈 O(∩_∩)O！

---

代码下载

Qt动画类实例一