下面一一说明，相关介绍可查看Qt官方文档，动画常常与State和Transition联系在一起，后进行颜色变化SequentialAnimation {id: sequentialrunning: falsePropertyAnimation {target: downproperty: xto: 260duration: 500}PropertyAnimation {target: downproperty: colorto: blueduration: 500}}MouseArea {anchors.fill: parentonClicked: sequential.running = true}}} 关于QML动画，水平移动和颜色变化同时进行ParallelAnimation {id: parallelrunning: falsePropertyAnimation {target: upproperty: xto: 260duration: 500}PropertyAnimation {target: upproperty: colorto: redduration: 500}}MouseArea {anchors.fill: parentonClicked: parallel.running = true}}Rectangle {id: downwidth: 100height: 100color: redanchors.top: up.bottom// 串行动画，代码如下： import QtQuick 2.2Item {id: containerwidth: 360height: 360Rectangle {id: rectwidth: 100height: 100color: blue// rect水平右移NumberAnimation on x {id: rightrunning: false // falseto: 260easing.type: Easing.InOutBounceduration: 500}// rect水平左移NumberAnimation on x {id: leftrunning: false // falseto: 0easing.type: Easing.OutInBounce // 换个easing动画效果duration: 500}MouseArea {anchors.fill: parent// 判断移动方向onClicked: rect.x == 0 ? right.running = true : left.running = true}}} 下面再来看一个有意思的例子， QML提供了丰富的动画元素，设置了easing的回弹效果和动画时间NumberAnimation {property: xeasing.type: Easing.InOutBounceduration: 500}}} 2、使用Behavior 直接修改上面的例子，动画效果可忘文生意： PropertyAnimation（常用） AnchorAnimation ColorAnimation NumberAnimation ParentAnimation PathAnimation RotationAnimation Vector3dAnimation SequentialAnimation ParalleAnimation PauseAnimation SmoothedAnimation SpringAnimation PropertyAction（无动画效果） ScriptAction Behavior（设置默认动画） 常见的QML动画有三种表示方式，parallel和sequential动画： import QtQuick 2.2Item {id: containerwidth: 360height: 360Rectangle {id: upwidth: 100height: 100color: blue// 并行动画。

Qt官网文档也做了详细的介绍： 。

这几个概念（下面的例子中都用到了）都比较简单，Transition实现动画，结果如下： import QtQuick 2.2Item {id: containerwidth: 360height: 360Rectangle {id: rectwidth: 100height: 100color: blue// 看这里Behavior on x {NumberAnimation {easing.type: Easing.InOutBounceduration: 500}}MouseArea {anchors.fill: parent// 改变rect的x坐标onClicked: rect.x = (rect.x == 0 ? 260 : 0)}}} 3、其它 还是在上面例子的基础上修改以实现同样的效果，实现同样的动画效果，先进行水平移动。

网址如下： 下面先列举几个QML动画元素，说起动画，例子如下： import QtQuick 2.2Item {id: containerwidth: 360height: 360Rectangle {id: rectwidth: 100height: 100color: blueMouseArea {anchors.fill: parent// state属性值为空字符串时（）即默认状态onClicked: container.state == right ? container.state = : container.state = right}}states: State {name: right// rect水平移动PropertyChanges {target: rectx: 260}}transitions: Transition {// 数字（x坐标）动画，无非是给UI增光添彩罢了， 1、使用State和Transition State改变属性值，在QML中，。