QML动画

一、QML动画简介
1、 动画是在指定的时间内，一系列属性的持续变化。

2、 QML动画使用插值的方式控制属性的更改。

3、 常用动画类型继承关系:

                   Animation
		              |                                        
               PropertyAnimation                        
      /               |                 \
NumberAnimation  ColorAnimation  RotationAnimation

4、 常用的动画类型:
(1)、PropertyAnimation: 属性值改变设置动画
(2)、NumberAnimation: 数值改变设置动画
(3)、ColorAnimation: 颜色值改变设置动画
(4)、RotationAnimation: 旋转值改变设置动画

5、 PropertyAnimation动画类型常用属性说明:
(1)、duration:
a、duration是int类型。
b、duration表示动画的持续时间。
c、单位是ms。
d、默认值是250。
(2)、target/targets:
a、target是QtObject类型，targets是list< QtQbject >类型。
b、target/targets确定哪些目标对象应该设置动画，即填写目标对象的id。
c、target是单数，如target: theItem。 targets是复数，如targets: [itemA, itemB]。
(3)、property/properties:
a、property/properties都是string类型。
b、property/properties确定哪些属性应该设置动画。
c、property是单数，如property: “x”。 properties是复数，如properties: “x,y”。
(4)、from:
a、from是variant类型。
b、from保存该动画的属性起始值。
c、如果该动画定义在Transition或Behavior中，from默认是Transiton初始状态下对应属性的值，或者是触发Behavior时对应属性的当前值。
(5)、to:
a、to是variant类型。
b、to保存该动画的属性结束值。
c、如果该动画定义在Transition或Behavior中，to默认是Transiton结束状态下对应属性的值，或者是触发Behavior时对应属性的更改值。
(6)、easing:
a、easing包含一组属性，如easing.type、easing.amplitude等。
b、指定用于动画的缓和曲线，即影响属性更改的插值曲线。
c、要使用缓和曲线，至少得指定类型easing.type，对于某些曲线，还可以指定振幅、周期等。
d、具体哪些缓和曲线，可以看帮助文档，文档中给的曲线，x轴是duration，y轴是property值。
(注意1，target/targets和property/properties通常作为一个集合，用于确定哪些目标对象的哪些属性应该设置动画。)
(注意2，在许多情况下，target/targets和property/properties可以不明确指定，因为QML可以从动画框架中推断出来，具体看示例)

6、 NumberAnimation、ColorAnimation、RotationAnimation和PropertyAnimation的区别:
(1)、NumberAnimation的from和to属性类型是real。
(2)、ColorAnimation的from和to属性类型是color。
(3)、RotationAnimation的from和to属性类型是real，多一个旋转方向direction属性。

7、 可以通过多种方式执行动画:
(1)、在状态转换Transition中定义一个动画，状态切换时自动执行。
(2)、在属性行为Behavior中定义一个动画，更改属性值时自动执行动画。
(3)、在属性上定义一个动画，目标对象加载后自动执行动画，作为该属性值的源。
(4)、在槽函数中定义动画，槽函数运行时执行动画。
(5)、独立定义动画，使用start()或将running置为true，显示执行动画。
(注意，会一种动画类型，其它动画类型就都会了)

二、示例一: 在状态转换Transition中定义一个动画，状态切换时自动执行动画。
1、定义一张100*100的图片。
2、图片初始状态x为20; 图片moved状态x为250。
3、在Transition中定义一个4000ms的动画，作用于图片的x属性。
4、当鼠标点击图片时，图片状态切换为moved状态，自动运行动画。
5、代码: main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Image {
        id: screenImg
        x: 20
        y: 100
        width: 100
        height: 100
        source: "file:./images/screen.png"

        states: [
            State {
                name: "moved"
                PropertyChanges { target: screenImg; x: 250 }
            }
        ]

        transitions: Transition {
            PropertyAnimation {  property: "x"; duration: 4000 }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                screenImg.state = "moved"
            }
        }
    }
}

三、示例二: 在属性行为Behavior中定义一个动画，更改属性值时自动执行动画。
1、定义一个100*100的红色矩形。
2、在矩形的x属性上定义一个行为Behavior，在Behavior中定义一个4000ms的动画。
3、当鼠标点击矩形时，将矩形的x属性改为250。
4、一旦矩形的x属性更改，动画自动播放起来。
5、代码: main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Rectangle {
        x: 0
        y: 150
        width: 100;
        height: 100
        color: "red"

        Behavior on x {
            PropertyAnimation {duration: 4000}
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                parent.x = 250
            }
        }
    }
}

四、示例三: 在属性上定义一个动画，目标对象加载后自动执行动画，作为该属性值的源。
1、定义一个100*100的红色矩形。
2、软件一运行，矩形的x值就以4000ms的动画过渡到250。
3、代码: main.qml

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Rectangle {
        x: 0
        y: 150
        width: 100
        height: 100
        color: "red"

        PropertyAnimation on x {
            to: 250
            duration: 4000
        }
    }
}

五、示例四: 在槽函数中定义动画，槽函数运行时执行动画。
1、定义一个100*100的红色矩形。
2、当鼠标点击矩形时，矩形的透明度opacity从默认的1变为0，矩形慢慢变得透明，动画时间默认是250ms。
3、代码: main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Rectangle {
        id: theObject
        x: 0
        y: 150
        width: 100
        height: 100
        color: "red"

        MouseArea {
            anchors.fill: theObject
            onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
        }
    }
}

六、示例五: 独立定义动画，使用start()或将running置为true，显示执行动画。
1、定义一个100*100的红色矩形。
2、单独定义了一个动画，作用于矩形的width属性上，该动画用500ms时间将矩形的width从100变为30。
3、动画默认不运行，当鼠标点击矩形时，将动画的running置为true，显示执行动画。
4、代码: main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Rectangle {
        id: theRect
        x: 0
        y: 150
        width: 100
        height: 100
        color: "red"

        PropertyAnimation {
            id: animation
            target: theRect
            property: "width"
            to: 30
            duration: 500
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                animation.running = true;
            }
        }
    }
}

七、示例六: 定义多种独立动画，每次点击都重新开始执行动画。
1、定义一个100*100的图片。
2、定义三种独立的动画，分别作用于图片的x属性、rotation属性和opacity属性。
3、动画都加上from属性，表示每次动画执行都从from值开始，到to值结束。
4、当鼠标点击图片时，三种动画重新开始运行。
5、代码: main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test Animation")

    Image {
        id: screenImg
        x: 0
        y: 150
        width: 100
        height: 100
        source: "file:./images/screen.png"
    }

    NumberAnimation {
        id: na
        target: screenImg
        property: "x"
        from: 0
        to: 250
        duration: 4000
    }

    RotationAnimation {
        id: ra
        target: screenImg
        property: "rotation"
        from: 0
        to: 360
        direction: RotationAnimation.Clockwise
        duration: 4000
    }

    PropertyAnimation {
        id: pa
        target: screenImg
        property: "opacity"
        from: 1.0
        to: 0.1
        duration: 4000
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            na.restart();
            ra.restart();
            pa.restart();
        }
    }
}