QT QML动画中有比较多的概念，初看有点头大，我们先从三个基本概念说起：

1. 状态（state）：可视化组件的一组参数，决定可视化组件的显示方式
   每种状态的不同参数，有变化（change）来表示;
   状态是理解为一个QML对象，它是可以被继承的，形成一个新的状态；
   可以在QML指定，直接不同的状态；

2. 转换（transition): 定义从一个状态到另一个状态的变化过程，在这个过程中，可以施加动画，如果不施加动画，效果和直接指定状态的效果是一致的；

3. 动画（Animation）：QML可视化组件显示效果改变的平滑过程
   动画的运行方式：
   A：直接使用动画，动画 定义了可视化组件的某个显示参数的开始值，结束值，或仅有结束值，直接调用即可
   B: 通过转换使用动画
   C: 通过行为使用动画，将行为（behavior）定义在可视化组件的某个显示参数上（如位置X值），在行为中定义动画，只要这个参数改变，即发生动画；

4. 画家（Animator）：是另一种形式的动画，它是定义在QML的场景图中，具有更高的可靠性；

其他还有比较细节的概念，可参见课程《QT QML零基础动画教程》；有16节视频课，还有课程脑图笔记。

先来看一个例子：

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow{visible: truewidth: 640height: 480title: qsTr("A11 数值型动画")Rectangle{id: rectwidth: 100height: 100color: "red"state: "normal"// mode1，直接使用，注意如果running=true（缺省状态），直接执行，这里不需要有target参数//写法1NumberAnimation on x {id: cmode1running: falsefrom:200to: 540duration: 1000}// 写法2
//        PropertyAnimation on x {
//            id:cmode1
//            running: false
//            to: 540
//            duration: 1000
//        }// 写法3
//        PropertyAnimation {
//            id:cmode1
//            target: rect
//            running: false
//            properties: "x"
//            to: 540
//            duration: 1000
//        }// mode2,通过转换设置动画states:[State {name: "normal"PropertyChanges {target: rectx: 0}},State {name: "right"PropertyChanges {target: rectx: 540}}]transitions: Transition {to: "right"NumberAnimation {target: rectproperties: "x"duration: 1000}}// mode3, 通过Behavior使用Behavior on x {NumberAnimation {duration: 1000}}}Button{id: mode0text: "原始状态"x: 10; y: 150onClicked: {// 注意0的作用，在非转换动画中，代码不能识别可视化组件的状态rect.x = 0rect.state = "normal"}}Button{id: mode1y: 150anchors.left: mode0.rightanchors.leftMargin: 10text: "直接使用动画"onClicked: cmode1.start()}Button{id:mode2y:150text: "转换中的动画"anchors.left: mode1.rightanchors.leftMargin: 10onClicked: rect.state = "right"}Button{id:mode3y:150text: "行为动画"anchors.left: mode2.rightanchors.leftMargin: 10onClicked: rect.x = 540}
}

在直接使用动画中：

        //写法1NumberAnimation on x {id: cmode1running: falsefrom:200to: 540duration: 1000}// 写法2
//        PropertyAnimation on x {
//            id:cmode1
//            running: false
//            to: 540
//            duration: 1000
//        }// 写法3
//        PropertyAnimation {
//            id:cmode1
//            target: rect
//            running: false
//            properties: "x"
//            to: 540
//            duration: 1000
//        }

有三种不同的写法，前两种是动画直接定义在可视化显示属性上，注意，PropertyAnimation是NumberAnimation的父类，第三种写法，是在动画内部定义了可视化组件的属性。

需要说明的是，多个可视化组件的参数同时变化时，需要采用状态和转换的概念

看一下，状态的定义

        transitions: [Transition {from: "normal"to: "lightblue"PropertyAnimation{properties: "color,width,height"duration: 2000easing.type: Easing.InOutQuad}}]

整个代码

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("A08 属性动画，在例子A02的基础上修改")Rectangle{id:rectx:10;y:10width: 100height: 100state: "normal"states: [State {name: "normal"PropertyChanges {target: rectcolor:"red"}},State {name: "lightblue"// 方式一，采用数组//                changes: [//                    PropertyChanges {//                        target:rect//                        color:"lightblue"//                    },//                    PropertyChanges {//                        target: rect//                        width:200//                        height:50//                    }//                ]// 方式二，直接定义在Changes中PropertyChanges {target: rectcolor:"lightblue"width:200height:50}}]transitions: [Transition {from: "normal"to: "lightblue"PropertyAnimation{properties: "color,width,height"duration: 2000easing.type: Easing.InOutQuad}}]}Button{id: b_changeStatex: 10;y:200text: "变换状态"onClicked: rect.state = "lightblue"}Button{id: b_recovery:200anchors.left: b_changeState.rightanchors.leftMargin: 10text: "恢复"onClicked: rect.state = "normal"}
}

动画的开始状态

动画的结束状态

注意，宽度、高度、颜色均发生了变化，更多的例子，可参见课程《QT QML零基础动画教程》