25.Qt Quick QML-Animation、PropertyAnimation、NumberAnimation、ColorAnimation

全部的动画组件都是继承于Animation,因此咱们先来介绍下它们的父组件Animation.

1.Animation
须要注意的是若是直接使用Animation将致使错误。它的存在只是为了给子组件提供一组公共属性和方法，这些属性和方法可在继承自它的全部其余动画类型中使用。
Properties

• alwaysRunToEnd : bool,始终运行到终点,默认为false,若是为true,那么咱们就算在启动动画途中调用stop(),也无法中止,必须到了终点才中止
• loops : int,循环次数,默认值为1,表示启动动画后,动画只会运行1次,若是咱们设置为3,那么就是运行3次,若是设置为Animation.Infinite,那么就是无限次
• paused : bool,设置动画是否暂停。
• running : bool ,设置动画是否运行

Signals

• finished(): 当动画天然完成时，将发出此信号。当running设置为false时，它不会发出，对于loops = Animation.Infinite时也不会发出。
• started() : 当动画开始时发出此信号。
• stopped() : 动画中止时发出此信号(无论是用户调用了stop() ,仍是动画天然完成),若是alwaysRunToEnd = true,那么不会发出该信号

Methods

• start() : 若是动画已经在运行，则调用此方法无效(好比暂停后,调用start()是没反应的,由于running此时仍是为true)。在调用start()后，running属性将为true。
• stop() : 若是动画未运行，则调用此方法无效。在调用stop()后，running属性和paused属性都将设置为false。
• restart() : 从新启动函数，至关于调用stop()，而后调用start()。
• complete() : 完成函数,当调用该函数后,若是动画正在running中,当前属性值会直接跳转到目的属性值,而后并将running置为false,对于loops >= 1时,该函数将会无效.
• pause() : 暂停函数,当调用该函数后,会暂停动画,并将paused属性置为true
• resume() :恢复暂停函数,若是动画未暂停或未运行,则调用此方法无效。在调用resume()后，paused属性将为false。

测试alwaysRunToEnd属性
因为Animation是虚组件,不能直接使用,因此咱们以它的子组件PropertyAnimation为例:

　　Column {
            Button {
                text: "启动动画"
                onClicked: {
                    animation.start()
                }
            }

            Button {
                text: "中止动画"
                onClicked: {
                    animation.stop()
                }
            }

            Rectangle {
                 id: rect
                 width: 20
                 height: 20
                 color: "#000000"
                 PropertyAnimation {
                     id:animation;
                     loops: Animation.Infinite
                     alwaysRunToEnd: true
                     target: rect
                     property: "x"
                     from: 0;
                     to: 100;
                     duration: 500
                 }
             }
        }

当咱们启动动画后,点击中止动画按钮时,此时必须到了终点才中止.

2.PropertyAnimation - 改变property属性时能够产生的动画
PropertiesAniation用来给target目标下的property属性更改分配一个动画的组件.它的父组件是Animation
Properties

• duration : int,设置动画持续时间,以ms为单位,默认值为250
• easing.type : enumeration,设置动画的缓和曲线.默认值为Easing.Linear(线性过程),好比咱们设置为Easing.InQuad时,动画效果就是从慢到快的过程.
• easing.amplitude : real,设置缓和曲线的振幅,默认值为1.0,值越大振幅越大,仅当easing.type为Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, 　　Easing.InOutElastic or Easing.OutInElastic才生效
• from : variant,设置动画的起始值,能够为任意类型的值
• to : variant ,设置动画的终点值,能够为任意类型的值
• target : Object,设置目标对象
• targets : list<Object>,设置多个目标对象,好比targets: [rect1,rect2]
• exclude : list<Object>,设置不产生动画的对象
• property : string,设置要分配动画的目标对象下的哪一个属性,好比property: "x"
• properties : string,设置要分配动画目标对象下的多个属性,好比properties: "x,y",分配了x和y属性

示例以下所示:

    Column {
        Button {
            text: "启动动画"
            onClicked: {
                animation.start()
            }
        }

        Button {
            text: "中止动画"
            onClicked: {
                animation.stop()
            }
        }

        Rectangle {
             id: rect1
             width: 20
             height: 20
             color: "#0000FF"
         }
        Rectangle {
             id: rect2
             width: 20
             height: 20
             color: "#FF0000"
         }
    }

    PropertyAnimation {
        id:animation;
        loops: Animation.Infinite
        alwaysRunToEnd: true
        targets: [rect1,rect2]
        property: "x"
        easing.type: Easing.InQuad
        from: 0;
        to: 100;
        duration: 2000
    } 

当咱们点击启动按钮后,就会启动rect1和rect2的x属性从坐标0到100进行移动的动画.

假如一个动画只针对一个目标对象的一个属性,那么咱们可使用 XXXAnimation on Property { ... }写法,这样就不须要指定target和property了,更加便捷:

　　Column {
        Button {
            text: "启动动画"
            onClicked: {
                animation.start()
            }
        }

        Button {
            text: "中止动画"
            onClicked: {
                animation.stop()
            }
        }

        Rectangle {
             id: rect1
             width: 20
             height: 20
             color: "#00FF00"

             PropertyAnimation on x {
                 id:animation;
                 loops: Animation.Infinite
                 alwaysRunToEnd: true
                 easing.type: Easing.InQuad
                 running: false
                 from: 0;
                 to: 100;
                 duration: 2000
             }
         }
    }

须要注意的是该写法的running是默认为true,因此若是不想当即启动动画,则须要初始化为false.

NumberAnimation和ColorAnimation
它们都是继承于PropertyAnimation组件,而后重写了from和to属性,使用方法其实和PropertyAnimation同样.
示例以下所示:

　　MouseArea {
        id: area
        anchors.fill: parent
        onPressed: {
            colorAnimation.to = Qt.rgba(Math.random(),Math.random(),Math.random(),1) // 从新赋一个颜色
            numberAnimation.restart()
        }
    }

    Rectangle {
        id: rect
        anchors.centerIn: parent
        color: "#00FF00"
        width: 20
        height: 20

        NumberAnimation on width{
            id: numberAnimation
            duration: 300
            to: rect.width*1.3
            running: false
        }
        ColorAnimation on color{
            id: colorAnimation
            duration: 300
            to: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            running: numberAnimation.running
        }
    }

当咱们点击一次,Rectangle的宽度将会变宽一次,而且颜色也会跟着改变.