QML动画效果 --Property Animation动画元素

Property Animation动画元素

可以在对象属性值上应用对象随时间逐渐改变他们来创建动画。
使用方式有以下几种：
1、作为属性值的来源，可以立即为一个指定的属性使用动画；
2、在信号处理器中创建，当收到一个信号时触发动画
3、作为动画元素，像一个普通的qml对象一样地被创建，不需要绑定到任何特定的对象和属性
4、在属性值改变的行为中创建，当一个属性值改变时触发动画，又叫“行为动画”。

Rect1.qml

import QtQuick 2.0

Rectangle {
    width: 80
    height: 80
    color: "orange"
    radius: 10
    Text {
        id: text1
        anchors.centerIn:parent
        font.pointSize: 12
        text: qsTr("属性值源")
    }

    PropertyAnimation on x{
        from:50
        to:500
        duration: 30000
        loops: Animation.Infinite    //无限循环
        easing.type: Easing.OutBounce//创建了一个动画达到目标值时的一个反弹效果
    }
}

PropertyAnimation on x{}
该动画被应用为属性值源，即“动画元素 on 属性”。Rect1一旦加载完成就会启动该动画，此外loops的属性为Animation.Infinite，表明该动画无限循环。

easing.type: Easing.OutBounce
在PropertyAnimation动画中，可以通过设置easing.type的属性来控制在属性值动画中使用的缓和曲线。它们可以影响这些属性值的动画效果，提供反弹、加速、减速等视觉效果。Easing.Linear//匀速线性运动；Easing.OutBounce//创建了一个动画达到目标值时的一个反弹效果；Easing.InQuart //加速运动

Rect2.qml

import QtQuick 2.0

Rectangle {
    id:rect2
    width: 80
    height: 80
    color: "lightgreen"
    radius: 10
    Text {
        id: text2
        anchors.centerIn: parent
        font.pointSize: 12
        text: qsTr("信号处理")
    }
    MouseArea{
        anchors.fill: parent
        onClicked: PropertyAnimation{
            target: rect2               //动画应用于目标对象
            property: "y"               //y轴方向的运动
            from:30
            to: 300
            duration: 3000              //运动时间为3秒
            loops:10                    //运动为10个周期
            easing.type: Easing.Linear //匀速线性运动
        }
    }
//    Behavior on x {                   //应用到X轴方向的运动行为
//        PropertyAnimation{
//             duration:1000
//             easing.type: Easing.InQuart //加速运动
//        }
//    }

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

onClicked: PropertyAnimation{}
可以在一个信号处理器中创建一个动画，并在接收到信号时触发。本例当MouseArea被单击时，触发PropertyAnimation动画。因为该动画没有绑定到一个特定的对象或属性，因此使用target: rect2 绑定id为rect2 的Rectangle。

Rect3.qml

import QtQuick 2.0

Rectangle {
    id:rect3
    width: 80
    height: 80
    color: "lightblue"
    radius: 10
    Text {
        id: text2
        anchors.centerIn: parent
        font.pointSize: 12
        text: qsTr("元素")
    }
    PropertyAnimation{
        id:animation
        target: rect3
        properties: "x,y"
        duration: 1000
        easing.type: Easing.InOutBack //运动到半程增加过冲，然后减少;相当于元素到底后的特效效果
    }

    MouseArea{
        anchors.fill: parent
        onClicked:{
            animation.from = 20
            animation.to = 200
            animation.running = true
        }
    }
}

PropertyAnimation{}
的动画元素，像一个普通QML元素来创建，不绑定任何对象或属性上。一个的元素默认是没有运行的，使用running属性或start()和stop()方法来明确地运行它。还需要定义target和properties，来绑定相应的对象或属性上。

Rect4.qml

import QtQuick 2.0

Rectangle {
    id:rect4
    width: 80
    height: 80
    color: "aqua"
    radius: 10
    Text {
        id: text4
        anchors.centerIn: parent
        font.pointSize: 12
        text: qsTr("改变行为")
    }

    Behavior on x {                   //应用到X轴方向的运动行为
        PropertyAnimation{
             duration:1000
             easing.type: Easing.InQuart //加速运动
        }
    }

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

Behavior on x { PropertyAnimation{ } }
定义X属性上的行为动画，经常在一个特定的属性值改变时要应用一个动画。本例是在窗口点击，将当前的鼠标位置赋值给x,y坐标，Behavior中的PropertyAnimation对象就会应用到这些属性上，从而使Rectangle的动画效果移动到鼠标单击的位置上。 行为动画是在每次响应一个属性值的变化时触发的，对这些属性的任何改变都会触发其动画。

MainForm.qml //整合这4个动画

import QtQuick 2.0

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:30
        spacing: 5
        Rect1{  }
        Rect2{  }
        Rect3{  }
        Rect4{ id:rect4}

    }
}

实现效果