QML图像、状态和动画--QML动画

QML中，可以在对象的属性值上应用动画对象来随着时间逐渐改变它们从而创建动画。动画对象可以从一组内建的动画元素进行创建，可以用来为多种类型的属性值产生动画。动画还可以通过不同的方式进行运用，这依赖于它们所需要的背景。（QML AniMation关键字）

1. 动画类型

    一个动画创建的方式取决于它所需要的背景

    动画的语义的不同依赖于是否要创建以下几点：

    a. Rectangle一旦创建该动画就要将其移动到一个已知的位置

    b. 动画只有在Rectangle被外部源移动时才会触发，例如，当鼠标点击时，产生动画移动到鼠标位置

    c. 只有在接受到一个特定的信号偶才触发该动画

    d. 作为一个独立的动画，虽然没有绑定Rectangle的运动，但是可以从脚本中进行开启和停止

    e. 只有在状态改变时才会触发该动画。为了支持这些不同类型的动画方式，QML提供了多种方式来定义一个动画。

     f. 使用行为动画，当一个属性改变值时触发

     g. 在一个信号处理器中创建，当接收到一个信号时触发

     h. 作为一个独立动画，可以在脚本中进行开始/停止，也可以重新绑定到不同的对象

     i. 使用切换，在不同状态间提供动画

2. 动画作为属性值的来源

     一个动画被应用为属性值源（property value source），要使用“动画on属性”语法。

import QtQuick 2.4

Rectangle {
    width: 100; height: 100
    color: "red"
    //启动后开始动画
    PropertyAnimation on x {to: 50; duration: 1000; loops: Animation.Infinite}
    PropertyAnimation on y {to: 50; duration: 1000; loops: Animation.Infinite}
}

3. 行为动画

    一个特定的属性值改变时要应用一个动画，可以使用一个Behavior为一个属性改变指定一个默认的动画

import QtQuick 2.4

Item {
    width: 100; height: 100
    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        //设置移动动画，时间为0.5秒
        Behavior on x {PropertyAnimation {duration: 500} }
        Behavior on y {PropertyAnimation {duration: 500} }
    }
    //到达鼠标点击的位置
    MouseArea {
        anchors.fill: parent
        onClicked: {rect.x = mouse.x; rect.y = mouse.y}
    }
}

   有些情况下还可以通过enabled属性来停用Behavior。注意这里的PropertyAnimation的from和to属性是不需要定义的，因为这些值已经提供了，分别是Rectangle的当前值和onClicked处理器中设置的新值。

4. 在信号处理器中的动画

    可以在信号处理器中创建一个动画，并在接搜到信号时触发

import QtQuick 2.4

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        //点击事件触发动画事件
        onClicked: PropertyAnimation{target: rect; properties: "x, y"; to: 50; duration: 500}
    }
}

    因为动画没有绑定到一个特定的对象或者属性，所以必须指定target和property（或者targets和properties）属性的值。而且还需要使用to属性来指定新的x和y的值。

5. 独立动画

    动画也可以像一个普通的QML对象一样进行创建，而不需要绑定到任何特定的对象和属性。

import QtQuick 2.4

//独立动画
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    //独立定义的电话
    PropertyAnimation {
        id: animation
        target: rect
        properties: "x,y"
        duration: 1000
    }
    //点击调用动画
    MouseArea {
        anchors.fill: parent
        onClicked: {
            animation.to = 50
            animation.running = true
        }
    }
}

    一个独立的动画对象默认是没有运行的，必须使用running属性或者start()和stop()函数来明确地运行它。因为动画没有绑定到一个特殊得对象或属性上，所以必须定义target和property（或者targets和properties）属性的值。也需要用to属性来指定新的x和y值。杜利军动画在不是一对一对象属性进行动画而且动画需要明确开始和停止的情况下是非常有用的。

6. 切换

   切换用来设置当前状态改变时的动画，需要创建一个切换，需要定义一个Transition对象，然后将其添加到项目的transition属性

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: rect.state = "moved"
    }
    states: State {
        name: "moved"
        //定义了当Rectangle在该状态时其位置应该改变为（50，50）
        PropertyChanges {target: rect; x: 50; y: 50}
    }

    transitions: Transition {
        PropertyAnimation { properties: "x, y"; duration: 1000}
    }
}

   当Rectangle改变到moved状态是，Transition将被触发，切换的PropertyAnimation将会使用动画将x和y属性改变到它们的新值。这里没有为PropertyAnimation设置任何from和to属性的值，在状态改变的开始之前和结束之后会自动设置这些属性x和y的值。另外，PropertyAnimation并不需要指定target对象，这样任何对象的x和y值在状态改变时进行更改都会使用动画。不过，可以指定一个target来为特定的对象使用动画。在Transition中的顶级动画会并行运行，想要一个个的运行，可以使用SequentialAnimation，这个在后面的内容中讲到。

7. 动画元素

    所有的动画都继承自Animation元素，尽管无法直接创建Animation对象，不过它为动画元素提供了必要的属性和函数。

    它允许使用running属性和start()和stop()函数来控制动画的开始和停止，也可以通过loops属性定义动画的循环次数

8. 属性动画元素

    PropertyAnimation是用来为属性提供动画的最基本的动画元素，可以用来为real、int、color、rect、point、size和vector3d等属性设置动画，被NumberAnimation、colorAnimation、RotationAnimation和Vector3dAnimation等元素继承。NumberAnimation对real和int属性提供了更高效的实现；Vector3dAnimation对vector3d属性提供了更高效的支持；而ColorAnimation和RotationAnimation分别对color和rotation属性变化动画提供了特定的属性支持。

    ColorAnimation允许颜色值设置from和to属性。

import QtQuick 2.4

Rectangle {
    id: rect
    width: 100; height: 100
    //颜色渐变，运行时执行
    ColorAnimation on color {from:"red"; to: "yellow"; duration: 1000}
}

    RotationAnimation允许设定旋转的方向。

import QtQuick 2.4

Item {
    width: 300; height: 300

    Rectangle {
        width: 100; height: 100; anchors.centerIn: parent
        color: "red"
        //启动运行，顺时针旋转90度
        RotationAnimation on rotation {to: 90; direction: RotationAnimation.Clockwise}
    }
}

   另外，下面还有几种专门的动画元素可以使用：

    a. SmoothedAnimation: 它是一个专门的NumberAnimation，当目标值改变时在动画中为其提供了一个平滑的变化；

    b. SpringAnimation: 提供了一个像弹簧一样的动画，可以设置mass、damping和epsilon等属性

    c. ParentAnimation: 用来在改变父项目时产生动画（对应ParentChange元素）

    d. AchorAnimation: 用来在改变锚时产生动画（对应AnchorChanges元素）

    对于任何基于PropertyAnimation的动画都可以通过设置easing属性来控制在属性值动画中使用的缓和曲线。它们可以影响这些属性值的动画效果，提供一些如反弹、加速和减速等视觉效果。OutBounce来创建一个动画到达目标值时的反弹效果。

import QtQuick 2.4

Rectangle {
    width: 100; height: 100
    color: "red"
    //反弹效果
    PropertyAnimation on x {to: 50; duration: 1000; easing.type: Easing.OutBounce}
    PropertyAnimation on y {to: 50; duration: 1000; easing.type: Easing.OutBounce}
}

9. 组合动画

    多个动画可以组合成一个单一的动画，这可以使用ParalleAnimation或者SequentialAnimation动画组元素中的一个实现。在ParaleAnimation中的动画会同时进行，而在SequentialAnimation中的动画会一个个地运行。想要运行多个动画，可以在一个动画组中定义。

import QtQuick 2.4

Rectangle {//SequentialAnimation作为属性值源动画应用在了image的y属性上，所以动画会在图片加载完成后立即执行
    id: rect
    width: 120; height: 200
    color: "skyblue"

    Image {
        id: img
        width: 30; height: 25
        source: "1.jpg"
        anchors.horizontalCenter: parent.horizontalCenter
        y: 0

        SequentialAnimation on y {
            loops: Animation.Infinite
            NumberAnimation {to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000}
            PauseAnimation { duration: 1000}
            NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000}
        }
    }
}

    因为SequentialAnimation是应用在y属性上的，所以在组中的独立的动画也会自动应用在y属性上。动画组还可以嵌套。

import QtQuick 2.4
//使用了顺序和并行动画
Rectangle {
    id: rect
    width: 120; height: 200
    color: "skyblue"

    MouseArea {id: mouseArea; anchors.fill: parent}

    states: State {//点击时候，y轴改变，宽度改变
        name: "pressed"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "blue"; y: mouseArea.mouseY;
            width: mouseArea.mouseX;}
    }

    transitions: Transition {
        SequentialAnimation {
            //颜色改变时间
            ColorAnimation { duration: 200 }
            PauseAnimation { duration: 200 }

            ParallelAnimation {
                NumberAnimation {
                    duration: 500
                    easing.type: Easing.OutBounce
                    targets: rect
                    properties: "y"
                }

                NumberAnimation {
                    duration: 800
                    easing.type: Easing.InOutQuad
                    targets: redRect
                    properties: "width"
                }
            }
        }
    }
}

    一旦独立动画被放入SequentialAnimation或者ParallelAnimation，那么它们就不能再独立开启或者停止。顺序或者并行动画必须作为一个组进行开启和停止。

10. 其他动画元素

    QML还为动画提供了其他一些有用的元素

    a. PauseAnimation： 在动画中间进行暂停

    b. ScriptAnimation: 允许在动画中执行JavaScript，也可以和StateChangeScript一起使用来重用已经存在的脚本