qml demo分析(threadedanimation-线程动画)

一、效果预览

　　使用过qml的同学都知道，使用qml做动画效果是非常简单的，再也不需要像QWidget那样，自己模拟一个动画，费时又费力，往往还达不到效果。今天我们就来分析下qml的两种动画实现方式，如图1所示，窗口底部的提示信息文本“This application shows two spinners. The one to the right is animated on the scene graph thread (when applicable) and the left one is using the normal Qt Quick animation system.”意思就是左边的窗口使用quick animation实现，右侧窗口使用opengl scene graph实现，细心的同学就会发现，当Not blocked字样变为Blocked时，左侧的旋转动画每过大概400ms就会停顿下，而右侧窗口丝毫不受影响。好了废话不多说，我们这就来分析下这个示例程序的源码，这个现象就不难理解啦。

图1 旋转动画

二、源码分析

　　首先我们先来分析下该示例代码的工程目录，如图1所示，spinner一个C++类，其重写了QQuickItem组件，QQuickItem其实在qml中就相当于Item组件，重写QQuickItem是为了注册到qml系统中，把spinner当qml的一个组件使用，在spinner的实现过程中，使用了opengl的方式来进行绘图。

图2 工程目录

　　该示例代码的main.cpp文件与qml demo分析(abstractitemmodel-数据分离)文章中分析的一样，都是注册了一个自定义QQuickItem对象到qml上下文中，并使用QQuickView加载main.qml文件并显示，在此就不贴代码啦。

1、opengl scene graph

　　由于这是第一次分析opengl的示例程序，这里我将会把spinner的头文件和实现代码都贴上。首先先来看下spinner类头文件

#ifndef SPINNER_H
#define SPINNER_H

#include <QtQuick/QQuickItem>

class Spinner : public QQuickItem
{
    Q_OBJECT

    Q_PROPERTY(bool spinning READ spinning WRITE setSpinning NOTIFY spinningChanged)

public:
    Spinner();

    bool spinning() const { return m_spinning; }
    void setSpinning(bool spinning);

protected:
    QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *);

signals:
    void spinningChanged();

private:
    bool m_spinning;
};

　　头文件中声明了一个SPinner类，继承自QQuickItem类，重写该类是为了使用opengl绘制旋转效果。代码中使用了Q_PROPERTY宏将m_spinning成员变量注册到了qml系统中，qml代码直接可以通过spinning：值的方式修改该变量，该宏在之前的文章中也有简单的介绍，具体参见qml demo分析(customgeometry-贝塞尔曲线)。

Spinner::Spinner()
    : m_spinning(false)
{
    setSize(QSize(64, 64));
    setFlag(ItemHasContents);
}

void Spinner::setSpinning(bool spinning)
{
    if (spinning == m_spinning)
        return;
    m_spinning = spinning;
    emit spinningChanged();
    update();
}

QSGNode *Spinner::updatePaintNode(QSGNode *old, UpdatePaintNodeData *)
{
    SpinnerNode *n = static_cast<SpinnerNode *>(old);
    if (!n)
        n = new SpinnerNode(window());

    n->setSpinning(m_spinning);

    return n;
}

　　在Spinner类实现中，updatePaintNode接口中构造了一个SpinnerNode类，具体的绘制操作就是在SpinnerNode类中实现。

class SpinnerNode : public QObject, public QSGTransformNode
{
    Q_OBJECT
public:
    SpinnerNode(QQuickWindow *window)
        : m_rotation(0)
        , m_spinning(false)
        , m_window(window)
    {
        connect(window, &QQuickWindow::beforeRendering, this, &SpinnerNode::maybeRotate);
        connect(window, &QQuickWindow::frameSwapped, this, &SpinnerNode::maybeUpdate);

        QImage image(":/scenegraph/threadedanimation/spinner.png");
        m_texture = window->createTextureFromImage(image);//创建一个纹理
        QSGSimpleTextureNode *textureNode = new QSGSimpleTextureNode();//简单纹理节点  加入场景前必须有一个纹理
        textureNode->setTexture(m_texture);//设置纹理
        textureNode->setRect(0, 0, image.width(), image.height());
        textureNode->setFiltering(QSGTexture::Linear);
        appendChildNode(textureNode);
    }

    ~SpinnerNode() {
        delete m_texture;
    }

    void setSpinning(bool spinning)
    {
        m_spinning = spinning;
    }

public slots:
    void maybeRotate() {
        if (m_spinning) {
            m_rotation += (360 / m_window->screen()->refreshRate());
            QMatrix4x4 matrix;
            matrix.translate(32, 32);
            matrix.rotate(m_rotation, 0, 0, 1);//绕z轴旋转
            matrix.translate(-32, -32);
            setMatrix(matrix);
        }
    }

    void maybeUpdate() {
        if (m_spinning) {
            m_window->update();
        }
    }

private:
    qreal m_rotation;
    bool m_spinning;
    QSGTexture *m_texture;
    QQuickWindow *m_window;
};

　　SpinnerNode类继承自QSGTransformNode，构造函数中使用图片构造了一个纹理，并将纹理设置到QSGSimpleTextureNode对象中，进而将该对象添加到场景，添加到场景的顺序决定他们在场景中被绘制的顺序。

　　SpinnerNode类中使用maybeRotate方法将纹理进行了旋转，代码如上32-41行所示。

2、quick animation

　　使用qml属性动画进行旋转操作相对来说比较简单，只需要使用NumberAnimation on rotation即可，具体代码如下64-66行

Rectangle {

    width: 320
    height: 480

    gradient: Gradient {//设置背景色
        GradientStop { position: 0; color: "lightsteelblue" }
        GradientStop { position: 1; color: "black" }
    }

    Rectangle {//与blockingLabel组成一个提示框
        color: Qt.rgba(1, 1, 1, 0.7);
        radius: 10
        border.width: 1
        border.color: "white"
        anchors.fill: blockingLabel;
        anchors.margins: -10
    }

    Text {
        id: blockingLabel
        color: blocker.running ? "red" : "black"//根据定时器状态 修改提示框文本信息和字体颜色
        text: blocker.running ? "Blocked!" : "Not blocked"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 100
    }

    Timer {
        id: blocker
        interval: 357//触发间隔
        running: false;//默认没有启动
        repeat: true
        onTriggered: {//该槽的作用就是为了模拟一个延迟  说明opengl的渲染不在主线程进行  而quick animation在主线程进行渲染
            var d = new Date();
            var x = 0;
            var wait = 50 + Math.random() * 200;
            while ((new Date().getTime() - d.getTime()) < 100) {
                x += 1;
            }
        }
    }
    
    Timer {
        id: blockerEnabler
        interval: 4000
        running: true
        repeat: true
        onTriggered: {
            blocker.running = !blocker.running//定时器状态修改  4s中置反
        }
    }

    Spinner {//opengl
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: 80
        spinning: true//通过setSpinning接口设置该属性值
    }

    Image {//quick animation
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: -80
        source: "spinner.png"
        NumberAnimation on rotation {
            from: 0; to: 360; duration: 1000; loops: Animation.Infinite//1s转动一圈
        }
    }
    
    Rectangle {//与label文本组成底部提示框
        color: Qt.rgba(1, 1, 1, 0.7)
        radius: 10
        border.width: 1
        border.color: "white"
        anchors.fill: label
        anchors.margins: -10
    }

    Text {
        id: label
        color: "black"
        wrapMode: Text.WordWrap
        text: "This application shows two spinners. The one to the right is animated on the scene graph thread (when applicable) and the left one is using the normal Qt Quick animation system."
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.margins: 20
    }
}

 

总结：使用qml有两种方式实现旋转，往大的说就是动画，有两种方式：opengl scene or quick animation。

opengl scene：实现比较麻烦，但是线程独立，不会因为复杂计算而阻塞ui绘制

quick animation：使用简单，但是是在主线程进行绘制。