QT示例之animatedtiles，二维图形框架与动画组

我的博客园路径

Demo路径：< Qt Install Path >\Examples\Qt-5.8\widgets\animation\animatedtiles

演示效果

项目结构

项目资源

centered.png

ellipse.png

figure8.png

kinetic.png

random.png

tile.png

Time-For-Lunch-2.jpg

animatedtiles.pro

QT += widgets

SOURCES = main.cpp
RESOURCES = animatedtiles.qrc

# install
target.path = $$[QT_INSTALL_EXAMPLES]/widgets/animation/animatedtiles
INSTALLS += target

main.cpp

• 包含头文件

#include <QtWidgets>
#include <QtCore/qmath.h>
#include <QtCore/qstate.h>

• 定义Pixmap类，继承于 QObject 和 QGraphicsPixmapItem（提供与图片相关的API）
• Q_PROPERTY()是一个QT属性系统的宏，如果需要qml、QtScript、创建Designer插件、QItemDelegate、ActiveQt就得用到它，详情在这里
• 在构造函数设置了 最高渲染质量 的缓存模式，并且每次创建该类的实例，都需要传递一个图片项

class Pixmap : public QObject, public QGraphicsPixmapItem
{
    Q_OBJECT
    Q_PROPERTY(QPointF pos READ pos WRITE setPos)
public:
    Pixmap(const QPixmap &pix)
        : QObject(), QGraphicsPixmapItem(pix)
    {
        setCacheMode(DeviceCoordinateCache);
    }
};

Class Pixmap

• 定义 Button 类，继承于 QGraphicsWidget（能提供 隐藏或显示项、调色板、快捷键、移动项、项布局管理、项大小控制、焦点处理 和 设置字体 等方法，默认是显示）
• 动态演示图中，笔者（sunchuquin）点击的那五个带图片的圆形按键，都是该类的实例
• 构造函数，启用了鼠标悬停事件接收，选用最高渲染质量的缓存模式
• 定义 boundingRect 函数，只返回固定大小的矩形
• 定义 shape 函数，在矩形中绘制一个 最大的圆形并返回
• 按键类最重要的函数是 paint()，所有按键的点击都会发射信号，并执行该槽函数，对界面进行重绘，详细描述：设定按键样式（用于指示窗口小部件是否 凹陷 或 弹起）、创建一个矩形、创建一个渐变画刷1号（为线性梯度设置了 开始点 和 结束点），给开始点的颜色根据 鼠标焦点是否位于按键决定（效果：鼠标移到按键上时，圆形边框为白色，移开恢复浅灰色），而使用深灰色在给定位置创建停止点、为画笔设定深灰色, 并为画笔指定画刷，画刷定义了如何填充图形，这里程序定义了渐变画刷2号，但是却没有调用它，我觉得是个低级bug，试着修复后，实在是没看出按键哪里有啥变化（从代码上看，是画刷2号没有圆边框，而且不像画刷1号一样能根据鼠标焦点变化边框颜色），当鼠标按下，会在当前按键坐标加上偏移量，并重叠上一个同样大小的圆形（效果：按下按键，它会动…）
• 最后，重载了鼠标按下事件（会发射重绘信号）和鼠标释放按键，它们都会调用 update()，我们可以简单理解为窗口部件重新绘制后，需要调用它，作用是允许Qt来优化速度并且防止闪烁，详情在这里

class Button : public QGraphicsWidget
{
    Q_OBJECT
public:
    Button(const QPixmap &pixmap, QGraphicsItem *parent = 0)
        : QGraphicsWidget(parent), _pix(pixmap)
    {
        setAcceptHoverEvents(true);
        setCacheMode(DeviceCoordinateCache);
    }

    QRectF boundingRect() const override
    {
        return QRectF(-65, -65, 130, 130);
    }

    QPainterPath shape() const override
    {
        QPainterPath path;
        path.addEllipse(boundingRect());
        return path;
    }

    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *) override
    {
        bool down = option->state & QStyle::State_Sunken;
        QRectF r = boundingRect();
        QLinearGradient grad(r.topLeft(), r.bottomRight());
        grad.setColorAt(down ? 1 : 0, option->state & QStyle::State_MouseOver ? Qt::white : Qt::lightGray);
        grad.setColorAt(down ? 0 : 1, Qt::darkGray);
        painter->setPen(Qt::darkGray);
        painter->setBrush(grad);
        painter->drawEllipse(r);
        QLinearGradient grad2(r.topLeft(), r.bottomRight());
        grad.setColorAt(down ? 1 : 0, Qt::darkGray);
        grad.setColorAt(down ? 0 : 1, Qt::lightGray);
        painter->setPen(Qt::NoPen);
        painter->setBrush(grad);
        if (down)
            painter->translate(5, 5);
        painter->drawEllipse(r.adjusted(5, 5, -5, -5));
        painter->drawPixmap(-_pix.width()/2, -_pix.height()/2, _pix);
    }

signals:
    void pressed();

protected:
    void mousePressEvent(QGraphicsSceneMouseEvent *) override
    {
        emit pressed();
        update();
    }

    void mouseReleaseEvent(QGraphicsSceneMouseEvent *) override
    {
        update();
    }

private:
    QPixmap _pix;
};

• 定义 View 类，继承于 QGraphicsView ，里面重载了调整大小的事件（resizeEvent），调整大小槽函数执行后，执行 fitInView() ，参数一是场景矩形，参数二是场景的缩放方式（保持矩形的长宽比，通俗点立即是 图形 自动适应 大小）

class View : public QGraphicsView
{
public:
    View(QGraphicsScene *scene) : QGraphicsView(scene) { }

protected:
    void resizeEvent(QResizeEvent *event) override
    {
        QGraphicsView::resizeEvent(event);
        fitInView(sceneRect(), Qt::KeepAspectRatio);
    }
};

Class View

• Q_INIT_RESOURCE()是一个初始化资源的宏，防止资源在初始化过程中失败，只需将资源文件放入即可
  程序主入口，先加载对象： 单个图片、背景图、场景 和 图片列表，然后根据单个图片对象新建64张图片，并在其加入场景和图片列表之前，设定当前图片的堆叠顺序
• 创建图形父对象，衍生其五个按键子对象，设按键坐标，将父对象添加进场景，把父对象转换为矩形与场景的矩形合并再设坐标，（x0y0）是场景最中心的点，最后给按键父对象的矩形设最大堆叠顺序
  创建状态父对象，衍生其五个状态子对象，为每个状态子对象的所有图片设定坐标值，效果就是演示动画中的五个排列形状
• 在示例创建视图，并初始化为上面处理好的场景，在show之前，我们都是看不到场景效果的
  给视图设定窗口标题、更新界面时的绘制模式（这里的选用优势在于：能快速确定一个修改的范围，但缺点是任然要全部重新绘制）、为视图绘制背景图、启用背景缓存模式
• 设定渲染提示：对基元的边缘尽可能做抗锯齿处理，如果没法做的话，就采用平滑的像素图变换算法
  show，现在开始就能看到视图了。
• 创建状态机，把状态父对象添加进状态机，并设置状态机初始化状态是该父状态对象，然后再对父状态对象的初始化设定一个子状态（有五个排列状态可以选）
• 创建动画组，再依次创建64张图片的动画，以图片列表的顺序设定动画持续时间（效果是：越远的图片动画时间越长，整个动画的结束以最长的动画时间为准）
• 设定动画曲线（QEasingCurve真的很有趣，强烈建议读者多去试试它的其它曲线方式，哈哈哈哈这个我玩了十几分钟，最喜欢的是OutBounce，有种强调皮的弹跳效果）
• 每次在创建下一张图片的动画之前，将当前设定好的图片动画添加进动画组。
  创建动画变化对象，然后依次将五个按键和对应的五个状态分别和 pressed() （根据信号与槽的原理，当发射该信号，我们应用就会知道当前绘制已经过期，需按照对应动画组重绘，执行重绘的槽函数）
• 其实这里已经可以执行 “states.start();” 了，只是QT官方为了示例初次运行时，有个动画欢迎启动的操作，所以又创建了一个一次性的定时器，将其溢出事件与 “ellipseState” 圆形状态进行了绑定。
  因此，用户打开应用程序能看到的效果是：先有个 rootState->setInitialState(X) 动画，过了一段 “timer.start(125);” 时间后，图形重新排列为定时器所绑定的子状态动画。
• 最后，代码中 if 了一个 QT_KEYPAD_NAVIGATION 宏，如果有声明，则执行 “QApplication::setNavigationMode(Qt::NavigationModeCursorAuto);”，意思是如果支持编辑的焦点操作，则可通过方向键控制焦点进行上下左右的移动。

int main(int argc, char **argv)
{
    Q_INIT_RESOURCE(animatedtiles);

    QApplication app(argc, argv);

    QPixmap kineticPix(":/images/kinetic.png");
    QPixmap bgPix(":/images/Time-For-Lunch-2.jpg");

    QGraphicsScene scene(-350, -350, 700, 700);

    QList<Pixmap *> items;
    for (int i = 0; i < 64; ++i) {
        Pixmap *item = new Pixmap(kineticPix);
        item->setOffset(-kineticPix.width()/2, -kineticPix.height()/2);
        item->setZValue(i);
        items << item;
        scene.addItem(item);
    }

    // Buttons
    QGraphicsItem *buttonParent = new QGraphicsRectItem;
    Button *ellipseButton = new Button(QPixmap(":/images/ellipse.png"), buttonParent);
    Button *figure8Button = new Button(QPixmap(":/images/figure8.png"), buttonParent);
    Button *randomButton = new Button(QPixmap(":/images/random.png"), buttonParent);
    Button *tiledButton = new Button(QPixmap(":/images/tile.png"), buttonParent);
    Button *centeredButton = new Button(QPixmap(":/images/centered.png"), buttonParent);

    ellipseButton->setPos(-100, -100);
    figure8Button->setPos(100, -100);
    randomButton->setPos(0, 0);
    tiledButton->setPos(-100, 100);
    centeredButton->setPos(100, 100);

    scene.addItem(buttonParent);
    buttonParent->setTransform(QTransform::fromScale(0.75, 0.75), true);
    buttonParent->setPos(0, 0);
    buttonParent->setZValue(65);

    // States
    QState *rootState = new QState;
    QState *ellipseState = new QState(rootState);
    QState *figure8State = new QState(rootState);
    QState *randomState = new QState(rootState);
    QState *tiledState = new QState(rootState);
    QState *centeredState = new QState(rootState);

    // Values
    for (int i = 0; i < items.count(); ++i) {
        Pixmap *item = items.at(i);
        // Ellipse
        ellipseState->assignProperty(item, "pos",
                                         QPointF(qCos((i / 63.0) * 6.28) * 250,
                                                 qSin((i / 63.0) * 6.28) * 250));

        // Figure 8
        figure8State->assignProperty(item, "pos",
                                         QPointF(qSin((i / 63.0) * 6.28) * 250,
                                                 qSin(((i * 2)/63.0) * 6.28) * 250));

        // Random
        randomState->assignProperty(item, "pos",
                                        QPointF(-250 + qrand() % 500,
                                                -250 + qrand() % 500));

        // Tiled
        tiledState->assignProperty(item, "pos",
                                       QPointF(((i % 8) - 4) * kineticPix.width() + kineticPix.width() / 2,
                                               ((i / 8) - 4) * kineticPix.height() + kineticPix.height() / 2));

        // Centered
        centeredState->assignProperty(item, "pos", QPointF());
    }

    // Ui
    View *view = new View(&scene);
    view->setWindowTitle(QT_TRANSLATE_NOOP(QGraphicsView, "Animated Tiles"));
    view->setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate);
    view->setBackgroundBrush(bgPix);
    view->setCacheMode(QGraphicsView::CacheBackground);
    view->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    view->show();

    QStateMachine states;
    states.addState(rootState);
    states.setInitialState(rootState);
    rootState->setInitialState(tiledState);

    QParallelAnimationGroup *group = new QParallelAnimationGroup;
    for (int i = 0; i < items.count(); ++i) {
        QPropertyAnimation *anim = new QPropertyAnimation(items[i], "pos");
        anim->setDuration(750 + i * 25);
        anim->setEasingCurve(QEasingCurve::OutBounce);
        group->addAnimation(anim);
    }
    QAbstractTransition *trans = rootState->addTransition(ellipseButton, SIGNAL(pressed()), ellipseState);
    trans->addAnimation(group);

    trans = rootState->addTransition(figure8Button, SIGNAL(pressed()), figure8State);
    trans->addAnimation(group);

    trans = rootState->addTransition(randomButton, SIGNAL(pressed()), randomState);
    trans->addAnimation(group);

    trans = rootState->addTransition(tiledButton, SIGNAL(pressed()), tiledState);
    trans->addAnimation(group);

    trans = rootState->addTransition(centeredButton, SIGNAL(pressed()), centeredState);
    trans->addAnimation(group);

    QTimer timer;
    timer.start(1);
    timer.setSingleShot(true);
    trans = rootState->addTransition(&timer, SIGNAL(timeout()), ellipseState);
    trans->addAnimation(group);

    states.start();

#ifdef QT_KEYPAD_NAVIGATION
    QApplication::setNavigationMode(Qt::NavigationModeCursorAuto);
#endif
    return app.exec();
}

int main()

由于使用了属性系统的宏，因此必须包含此头文件才能编译

#include "main.moc"

总结
这个 Demo 启蒙了我以下知识点：

坐标系统
属性系统
二维图形框架
状态与状态机
动画与动画组