Qt动画 QAbstractAnimation

简介

QAbstractAnimation 是所有 Qt 动画的基类。
该类定义了所有动画应该都会有的功能函数。
要想实现一个Qt自定义动画，需要继承此类。

一个动画的进度由currentLoopTime函数给出。
一个动画的进度以毫秒为单位。
动画从0开始，到duration()结束，在动画运行时自动更新进度值。
也可以通过setCurrentTime函数直接定位进度。

一个动画有三个状态，Running,Stopped,Paused.
可以通过start(),stop(),pause(),resume(),来改变状态.
在start()时，动画会重置进度.
如何paused了，在resume()时就会继续进度.
动画Stopped后也可以resume()，就是重头再来.
QAbstractAnimation每次发生状态改变时才会发出stateChanged()信号.

通过loopCount 属性来设置动画的循环次数
动画的默认的loopCount是1
当loopCount是-1时，意味着无限循环
当动画运行到最后一次循环最后一毫秒时才会自动到Stopped状态
Stopped状态时finished()信号将会发出

QAbstractAnimation提供了子类用于跟踪动画进度的纯虚函数：duration()和updateCurrentTime()
duration()函数允许您报告动画的持续时间
当动画进度变化时，QAbstractAnimation会调用updateCurrentTime(),重写此函数可以跟踪进度。
请注意，既没有定义updateCurrentTime()调用之间的间隔，也没有定义对此函数的调用次数；不过，它通常每秒更新60次。

通过重新实现updateState（），您可以跟踪动画的状态变化，这对于不受时间驱动的动画特别有用。

Qt动画框架

QVariantAnimation 数值动画

QVariantAnimation是对QVariants类型的数值类型执行插值。
QVariants支持的类型如下

• Int
• UInt
• Double
• Float
• QLine
• QLineF
• QPoint
• QPointF
• QSize
• QSizeF
• QRect
• QRectF
• QColor

可以通过setStartValue与setEndValue来设置动画的起点与终点.
当QVariantAnimation执行插值时会发出valueChanged()信号,当然updateCurrentTime()也是会被调用的.

从StartValue到EndValue的变化曲线由setEasingCurve函数与QEasingCurve决定.

例子

#include "VariantAnimationDialog.h"
#include <QVariantAnimation>VariantAnimationDialog::VariantAnimationDialog(QWidget *parent): QDialog(parent)
{ui.setupUi(this);QVariantAnimation* animation = new QVariantAnimation(this);animation->setStartValue(QColor(255, 0, 0));animation->setEndValue(QColor(0, 255, 255));animation->setDuration(2 * 1000);animation->setLoopCount(-1);animation->setEasingCurve(QEasingCurve::OutInBounce);connect(animation, &QVariantAnimation::valueChanged, [this](const QVariant& variant) {QColor color = variant.value<QColor>();this->ui.label->setStyleSheet(QString("background-color: %1").arg(color.name()));});animation->start();}VariantAnimationDialog::~VariantAnimationDialog()
{
}

QPropertyAnimation 属性动画

继承自QVariantAnimation，可以对对象的属性做值变化.
例子

#include "PropertyAnimationDialog.h"
#include <QPropertyAnimation>
#include <QGraphicsDropShadowEffect>PropertyAnimationDialog::PropertyAnimationDialog(QWidget *parent): QDialog(parent)
{ui.setupUi(this);QGraphicsDropShadowEffect* effect = new QGraphicsDropShadowEffect(this);effect->setColor(QColor(0xcc,0xcc,0xcc));effect->setOffset(-17,-17);effect->setBlurRadius(0.0);QPropertyAnimation* animation = new QPropertyAnimation(effect,"blurRadius");ui.pushButton->setGraphicsEffect(effect);animation->setStartValue(10.0);animation->setEndValue(0.0);animation->setDuration(2*1000);animation->setLoopCount(-1);animation->setEasingCurve(QEasingCurve::Linear);animation->start();}PropertyAnimationDialog::~PropertyAnimationDialog()
{
}

QAnimationGroup 一组动画

一组动画里面有多个动画
组动画可以分为并行与串行

QParallelAnimationGroup 并行动画组

并行动画就是字面意思，一组动画是同时运行的。
例子

QPushButton *bonnie = new QPushButton("Bonnie");bonnie->show();QPushButton *clyde = new QPushButton("Clyde");clyde->show();QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "geometry");// Set up anim1QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "geometry");// Set up anim2QParallelAnimationGroup *group = new QParallelAnimationGroup;group->addAnimation(anim1);group->addAnimation(anim2);group->start();

QSequentialAnimationGroup 串行动画组

串行动画就是字面意思，一组动画按顺序依次运行。
例子

 QPushButton button("Animated Button");button.show();QPropertyAnimation anim1(&button, "geometry");anim1.setDuration(3000);anim1.setStartValue(QRect(0, 0, 100, 30));anim1.setEndValue(QRect(500, 500, 100, 30));QPropertyAnimation anim2(&button, "geometry");anim2.setDuration(3000);anim2.setStartValue(QRect(500, 500, 100, 30));anim2.setEndValue(QRect(1000, 500, 100, 30));QSequentialAnimationGroup group;group.addAnimation(&anim1);group.addAnimation(&anim2);group.start();