Animation（二-三种动画启动方式）

有很多种类型的动画：

• PropertyAnimation（属性动画）- 使用属性值改变播放的动画
• NumberAnimation（数字动画）- 使用数字改变播放的动画
• ColorAnimation（颜色动画）- 使用颜色改变播放的动画
• RotationAnimation（旋转动画）- 使用旋转改变播放的动画

除了上面这些基本和通常使用的动画元素， QtQuick 还提供了一切特殊场景下使用的动画：

• PauseAnimation（停止动画）- 运行暂停一个动画
• SequentialAnimation（顺序动画）- 允许动画有序播放
• ParallelAnimation（并行动画）- 允许动画同时播放
• AnchorAnimation（锚定动画）- 使用锚定改变播放的动画
• ParentAnimation（父元素动画）- 使用父对象改变播放的动画
• SmotthedAnimation（平滑动画）- 跟踪一个平滑值播放的动画
• SpringAnimation（弹簧动画）- 跟踪一个弹簧变换的值播放的动画
• PathAnimation（路径动画）- 跟踪一个元素对象的路径的动画
• Vector3dAnimation（3D容器动画）- 使用QVector3d值改变播放的动画

应用动画的三种方式：

• 属性动画 - 在元素完整加载后自动运行
• 属性动作 - 当属性值改变时自动运行
• 独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true（比如通过属性绑定）

以下实验这三种动画的启动方式：

第一种策略：

• 第一个火箭使用了Animation on 属性变化的策略来完成。动画会在加载完成后立即播放
• 在动画播放时重置第一个火箭不会有任何影响

第二种策略：

• 第二个火箭使用了behavior on 属性行为策略的动画。
• 这个行为告诉属性值每时每刻都在变化，并通过动画的方式来改变这个值（例子中是监视 y 的值，如果监视到 y 的值变化了之后就会用设置的动画方式重新回到初始设置的值）
• 可以使用行为元素的enabled : false 来设置行为失效。
• 当你点击这个火箭时它将会开始运行（y轴坐标逐渐移至40）。 然后其它的点击对于位置的改变没有任何的影响。

第三种策略：

• 第三个火箭使用standalone animation独立动画策略。
• 这个动画由一个私有的元素定义并且可以写在文档的任何地方。
• 点击火箭调用动画函数start()来启动动画。
• 每一个动画都有start()，stop()，resume()，restart()函数。
• 这个动画自身可以比其他类型的动画更早的获取到更多的相关信息。
• 我们只需要定义目标和目标元素的属性需要怎样改变的一个动画。
• 我们定义一个to属性的值，在这个例子中我们也定义了一个from属性的值允许动画可以重复运行

代码：

import QtQuick 2.0

// ClickableImage组件
Item {
    id:root
    width: container.childrenRect.width
    height: container.childrenRect.height

    property alias text: label.text
    property alias source: image.source

    signal clicked

    Column{
        id:container

        Image{
            id:image
        }

        Text {
            id: label
            width:image.width
            // 设置文本位置为 Text 元素的水平居中
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            color: "#111111"
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: root.clicked();
    }
}

这是一个我们使用文件方式自定义的一个ClickedImage 组件，组件内使用了一个 Column Position item（定位元素），Text元素内设置了文字的显示方式和文本在 Text 内部的位置！

这个组件我们会在 main.xml 文件中使用，需要指定 text、source属性的值！

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 480
    title: qsTr("Hello World")

    Image {
        source: "qrc:/new/preimg/background.png"
        anchors.fill: parent

        // 使用组件
        // first rocket
        ClickableImage{
            id:rocket1
            x:40
            y:200
            source: "qrc:/new/preimg/rocket.png"
            text: "animation on property"
            NumberAnimation on y {
                to:40
                duration: 4000
            }
        }

        // 使用组件
        // second rocket
        ClickableImage{
            id:rocket2
            x:152
            y:200
            source: "qrc:/new/preimg/rocket.png"
            text:"behavior on property"
            Behavior on y{
                NumberAnimation{
                    duration:4000
                }
            }
            onClicked: y = 40
        }

        // 使用组件
        // third rocket
        ClickableImage{
            id:rocket3
            x:264
            y:200
            source: "qrc:/new/preimg/rocket.png"
            onClicked: anim.start();
            text: "standalone animation"

            NumberAnimation{
                id: anim
                target: rocket3
                properties: "y"
                from: 205
                to:40
                duration: 4000
            }
        }
    }
}

这个文件中我们使用了自定义的的 ClickedImage 组件，并实验了三种动画启动方式！

运行>>

第一种启动的时候就会播放动画。第二种点击 rocket 就会播放动画，并且动画播放完毕之后再点击没有效果，第三种点击才会播放动画，并且动画播放完毕之后再点击还会重新播放动画！