第14章：QML之PropertyAnimation

1，属性动画
2，源码

import QtQuick 2.0

//"属性值源"矩形
Rectangle{
    width: 80
    height: 80
    color: "orange"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "属性值源"
    }

    //一个动画被应用为属性值源，要使用"动画元素 on"属性语法，本例的Rect1的运动就使用了
    //这个方法，指定一个动画作为属性源，在一个对象加载完成后立即就对一个属性使用动画变化
    //到一个指定的值的情况是非常有用的
    //对于基于PropertyAnimation的动画都可以通过设置easing属性来控制在属性值动画中使用的
    //缓和曲线，它可以影响这些属性值的动画效果，提供反弹，加速，减速等视觉效果
    PropertyAnimation on x{
        from: 50                             //起点
        to: 500                              //终点
        duration: 30000                      //运动时间为30s
        loops: Animation.Infinite            //无限循环
        easing.type: Easing.OutBounce
    }
}

import QtQuick 2.0

//"信号处理"矩形
Rectangle{
    id: rect2
    width: 80
    height: 80
    color: "lightgreen"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "信号处理"
    }

    //可以在一个信号处理中创建一个动画，并在接收到信号时触发，这里当MouseArea被单击时则触发
    //PropertyAnimation,在3000毫秒内使用动画将y坐标由30改变为300，并往返重复运动3次
    //因为动画没有绑定到一个特定的对象或属性上，所以也必须定义target property属性
    MouseArea{
        anchors.fill: parent
        onClicked: PropertyAnimation{
            target: rect2                 //动画应用于标识rect2的矩形（目标对象）
            property: "y"                 //y轴方向的动画
            from: 30                      //起点
            to: 300                       //终点
            duration: 3000                //运动时间为3s
            loops: 3                      //运动时间为3个周期
            easing.type: Easing.Linear    //匀速线性运动
        }
    }
}

import QtQuick 2.0

//"独立元素"矩形，
Rectangle{
    id: rect3
    width: 80
    height: 80
    color: "aqua"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "独立元素"
    }

    //这是个独立的动画元素，它像普通QML元素一样创建，并不绑定到任何对象或属性
    //一个独立的动画元素默认是没有运行的，必须使用running属性或start()和stop()
    //方法来明确地运行它
    //因为动画没有绑定到一个特定的对象或属性上，所以也必须定义target property属性
    PropertyAnimation{
        id: animation                           //独立动画标识符
        target: rect3
        properties: "x,y"                       //同时在x，y轴两个方向上运动
        duration: 1000                          //运动时间为1秒
        easing.type: Easing.InOutBack           //运动到半程增加过冲，然后减少
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            animation.from = 20                //起点
            animation.to   = 200               //终点
            animation.running = true           //开启动画
        }
    }
}

import QtQuick 2.0

//"改变行为"矩形
Rectangle{
    width: 80
    height: 80
    color: "lightblue"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "改变行为"
    }

    //定义x属性上的行为动画，经常在一个特定的属性值改变是要应用一个动画
    //这种情况下可以使用一个Behavior为一个属性改变指定一个默认的动画
    //这里Behavior对象应用到它的x和y属性
    Behavior on x{                                 //X轴
        PropertyAnimation {
            duration: 1000                         //运动时间为1秒
            easing.type: Easing.InQuart            //加速运动
        }
    }

    Behavior on y{                                //Y轴
        PropertyAnimation{
            duration: 1000
            easing.type: Easing.InQuart
        }
    }
}

import QtQuick 2.6

//PropertyAnimation(属性动画元素):是用来为属性提供动画的最基本的动画元素
//可以用来为real，int，color，rect，point，size，vector等设置动画

Rectangle {
    property alias mouseArea: mouseArea
    property alias textEdit: textEdit
    property alias rect4: rect4



    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    TextEdit {
        id: textEdit
        visible: false
    }

    Column {
        x: 50; y: 50
        spacing: 5
        Rect1{}                 //"属性值源"矩形
        Rect2{}                 //"信号处理"矩形
        Rect3{}                 //"独立元素"矩形
        Rect4{id: rect4}        //"改变行为"矩形

    }
}

3，效果