【二-3-1】Qt 动画框架——基础

0 概览

0.1）要点

0.1.1）实现：通过控制对象的属性来实现。

0.1.2）应用：在窗口和其它基于 QObject 的对象上。

0.2）主要类关系图

0.3）关于使用动画

0.3.1）使用缓和曲线对属性插值。

0.3.2）要对值使用动画，可创建 QObject 的子类，并在类中将该值定义为属性。

0.3.3）Qt 现在支持的可以进行插值的 QVariant 类型有：Int、Uint、Double、Float、QLine、QLineF、QPoint、QPointF、QSize、QSizeF、QRect、QRectF 和 QColor 等。

0.3.4）动画也被设计为状态机的一部分，1 + 1 > 2 。

 

1 属性动画 QPropertyAnimation

1.1）属性动画使用示例（作用于对象的属性变化过程）

QPushButton pbt("我是 QObject 的子类");
pbt.show();
QPropertyAnimation pa(&pbt, "geometry");
pa.setDuration(16888);　　// ms
pa.setStartValue( QRect(0, 0, 200, 100) );
pa.setEndValue( QRect(100, 100, 400, 200) );
pa.start();

// 还可以调用 setKeyValueAt() 函数在动画中间为属性设置值，将前面 setStartValue 和 setEndValue 用下面3条语句替代。
pa.setKeyValueAt(0, QRect(0, 0, 100, 100));
pa.setKeyValueAt(0.8, QRect(125, 125, 200, 200));
pa.setKeyValueAt(1, QRect(250, 250, 300, 300));

// 动画框架的其它常用函数
//pause()　　// 暂停
//resume()　　// 恢复
//stop()　　// 停止
//setDirection()    // 设置方向
//setLoopCount()    // 设置循环次数

1.2）使用缓和曲线（作用于对象的属性变化过程）

pa.setEasingCurve(QEasingCurve::OutBouce);　　// QEasingCurve 提供了四十多种曲线，也可自定义。Qt 提供的 Easing Curve Example 例程演示了各种缓和曲线的效果。

 

2 动画组 QAnimationGroup

2.1）QAnimationGroup 的两个子类 QSequentialAnimationGroup  和 QParallelAnimationGroup 分别实现了串行动画组和并行动画组。

2.2）串行动画组（先后顺序执行的一组动画）示例

QPushButton button("我是 QObject 的子类");
button.show();

QPropertyAnimation animation1(&button, "geometry");
animation1.setDuration(5000);
animation1.setStartValue( QRect(0, 0, 200, 100) );
animation1.setEndValue( QRect(200, 200, 400, 200) );
animation1.setEasingCurve(QEasingCurve::OutBouce);
 
QPropertyAnimation animation2(&button, "geometry");
animation2.setDuration(2500);
animation2.setStartValue( QRect(0, 0, 200, 100) );
animation2.setEndValue( QRect(200, 200, 400, 200) );
animation2.setEasingCurve(QEasingCurve::OutBouce);

QSequentialAnimationGroup group;
group.addAnimation(animation1);
group.addAnimation(animation2);
group.start();

 

2.3）并行动画组（同步执行的一组动画）示例

QPushButton button1("1我是 QObject 的子类");
button1.show();

QPushButton button2("2我是 QObject 的子类");
button2.show();

QPropertyAnimation animation1(&button1, "geometry");
animation1.setDuration(5000);
animation1.setStartValue( QRect(0, 0, 200, 100) );
animation1.setEndValue( QRect(200, 200, 400, 200) );
animation1.setEasingCurve(QEasingCurve::OutBouce);

QPropertyAnimation animation2(&button2, "geometry");
animation2.setDuration(2500);
animation2.setStartValue( QRect(100, 100, 200, 100) );
animation2.setEndValue( QRect(300, 300, 400, 200) );
animation2.setEasingCurve(QEasingCurve::OutBouce);

QParallelAnimationGroup group;
group.addAnimation(animation1);
group.addAnimation(animation2);
group.start();

 

3 在图形视图框架中使用动画（配合这个 https://www.cnblogs.com/XieJX/p/16007930.html ）

3.1）使用示例

// <a> 新建 QGraphicsObject 的子类

// <a.1> 子类的头文件 mygraphicsobject.h

#ifndef MYGRAPHICSOBJECT_H
#define MYGRAPHICSOBJECT_H

#include <QGraphicsObject>

class MyGraphicsObject : public QGraphicsObject
{
public:
    MyGraphicsObject(QGraphicsObject *parent = 0);
    QRectF boundingRect() const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr);
};

#endif // MYGRAPHICSOBJECT_H

// <a.2> 子类的源文件 mygraphicsobject.cpp

#include "mygraphicsobject.h"
#include <QPainter>

MyGraphicsObject::MyGraphicsObject(QGraphicsObject *parent) : QGraphicsObject(parent)
{

}

QRectF MyGraphicsObject::boundingRect() const
{
    qreal penWidth = 1;
    return QRectF(-50 - penWidth / 2, -50 - penWidth / 2, 100 + penWidth, 100 + penWidth);
}

void MyGraphicsObject::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    painter->drawRect(boundingRect());
}

// <b> 主程序 mian.cpp

#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include "mygraphicsobject.h"
#include <QPropertyAnimation>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QGraphicsScene scene;
    scene.setSceneRect( QRectF(-200, -200, 400, 400) );
    MyGraphicsObject *item = new MyGraphicsObject;
    scene.addItem(item);
    QGraphicsView view(&scene);
    view.show();

    QPropertyAnimation animation(item, "rotation");
    animation.setDuration(3000);
    animation.setStartValue(0);
    animation.setEndValue(360);
    animation.start();

    return a.exec();
}