QML中的动画处理

QML是一个写界面非常不错的工具，只要你有合适的UI界面，就可以非常快速的编写完UI界面

 

QML也内置了许多动画效果，动画效果一般都是在属性值上的变化，这些变化的方式，就构成了不同的动画效果。从一个点到另一个点的，走法有n多种，采用哪种方法走法，会比较好看，QML内置了一些数学上的走路方式，用Easing来描述，不知道中文没关系，记住对应图关系即可，大部分以In，Out，InOut，OutIn为前缀，即有Quad，Cubic，Quart，Quint，Sine，Expo，Circ，Elastic，Back，Bounce。点击此处查看详细。

 

当元素有一些属性需要修改时，QML定义了一些默认的属性类型动画处理

PropertyAnimation

NumberAnimation

Vector3dAnimation

ColorAnimation

RotationAnimation

ParentAnimation

AnchorAnimation

对于指定的属性，使用指定的属性Animation，效率会更好一些。

 

属性的变化，在做成动画时一般和状态变化关联在一起，而状态变化的时候，属性变化状态，又可以通过tranistions这个特殊的属性，进行更加复杂的动画处理效果。如下面的例子，在pressed的时候，修改状态为PRESSED，在released的时候，修改RELEASED，states属性将依据修改的状态变化进行属性值修改，而transition则监控状态的切换时属性值是否修改，如果修改则应用该属性值的Animation，从而形成动画。

（ ColorAnimation用在Transition中时，将监控target的color属性，当属性变化时，会应用该ColorAnimation。）

 Rectangle {
     width: 75; height: 75
     id: button
     state: "RELEASED"

     MouseArea {
         anchors.fill: parent
         onPressed: button.state = "PRESSED"
         onReleased: button.state = "RELEASED"
     }

     states: [
         State {
             name: "PRESSED"
             PropertyChanges { target: button; color: "lightblue"}
         },
         State {
             name: "RELEASED"
             PropertyChanges { target: button; color: "lightsteelblue"}
         }
     ]

     transitions: [
         Transition {
             from: "PRESSED"
             to: "RELEASED"
             ColorAnimation { target: button; duration: 100}
         },
         Transition {
             from: "RELEASED"
             to: "PRESSED"
             ColorAnimation { target: button; duration: 100}
         }
     ]
 }

 

有时候，可以通过Behavior这个属性元素，对某个属性进行监控，如

Behavior on x，则表示监控x的属性值是否有变化，有变化并且enabled为true时，就应用Behavior元素中的设置。

 

当我们有多个元素都需要处理成动画效果的时候，那么我们要区分，是同时变化还是按照顺序来变化。

 

 

所有的Animation元素都是从Animation中继承下来，有start,stop,resume,pause,restart,complete等方法。

 

除了常规的属性元素，还有以下的元素

 

PauseAnimation

ScriptAction

PropertyAction

 

SmoothedAnimation

SpringAnimation

ParentAnimation

AnchorAnimation