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
                  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
              20
             height: 20
             color: "#0000FF"
         }
        Rectangle {
             id: rect2
              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
              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"
         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的宽度将会变宽一次,并且颜色也会跟着改变.