qml之动态元素类型

动画

• QMlL使用插值的方式控制属性的更改。
• 动画是在指定的时间内一些列属性的持续变化。
  常用的动画类型元素动画：
• PropertyAnimation:属性值改变播放动画
• NumberAnimation:qreal_type值改变播放动画
• ColorAnimation:颜色值改变播放动画
• RotationAnimation:旋转值改变播放的动画
  Qt Quick还提供了一些特殊场景下需要使用的动画类型：
  PauseAnimation，SequentialAnimation，ParallelAnimation，AnchorAnimation，ParentAnimation，SmoothedAnimation ，SpringAnimation，PathAnimation，Vector3dAnimation
  对于更加复杂的动画，可能需要在播放动画时改变属性或者运行脚本。为此，QtQuick提供了action元素:
• PropertyAction:在播放动画时改变属性
• ScripAction:在播放动画时运行脚本

例子

import QtQuick
import QtQuick.WindowImage {id: rootsource: "../../images/background.png"property int padding: 40property bool running: falseImage {id: qqsource: "../../images/qq.png"x:root.padding;y:(root.height-height)/2NumberAnimation on x{to:root.width-qq.width-root.paddingduration: 3000running: root.running}RotationAnimator on rotation{to:360duration: 3000running: root.running}OpacityAnimator on opacity{to:0duration: 3000running: root.running}}MouseArea{anchors.fill: rootonClicked: root.running = true}
}

• 应用于x和rotation、透明度属性的简单动画。
• 每个动画的持续时间为3000毫秒。
• x：将对象逐渐移动到右边的位置。
• rotation：从当前角度运行到360度。
• 透明度:从1到0
• 三个动画并行运行，并在单击鼠标区域时启动。

应用动画

可以通过多种方式执行动画：

• 属性上的动画：在元素完全加载后自动运行
• 属性上的行为：属性值更改时自动运行
• 独立动画：使用start()显式启动动画或将running设置为true时运行

例子

import QtQuick
import QtQuick.WindowWindow {id:rootwidth: 640height: 480visible: truetitle: qsTr("Hello World")color:"gray"ClickableImageV2{id:qq1x:40;y:root.height-heightsource:"../../images/qq.png"text:"animation on property"NumberAnimation on y{to:40;duration:3000}}ClickableImageV2{id:qq2x:40+qq1.width+20;y:root.height-heightsource:"../../images/qq.png"text:"animation on property"Behavior on y{NumberAnimation{duration:3000}}onClicked: y=40}ClickableImageV2{id:qq3x:40+qq1.width+qq2.x;y:root.height-heightsource:"../../images/qq.png"text:"animation on property"NumberAnimation{id:animtarget:qq3from:root.height-qq3.heightto:40;duration:3000property:"y"running:area.pressed}MouseArea{id:areaanchors.fill: parent}}
}

 第一个对象使用on＜property＞策略进行移动。动画立即开始。
 第二个对象使用Behavior on动画。此行为告诉属性它应该为值的每个更改设置动画。可以通过在行为元素上设置enabled:false来禁用该行为。
 第三个对象使用standalone动画。动画被定义为其自己的元素，几乎可以位于文档中的任何位置。

缓动曲线

属性的值更改可以由动画控制。缓动属性允许影响属性更改的插值曲线。
y轴：property
x轴：duration

例子

import QtQuick
import QtQuick.Window
import QtQuick.LayoutsRectangle{id:rootwidth: childrenRect.widthheight: childrenRect.heightcolor:'gray'gradient: Gradient{GradientStop{position:0.0;color:root.color}GradientStop{position:1.0;color:Qt.lighter(root.color,1.5)}}ColumnLayout{spacing: 20Grid{spacing: 10columns:5EasingType{title:'Linear'easingType: Easing.LinearonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InExpo'easingType: Easing.InExpoonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'OutExpo'easingType: Easing.OutExpoonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutExpo'easingType: Easing.InOutExpoonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutCubic'easingType: Easing.InOutCubiconClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'SineCurve'easingType: Easing.SineCurveonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutCirc'easingType: Easing.InOutCirconClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutElastic'easingType: Easing.InOutElasticonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutBack'easingType: Easing.InOutBackonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}EasingType{title:'InOutBounce'easingType: Easing.InOutBounceonClicked: {animation.easing.type=easingTypebox.toggle=!box.toggle}}}Rectangle{height:100Layout.fillWidth: truegradient: Gradient{GradientStop{position:0.0;color:'gray'}GradientStop{position:1.0;color:'green'}}Rectangle{id:boxproperty  bool toggleanchors.verticalCenter: parent.verticalCenterwidth: 80;height:80gradient: Gradient{GradientStop{position:0.0;color:'red'}GradientStop{position:1.0;color:'yellow'}}x:toggle?20:root.width-width-20Behavior on x{NumberAnimation{id:animationduration:1000}}}}}}

点击不同的曲线会有不同的动画效果。

动画分组

 分组有两种方式：并行或顺序。
可以使用SequentialAnimation或ParallelAnimation元素，它们充当其他动画元素的动画容器。这些分组动画本身就是动画。

例子

import QtQuick
import QtQuick.WindowWindow {id:rootwidth: 640height: 480visible: truetitle: qsTr("UFO")property int duration: 3000Image {source: "../../images/background.png"anchors.fill: parent}ClickableImageV3{id:ufox:20;y:root.height-heightsource: "../../images/ufo.png"text:'UFO'onClicked: anim.restart()}ParallelAnimation/*SequentialAnimation*/{id:animNumberAnimation{target: ufoproperty: 'y'from:root.height-ufo.heightto:20duration: root.duration}NumberAnimation{target: ufoproperty: 'x'from:20to:500duration: root.duration}}
}

嵌套动画

 分组动画也可以嵌套。例如，一个连续动画可以有两个并行动画作为子动画。我们可以通过一个足球示例：

• 从左到右的x平移（X1）
• 从下到上的y平移（Y1），然后是从上到下的平移（Y2），带有一些弹跳
• 在动画的整个持续时间内旋转360度（ROT1）
  
   即我们可以将y的改变分成一次顺序动画，角度和x的变化与这次顺序动画为一个并行动画即可实现效果。

代码

import QtQuick
import QtQuick.WindowItem {id:rootwidth: 480height: 300property int duration: 3000Rectangle{id:skywidth: root.widthheight: 200gradient: Gradient{GradientStop{position:0.0;color:"#0080FF"}GradientStop{position:1.0;color:"#66CCFF"}}}Rectangle{id:groundanchors.top: sky.bottomanchors.bottom:root.bottomwidth: root.widthgradient: Gradient{GradientStop{position:0.0;color:"#00FF00"}GradientStop{position:1.0;color:"#00803F"}}}Image {id: ballsource: "../../images/soccer_ball.png"scale:0.5x:0;y:root.height-heightMouseArea{anchors.fill: parentonClicked: {ball.x=0ball.y=root.height-ball.heightball.rotation=0anim.restart()}}}ParallelAnimation{id:animSequentialAnimation{NumberAnimation{properties: "y"target: ballto:20duration: root.duration*0.4easing.type:Easing.OutCirc}NumberAnimation{properties: "y"target: ballto:root.height-ball.heightduration: root.duration*0.6easing.type:Easing.OutBounce}}NumberAnimation{properties: "x"target: ballto:380duration: root.duration}RotationAnimation{properties: "rotation"target: ballto:720duration: root.duration}}
}

状态和转换

• 状态定义了一组属性的更改，可以由特定条件触发。
• 状态开关可以附加一个转换，该转换定义了这些更改对应的动画，或执行附加的行为。
• 进入状态时也可以执行行为。
  例如，两个信号灯。stop用红色，go用绿色。两个灯光不应同时发光。

state: "stop" states: [ State { name: "stop" PropertyChanges { target: light1; color: root.red }PropertyChanges { target: light2; color: root.black } }, State { name: "go" PropertyChanges { target: light1; color: root.black } PropertyChanges { target: light2; color: root.green } } 
] MouseArea { anchors.fill: parent onClicked: parent.state = (parent.state == "stop" ? "go" : "stop") 
} 

 现在能够成功地改变信号灯的状态。为了使UI更具吸引力，应该添加一些带有动画效果的过渡。状态改变可以触发转换。

transitions: [ Transition { from: "stop"; to: "go" // from: "*"; to: "*" ColorAnimation { target: light1; properties: "color"; duration: 2000 } ColorAnimation { target: light2; properties: "color"; duration: 2000 } } 
] 

rom: “"; to: "” 表示“从任何状态到任何其他状态”，是默认值。

代码

import QtQuick
import QtQuick.WindowItem {id: rootwidth: 150;height:260property color black: 'black'property color red: 'red'property color green: 'green'Rectangle{anchors.fill: parentcolor:"#333333"}state: "stop"states: [State {name: "stop"PropertyChanges {target: light1;color:root.red;}PropertyChanges {target: light2;color:root.black;}},State {name: "go"PropertyChanges {target: light1;color:root.black;}PropertyChanges {target: light2;color:root.green;}}]transitions: [Transition {from: "*";to: "*"ColorAnimation {target:light1;duration: 1000;properties: 'color'}ColorAnimation {target:light2;duration: 1000;properties: 'color'}}]Rectangle{id:light1x:25;y:15width:100;height: widthradius: width/2color:root.blackborder.color: Qt.lighter(color,1.1)}Rectangle{id:light2x:25;y:135width:100;height: widthradius: width/2color:root.blackborder.color: Qt.lighter(color,1.1)}MouseArea{anchors.fill: rootonClicked: {parent.state = ((parent.state == "stop")?"go":"stop")}}
}

完整代码链接