QML学习笔记4-动画-曲线-分组-状态

动态元素：
1 动画(Animations):被用于属性的改变， 一个动画定义了属性值改变的曲线，将一个属性值变化从一个值过渡到另一个值.动画是由一连串的目标属性活动定义的，平缓的曲线算法能够引发一个定义时间内属性的持续变化。 所有在QtQuick中的动画都由同一个计时器来控制，因此他们始终保持同步，这也是提高了动画的性能和显示效果。动画控制了属性的改变，也就是值的插入。这是一个基本的概念，QML是基于元素，属性与脚本的。每一个元素都提供了许多的属性， 每一个属性都在等待使用动画。动画控制了属性的改变，每个元素都有大量的属性供任意使用。

常用的动画：
PropertyAnimation(属性动画)： 使用属性值改变播放的动画
NumberAnimation(数字动画)：使用数字改变播放的动画
ColorAnimation(颜色动画)：使用颜色改变播放的动画
RotationAnimation(旋转动画)：使用旋转改变播放的动画

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

动画元素：
propertyAction(属性动作)--->在播放动画是改变属性
ScriptAction(脚本动作)--->在播放动画是运行脚本
应用动画：应用方式
1 属性动画：在元素武安镇加载后自动运行 (NumberAnimation on PropertyName{to: xxx; duration: times})
2 属性动作：当属性值发生改变时自动运行 (behavior on propertuName{Animationname{duration: times}})
3 独立运行动画：使用start()函数来明确指定运行绘制runnint属性被设置为true 
例子
Rectangle {
    id: root
    visible: true
    width: 600
    height: 1024
    title: qsTr("Hello World")

    Image{
        id: bg_img
        source: "qrc:img/load_bg.png"
        anchors.fill: parent
        smooth: true
    }

    MouseArea{
        id: mousearea
        anchors.fill: parent
        onClicked: {
            rocket1.y = rocket2.y = rocket3.y = 205
        }
    }

    //Animation on 属性变化的策略，动画会在加载完成后立即播放
    ClickableImg{
        id: rocket1

        x: 40; y: root.height - height
        source: "qrc:img/rocket.png"
        text: "animation on property"
        //y值在4s时间内达到40
        NumberAnimation on y{
            to: 40; duration: 4000
        }

        onClicked: y = 40
    }

    //Behavior on 属性行为策略行为告诉属性值每时每刻都在变化 通过动画的方式来改变这个值 可以使用行为元素
    //enabledL false来设置行为失效
    ClickableImg{
        id: rocket2

        x: 152; y: root.height - height
        source: "qrc:img/rocket.png"
        text: "Behavior on property"

        Behavior on y{
            NumberAnimation{duration: 4000}
        }

        onClicked: y = y = 40+Math.random()*(1024-40)
    }

    //standalone animation 独立动画策略
    /*每个动画由一个私有的元素定义并且可以写在文档任何地方。 点击图片调用函数start()来启动动画
    * 每个动画都有start() stop() resume() restart()函数 这个动画自身可以比其他类型的动画更早
    * 的获取到更多的相关信息。 我们只需要定义目标和目标元素的属性需要怎样改变的动画
    * 我们定义一个to属性的值 在这个例子中我们也定义了一个from属性的值允许动画可以重复运行 */
    ClickableImg{
        id: rocket3
        x: 263; y: root.height - height
        source: "qrc:img/rocket.png"

        onClicked: {
            animation.start()
        }

        text: "standalone animation"

        NumberAnimation{
            id: animation
            target: rocket3
            property: 'y'
            to: 40
            duration: 4000
        }

        NumberAnimation{
            id: animation1
            target: rocket3
            property: 'x'
            to: 500
            running:mousearea.pressed
        }
    }

缓冲曲线：
属性值的改变能够通过一个动画来控制，缓冲曲线属性影响了一个属性值改变的插值算法。在已经定义的动画都使用了一种线性的插值算法， 因为一个动画的默认缓冲类型为Easing.Linear 在一个小场景下x轴和y轴坐标改变可以得到更好的视觉效果。一个线性插值算法将在动画开始使用时from的值到动画结束时使用的to值绘制一条直线， 所以缓冲类型定义了曲线变化的情况
easing.type = Easing.InBounce

动画分组：(一组动画) 
分组方法: 平行与连续 可以是用SequentialAnimation(连续动画)和ParallelAnimation(平行动画)来实现，他们作为动画的容器来包含其他的动画元素
平行动画：即并行运行分组中的各个动画
连续动画：则按照声明的顺序逐个执行动画
例子：
import QtQuick 2.0

DarkSquare {
    id: root
    width: 600
    height: 1024

    property int duration: 2000

   GreenSquare {
        id: square
        x: 40; y: 260
    }

   MouseArea{
       anchors.fill: parent
       onClicked: {
           square.x= 40
           square.y= 260
           anim.restart()
       }
   }

   //平行动画
   ParallelAnimation {
       id: anim

       //连续动画
       SequentialAnimation{
           //平移x
            NumberAnimation {
                target: square
                property: "x"
                from: 40
                to: 500
                duration: root.duration
            }

            //平移Y
            NumberAnimation {
                target: square
                property: "y"
                from: 260
                to: 500
                duration: root.duration
            }
       }
        //角度旋转
        RotationAnimation {
            target: square
            properties: "rotation"
            from: 0
            to: 720
            duration: root.duration
        }
   }
}

状态:
通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变，并且会在一定的条件下呗触发。另外在这些状态转化过程中可以有一个过渡(定义了这些属性的动画或者附加动作， 当进入一个新的状态， 动作可以被执行)
为了让用户界面看起来更加自然，我们需要使用动画效果来增加一些过渡。 一个过渡能够被状态的改变触发

在QML中使用State元素来定义状态，需要与基础元素(Item)的states序列属性链接。 
状态通过它的状态名来鉴别，由组成它的一系列简单属性来改变元素。默认的状态在初始化元素属性是定义， 命名为""(一个空的字符串)。状态的改变由分配一个元素新的状态属性名来完成。
另一种切换属性的方法是使用状态元素的when属性， shen属性能够被设置为一个表达式的结果，当结果为true时 状态被使用

过渡：
一系列的过渡能够被加入任何元素，一个过渡由状态的改变触发执行。你可以使用属性的from:和to:来定义状态改变的指定过渡。这两个属性就像一个过滤器，当过滤器为true时，过渡生效。你也可以使用“”来表示任何状态。例如from:”“; to:”*”表示从任一状态到另一个任一状态的默认值，这意味着过渡用于每个状态的切换。在这个例子中，我们期望从状态“go”到“stop”转换时实现一个颜色改变的动画。对于从“stop”到“go”状态的改变，我们期望保持颜色的直接改变，不使用过渡。我们使用from和to来限制过渡只在从“go”到“stop”时生效。在过渡中我们给每个灯添加两个颜色的动画，这个动画将按照状态的描述来改变属性。
例子：
import QtQuick 2.0

Rectangle {
    id: root
    width: 150
    height: 400

    property color black: "#1f1f21"
    property color red:  "#fc3d39"
    property color green: "#53d769"
    property color yellow: "#ffff37"

    gradient: Gradient{
        GradientStop{position: 0.0; color: "#2ed5fa"}
        GradientStop{position: 1.0; color: "#2467ec"}
    }

    Rectangle{
        id: light1
        x: 25; y: 15
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    }

    Rectangle{
        id: light2
        x: 25; y: 135
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    }

    Rectangle{
        id: light3
        x: 25; y: 255
        width: 100; height: width
        radius: width/2
        color: root.black
        border.color: Qt.lighter(color, 1.1)
    }

    state: "stop"

    states: [
        State{
            name: 'stop'
            PropertyChanges {target: light1; color: root.red}
            PropertyChanges {target: light2; color: root.black}
        },
        State{
            name: 'go'
            PropertyChanges {target: light1; color: root.black}
            PropertyChanges {target: light2; color: root.green}
        },
        State{
            name: 'wait'
            PropertyChanges {target: light1; color: root.black}
            PropertyChanges {target: light2; color: root.black}
             PropertyChanges {target: light3; color: root.yellow}
        }
    ]

    MouseArea{
        anchors.fill: parent
        onClicked:{
            if (parent.state == 'stop')
                parent.state = 'wait'
            else if(parent.state == 'wait')
                parent.state = 'go'
            else
                parent.state = 'stop'

        }
    }

    transitions:[
        Transition {
            from: "stop"; to: "wait"

            ColorAnimation {
                target: light1
                properties: 'color'
                duration: 2000
            }

            ColorAnimation {
                target: light2
                properties: 'color'
                duration: 2000
            }
        },
        Transition {
            from: "wait"; to: "go"
            ColorAnimation { target: light2; properties: "color"; duration: 2000 }
            ColorAnimation { target: light3; properties: "color"; duration: 2000 }
        }
    ]
}