【QML】QML中的动画总结

随着目前的软件发展趋势，灵动炫酷的UI动画效果，将为产品增加一大卖点。在QML中，提供了很多用于设计炫酷动画的基本类型，如下图所示：

本文将总结QML中的动画类型，以及一些类型的基本使用方法。

一、Animation基本动画类型

首先，肯定是Animation类型，该类型是所有动画类型的基本类型，注意：我们是不能在qml文档中直接使用该类型，该类型是一个基本类型，为不同的动画方式提供公用的属性和方法（可以理解成在C++中的抽象基类））。

Animation类型提供了四个属性：

（1）alwaysRunToEnd：该属性接收布尔类型的参数。该属性保存动画是否运行到完成才停止。当loops属性被设置时，这个属性是最有用的，因为动画将正常播放结束，但不会重新启动。

（2）loops：该属性接收int类型的参数。该属性保存播放动画的次数。默认是1，如果该属性设置为Animation.Infinite时，动画将不断重复，直到显式停止（将running属性设置为false，或者调用stop()方法）。

（3）paused：该属性接布尔类型的参数。该属性标识动画是否暂停。设置paused属性可以控制动画是否暂停。在JavaScript中使用pause()和resume()方法也可以强制暂停和恢复动画。

（4）running：该属性接收布尔类型的参数。该属性标识动画当前是否正在运行。

Animation类型提供三个信号：

（1）finished()：该信号在动画自然完成时发出。注意：当run被设置为false时，不会触发该信号；loops属性被设置为Animation.Infinite的动画也不会触发该信号。

（2）started()：这个信号在动画开始时发出。只有顶级、独立的动画才会触发该信号。过渡中的动画或动画组中的动画不会触发该信号。

（3）stopped()：当动画结束时发出该信号。动画可能已手动停止，或者可能已运行完成。

Animation类型提供六种方法：

（1）complete()：停止动画，跳转到最终属性值。如果动画没有运行，调用此方法将没有效果。在调用complete()之后，running属性将被设置为false。与stop()不同，complete()会立即将动画快进到结束位置。例如下列代码：

Rectangle {
   
    NumberAnimation on x {
    from: 0; to: 100; duration: 500 }
}
1
2
3
4
5

上面代码中，使用NumberAnimation类型动画Rectangle的x属性值，动画范围值为：0~100。当我们在250ms时调用stop()函数，x属性值将是50；如果调用complete()，x属性值将为100。

（2）pause()：该方法将暂停动画。如果动画已经暂停或者处于未运行状态，调用该方法将没有效果。在调用pause()之后，pause属性将被设置为true。

（3）restart()：该方法将重新开始动画。该方法理解成是stop和start的组合：先调用stop()停止动画，然后再调用start()开始动画。

（4）resume()：恢复暂停的动画。如果动画没有被暂停或没有运行，调用此方法将没有效果。在调用resume()之后，pause属性将被设置为false。

（5）start()：该方法将开始动画。如果动画已经运行了，调用该方法将没有效果。在调用start()之后，running属性将被设置为true。

（6）stop()：停止动画。如果动画没有运行，调用该方法将不起作用。在调用stop()之后，running和paused属性都将被设置为false。通常情况下，stop()会立即停止动画，并且动画不会对属性值产生进一步的影响。在以下代码中：

Rectangle {
   
    NumberAnimation on x {
    from: 0; to: 100; duration: 500 }
}
1
2
3
4
5

假如我们在250ms时停止动画，x属性的值将为50。但如果我们设置了alwaysRunToEnd属性，running属性会立即变为false，但是动画将继续运行，直到动画到完成位置才停止。

二、QML中的动画类型

（2-1）动画和转场类型

在QML用于描述动画和转场的类型如下表所示：

（2-2）基于数值的属性动画类型

QML中基于数值的动画类型如下表所示：