QML之Animation

　　越来越喜欢QML了，太神奇了，所以决定好好的学习下。
　　1、 Animation       import Qt 4.7 Rectangle { width: 100;height: 100 color: "red" PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite } PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite } }       此段代码是将矩形的顶点(X，Y)坐标由(0,0)在一秒内逐渐移动到坐标(50,50),loops: Animation.Infinite指变化是无限循环的  
　　//==============================================
　　Behavior Animation:
　　Item{ width: 100; height: 100 Rectangle{ id: rect width: 100; height: 100 color: "red" Behavior on x { PropertyAnimation {duration: 500 } } Behavior on y { PropertyAnimation {duration: 500 } } } MouseArea { anchors.fill: parent onClicked: { rect.x = mouse.x; rect.y = mouse.y } } } //Item是 最常使用的QML类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget,,通常一个动画用到部分属性的变化, 官网如此解释：Any changes to these properties will trigger their animations. If x or y were bound to other properties, and those properties changed, the animation would be triggered。此段代码，在Rectangle的属性x,y定义了分别定义了行为,即当X，Y变化时，经过500ms达到目标坐标
　　//==============================================
　　Animation in a Signal Handler Rectangle { id: rect width: 100;height: 100 color: "red" MouseArea{ anchors.fill: parent onClicked: PropertyAnimation { target: rect; properties: "x,y"; to : 50; duration: 1000} //onClicked: PropertyAnimation { target: rect; properties: "x,y"; to : 50,30; duration: 1000} } } 当我试着使用注释代码的时候，使用的x，y属性值总是使用的后面的30，不知为何，而且不能绑定rect多次，即不能分别绑定x和y
　　//==============================================
　　单独使用Animations
　　Animations能作为QML对象被创建,之后可以显示的调用使用running属性或start(),stop()方法  Rectangle { id: rect width: 100;height: 100 color: "red" PropertyAnimation { id: animation target: rect properties: "x,y" duration: 1000; } MouseArea{ anchors.fill: parent onClicked: { animation.to = 50; //animation.running = true; animation.start(); } } } 
　　//============================================ Transitions 顾名思义即转变，过度 Rectangle { id: rect width: 100;height: 100 color: "red" MouseArea{ anchors.fill: parent onClicked: rect.state = "moved" } states: State { name: "moved" PropertyChanges { target: rect; x: 50; y: 50 } } transitions: Transition { PropertyAnimation { properties: "x,y"; duration: 1000 } } }
　　When the Rectangle  changes to the moved  state, its x  and y  property values are changed by the PropertyChanges  object, and thePropertyAnimation  defined within the Transition  is triggered on these properties. The animation will not be applied at any time other than during the state change. //================================================ Property Animation Elements
　　Property Animation 是最基础的对于属性Animation，它能被用于 real, int, color, rect, point, size, and vector3d属性。NumberAnimation, ColorAnimation, RotationAnimation and Vector3dAnimation: NumberAnimation都继承自它。 ColorAnimation and RotationAnimation提供了一些特殊的属性用于颜色和组件旋转。 Rectangle { width: 100; height: 100 ColorAnimation on color { from: "red"; to: "blue"; duration: 2000 } }  Item { width: 300; height: 300 Rectangle { width: 100; height: 100; anchors.centerIn: parent color: "red" RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise} } } //RotationAnimation.Clockwise 表示顺时针旋转90度，RotationAnimation.Counterclockwise 表示逆时针旋转，但此时旋转的角度是270度。 除这些之外还有SmoothedAnimation,SpringAnimation,ParentAnimation, AnchorAnimation等
　　//========================================
　　Easing:
　　我这里就称之为缓和吧，任何基于PropertyAnimation的动画都能指定缓和属性去控制动画程缓和曲线 Rectangle { width: 100;height: 100 color: "red" PropertyAnimation on x { to: 50; duration: 1000; easing.type: Easing.OutBounce } PropertyAnimation on y { to: 50; duration: 1000; easing.type: Easing.OutBounce } } 官方一个例子很好的体现了缓和动画效果： import Qt 4.7 Rectangle { id: window width: 600; height: 460; color: "#232323" ListModel { id: easingTypes ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" } ListElement { name: "Easing.InQuad"; type: Easing.InQuad; ballColor: "IndianRed" } ListElement { name: "Easing.OutQuad"; type: Easing.OutQuad; ballColor: "Salmon" } ListElement { name: "Easing.InOutQuad"; type: Easing.InOutQuad; ballColor: "Tomato" } ListElement { name: "Easing.OutInQuad"; type: Easing.OutInQuad; ballColor: "DarkOrange" } ListElement { name: "Easing.InCubic"; type: Easing.InCubic; ballColor: "Gold" } ListElement { name: "Easing.OutCubic"; type: Easing.OutCubic; ballColor: "Yellow" } ListElement { name: "Easing.InOutCubic"; type: Easing.InOutCubic; ballColor: "PeachPuff" } ListElement { name: "Easing.OutInCubic"; type: Easing.OutInCubic; ballColor: "Thistle" } ListElement { name: "Easing.InQuart"; type: Easing.InQuart; ballColor: "Orchid" } ListElement { name: "Easing.OutQuart"; type: Easing.OutQuart; ballColor: "Purple" } ListElement { name: "Easing.InOutQuart"; type: Easing.InOutQuart; ballColor: "SlateBlue" } ListElement { name: "Easing.OutInQuart"; type: Easing.OutInQuart; ballColor: "Chartreuse" } ListElement { name: "Easing.InQuint"; type: Easing.InQuint; ballColor: "LimeGreen" } ListElement { name: "Easing.OutQuint"; type: Easing.OutQuint; ballColor: "SeaGreen" } ListElement { name: "Easing.InOutQuint"; type: Easing.InOutQuint; ballColor: "DarkGreen" } ListElement { name: "Easing.OutInQuint"; type: Easing.OutInQuint; ballColor: "Olive" } ListElement { name: "Easing.InSine"; type: Easing.InSine; ballColor: "DarkSeaGreen" } ListElement { name: "Easing.OutSine"; type: Easing.OutSine; ballColor: "Teal" } ListElement { name: "Easing.InOutSine"; type: Easing.InOutSine; ballColor: "Turquoise" } ListElement { name: "Easing.OutInSine"; type: Easing.OutInSine; ballColor: "SteelBlue" } ListElement { name: "Easing.InExpo"; type: Easing.InExpo; ballColor: "SkyBlue" } ListElement { name: "Easing.OutExpo"; type: Easing.OutExpo; ballColor: "RoyalBlue" } ListElement { name: "Easing.InOutExpo"; type: Easing.InOutExpo; ballColor: "MediumBlue" } ListElement { name: "Easing.OutInExpo"; type: Easing.OutInExpo; ballColor: "MidnightBlue" } ListElement { name: "Easing.InCirc"; type: Easing.InCirc; ballColor: "CornSilk" } ListElement { name: "Easing.OutCirc"; type: Easing.OutCirc; ballColor: "Bisque" } ListElement { name: "Easing.InOutCirc"; type: Easing.InOutCirc; ballColor: "RosyBrown" } ListElement { name: "Easing.OutInCirc"; type: Easing.OutInCirc; ballColor: "SandyBrown" } ListElement { name: "Easing.InElastic"; type: Easing.InElastic; ballColor: "DarkGoldenRod" } ListElement { name: "Easing.OutElastic"; type: Easing.OutElastic; ballColor: "Chocolate" } ListElement { name: "Easing.InOutElastic"; type: Easing.InOutElastic; ballColor: "SaddleBrown" } ListElement { name: "Easing.OutInElastic"; type: Easing.OutInElastic; ballColor: "Brown" } ListElement { name: "Easing.InBack"; type: Easing.InBack; ballColor: "Maroon" } ListElement { name: "Easing.OutBack"; type: Easing.OutBack; ballColor: "LavenderBlush" } ListElement { name: "Easing.InOutBack"; type: Easing.InOutBack; ballColor: "MistyRose" } ListElement { name: "Easing.OutInBack"; type: Easing.OutInBack; ballColor: "Gainsboro" } ListElement { name: "Easing.OutBounce"; type: Easing.OutBounce; ballColor: "Silver" } ListElement { name: "Easing.InBounce"; type: Easing.InBounce; ballColor: "DimGray" } ListElement { name: "Easing.InOutBounce"; type: Easing.InOutBounce; ballColor: "SlateGray" } ListElement { name: "Easing.OutInBounce"; type: Easing.OutInBounce; ballColor: "DarkSlateGray" } } Component { id: delegate Item { height: 42; width: window.width Text { text: name; anchors.centerIn: parent; color: "White" } Rectangle { id: slot1; color: "#121212"; x: 30; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8 anchors.verticalCenter: parent.verticalCenter } Rectangle { id: slot2; color: "#121212"; x: window.width - 62; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8 anchors.verticalCenter: parent.verticalCenter } Rectangle { id: rect; x: 30; color: "#454545" border.color: "White"; border.width: 2 height: 32; width: 32; radius: 8 anchors.verticalCenter: parent.verticalCenter MouseArea { onClicked: if (rect.state == '') rect.state = "right"; else rect.state = '' anchors.fill: parent } states : State { name: "right" PropertyChanges { target: rect; x: window.width - 62; color: ballColor } } transitions: Transition { NumberAnimation { properties: "x"; easing.type: type; duration: 1000 } ColorAnimation { properties: "color"; easing.type: type; duration: 1000 } } } } } Flickable { anchors.fill: parent; contentHeight: layout.height Column { id: layout anchors.left: parent.left; anchors.right: parent.right Repeater { model: easingTypes; delegate: delegate } } } }  //=========================================
　　Grouping Animations:
　　可以使用ParallelAnimation或者SequentialAnimation将多个动画合并到动画组。
　　ParallelAnimation里的动画将同时执行
　　SequentialAnimation里的动画将顺序执行。 Rectangle { id: rect width: 120; height: 200 Image { id: img source: "images/qt.png" anchors.horizontalCenter: parent.horizontalCenter y:0 } SequentialAnimation on y{ loops: Animation.Infinite NumberAnimation { to:rect.height - img.height;easing.type: Easing.OutBounce; duration: 2000 } PauseAnimation { duration: 1000 } NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000} } } 从以上代码可以看到三个动画顺序执行，从上到下停顿一秒后又上,如此循环
　　动画组也能够嵌套使用: Rectangle { id: redRect width: 100; height: 100 color: "red" MouseArea { id: mouseArea; anchors.fill: parent } states: State { name: "pressed"; when: mouseArea.pressed PropertyChanges { target: redRect; color: "blue"; y: mouseArea.mouseY; width: mouseArea.mouseX } } transitions: Transition { SequentialAnimation { ColorAnimation { duration: 200 } PauseAnimation { duration: 100 } ParallelAnimation { NumberAnimation { duration: 500 easing.type: Easing.OutBounce targets: redRect properties: "y" } NumberAnimation { duration: 800 easing.type: Easing.InOutQuad targets: redRect properties: "width" } } } } }  下个qt-mobility,下了三个小时居然还没下完，杯具的网速。
　　好了，睡觉了，明天还要上班。突然觉得这些动画比Flex的还简单些