Qt中QML和QWidget的PropertyAnimation类

1、QWidget的QPropertyAnimation渐隐动画

显隐是动画效果里比较常见的，一定要学会哟。

A、一般显隐动画：

虽然说QWidget没有opacity属性，但是却有windowOpacity属性。

上代码：

#include <QPropertyAnimation>

QPropertyAnimation *m_animation;

m_animation = new QPropertyAnimation(this, "windowOpacity");

m_animation->setStartValue(1);

m_animation->setEndValue(0);

m_animation->setDuration(1000);

m_animation->setEasingCurve(QEasingCurve::Linear);//动画效果

connect(m_animation, SIGNAL(finished()), this, SLOT(onAnimation()));//做了简单的处理，这个槽是根据需要写的

B、特殊情况：

有时，我们会遇到特殊情况，特别是和QGraphics体系混编的时候，有时如上述所做是不能解决问题的。

QGraphics体系里面显隐属性opacity，下面给出新的解决方案：

上代码：

#include <QGraphicsOpacityEffect>

#include <QPropertyAnimation>

QPropertyAnimation *m_animation;
QGraphicsOpacityEffect* m_widgetOpacity;

m_widgetOpacity = new QGraphicsOpacityEffect(this);

m_widgetOpacity->setOpacity(1.0);

this->setGraphicsEffect(m_widgetOpacity);

m_animation = new QPropertyAnimation(m_widgetOpacity,"opacity",this);

m_animation->setStartValue(1);

m_animation->setEndValue(0);

m_animation->setDuration(1000);


m_animation->setEasingCurve(QEasingCurve::Linear);//动画效果

connect(m_animation, SIGNAL(finished()), this, SLOT(onAnimation()));

2、QML PropertyAnimation在动画执行完做其它事

主要调用ParallelAnimation的onStopped方法：

看示例代码：

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600

    Rectangle {
        id: rect
        anchors.fill: parent
        color: "red"
        MouseArea {
            anchors.fill: parent
            onClicked: pro.start()
        }
    }
    PropertyAnimation {
        id:pro
        target: rect
        properties: "color";
        to: "green";
        duration: 1000
        onStopped: console.log("log pro")
    }
}

有朋友遇到这样一个问题，在用states时，在transitions的Transition中嵌入PropertyAnimation，它的onStopped不执行。对此，目前简单用一个外用的PropertyAnimation解决，但不是最好的解决方案。也可以用定时器，定时器很简单就不在此写代码了。

外用PropertyAnimation解决方案：

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        id: rect
        anchors.fill: parent
        state: "state_green"
        MouseArea { anchors.fill: parent
            onClicked: con.start()
        }
        states: [
            State {id: st1;name: "state_green"; PropertyChanges {target: rect;color: "green";}},
            State {id: st2;name: "state_blue"; PropertyChanges {target: rect;color: "blue";}}
        ]

        transitions: [
            Transition {
                from: "state_green"
                to: "state_blue"
                PropertyAnimation{
                    id: pro_green
                    target: rect; property: "color"; duration: 1000;
                }
            },
            Transition {
                from: "state_blue"
                to: "state_green"
                PropertyAnimation{
                    id: pro_blue
                    target: rect; property: "color"; duration: 1000;
                }
            }
        ]

        PropertyAnimation{
            id:con
            duration: 1000;
            onStarted: (rect.state=="state_green")?(rect.state = "state_blue"):(rect.state = "state_green")
            onStopped: {
                if(rect.state == "state_blue") {
                    console.log("state_blue")
                } else {
                    console.log("state_green")
                }
            }
        }
    }
}