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 {
: parent
onPressed: = "PRESSED"
onReleased: = "RELEASED"
}
states: [
State {
name: "PRESSED"
PropertyChanges { target: button; color: "lightblue"}
},
State {
name: "RELEASED"
PropertyChanges { target: button; color: "lightsteelblue"}
}
]
transitions: [
Transition {
from: "PRESSED"
QML中的动画处理 来自淘豆网www.taodocs.com转载请标明出处.