代码改变世界

QML中的动画处理

2012-10-18 13:04  ubunoon  阅读(4176)  评论(0编辑  收藏  举报

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