QML中Animation元素介绍

Animation元素是所有QML动画的基类元素，它只是提供一组属性和方法，以便其他动画元素可以从它继承。不能在QML文件中直接使用它，直接使用它将导致错误。

属性

1.       alwayseRunToEnd: bool

这个属性用来表明当动画被停止时，是否应该跑完本轮动画。如果为真则当被停止时仍会跑完本轮动画（这里可以通过设置running属性为假，或是调用stop()方法来停止动画）。这个属性在需要重复动画时用的特别多。默认情况下，alwayseRunToEnd的值为假。

2.       loops: int

顾名思义，这个属性是用来设置动画循环次数的。默认情况下，loops的值为1，即动画只循环一次。如果被设置成Animation.infinite则动画会一直持续循环下去直到被停止（这里可以通过设置running属性为假，或是调用stop()方法来停止动画）。下面的例子中，矩形将会不停的旋转。

Rectangle {

     width: 100; height: 100; color: "green"

     RotationAnimation on rotation {

         loops: Animation.Infinite

         from: 0

         to: 360

     }

 }

 

3.       paused: bool

这个属性说明当前动画是否被暂停。可以通过设置这个属性来暂停动画，也可以使用JavaScript的paused()和resume（）来暂停和恢复动画。默认情况下，动画是不暂停的。

4.       running: bool

这个属性说明当前动画是否正在跑，可以通过设置这个属性来控制动画是否跑。下面的例子中，当MouseArea被按下时会触发矩形的动画。

Rectangle {

     width: 100; height: 100

     NumberAnimation on x {

         running: myMouse.pressed

         from: 0; to: 100

     }

     MouseArea { id: myMouse }

 }

可以读取这个属性的值来查询当前动画是否正在跑。如下例所示：

NumberAnimation { id: myAnimation }

 Text { text: myAnimation.running ? "Animation is running" : "Animation is not running" }

可以通过JavaScript的start()和stop()方法来开始和停止动画。默认情况下，动画是没有在跑的。然而当动画被设置成属性时，由于属性值使用on语法，默认时被设置为running。

方法

1.       complete

用来停止动画并跳到动画的最后一帧。如果动画没有跑，则调用这个方法没有效果，否则running的属性会置为假。与stop()不同的是，complete()马上跳到动画最后一帧。

Rectangle {

     NumberAnimation on x { from: 0; to: 100; duration: 500 }

 }

在上面例子中，在250毫秒时调用stop()时，x的值为50，然而这个时候调用complete()，x的值会被设置为100。

2.       pause

暂停动画。如果动画已经暂停，则调用这个方法没有效果，否则调用会导致paused属性置为真。

3.       restart

重新开始动画，跟调用stop()后接着调用start()效果一样。

4.       resume

恢复暂停的动画，如果动画没有被暂停则调用这个方法没有效果，否则调用之后paused属性被置为假。

5.       start

开始动画，如果动画已经开始，则调用这个方法没有效果，否则调用之后running属性置为真。

6.       stop

停止动画。如果动画没有在跑，则调用这个方法没有效果，否则调用之后running属性置为假。一般来讲，stop()方法会马上停止动画并且动画对属性的值没有影响。

Rectangle {

     NumberAnimation on x { from: 0; to: 100; duration: 500 }

 }

在上例中，如果动画在250毫秒时停止，则x属性的值为50。然而如果alwaysRunToEnd的值为真，则动画会继续跑完，这时running属性的值才会变为假。