QML动画（基本动画）_qml鼠标点击动画

Animation （动画）

是所有 QML 动画的基础，但动画类型不能直接在 QML 文件中使用。它的存在是为了提供一组通用属性和方法，这些属性和方法可用于从它继承的所有其他动画类型。尝试直接使用动画类型将导致错误。

继承人有以下几种：

属性：

信号：

函数：

QML提供了多种的方式来定义一个动画：

• 使用属性值源来创建一个动画，即立刻为一个指定的属性使用动画
• 使用行为动画，当属性值改变时触发
• 在一个信号处理器中创建，当接收到一个信号时触发
• 作为一个独立动画，可以在脚本中进行开始/停止，也可以绑定到不同的对象
• 使用切换，在不同状态间提供动画

 PropertyAnimation（属性动画）

属性：

easing group（缓动组）

easing.type：enumeration（还有很多种请看官方文档）

运动方向的设置： 

使用on 来指定属性

• PropertyAnimation on x   沿着x轴运动
• PropertyAnimation on y   沿着y轴运动

设置属性：

• property："x"        沿着x轴运动
• property："y"         沿着x轴运动
• properties："x,y"   沿着x轴和y轴运动

使用的方法：

1. 直接在信号处理器中直接创建和使用
2. 控件中创建，在信号处理器中使用（需要手动调用running函数启动）
3. 使用Behacior，来分别创建x和y的行为（实现鼠标点击，控件移动到鼠标位置）

直接在信号处理器中直接创建和使用

//鼠标点击控件，移动到指定位置（沿着y轴运动） 
Rectangle{
        id:rect1;width: 100;height: 100
        color:"red";radius: 10
 
        MouseArea{
            anchors.fill:parent
            onPressed: PropertyAnimation{
                target: rect1 //设置使用对象
                properties: "y"//沿着y轴
                from:0 //起点
                to:200 //终点
                duration: 2000//运动时间2秒
                easing.type: Easing.InOutBack//移动方式为运动到半程增加过冲，然后减少
            }
        }
    }
 
 
//鼠标点击控件，移动到指定位置（沿着x和y轴运动）
Rectangle{
        id:rect1;width: 100;height: 100
        color:"red";radius: 10
        MouseArea{
            anchors.fill:parent
            onPressed: PropertyAnimation{
                target: rect1
                properties: "x,y"//沿着x和y轴
                from:0 //起点
                to:200 //终点
                duration: 2000//运动时间2秒
                easing.type: Easing.InOutBack
            }
        }
    }

 控件中创建，在信号处理器中使用

Rectangle{
        id:rect1;width: 100;height: 100
        color:"red";radius: 10
 
        PropertyAnimation{
            id:pa1
            target: rect1
            properties: "x,y"//沿着x和y轴
            from:0 //起点
            to:200 //终点
            duration: 2000//运动时间2秒
            easing.type: Easing.InOutBack
        }
        MouseArea{
            anchors.fill:parent
            onPressed: {
                pa1.running=true//开启动画
            }
 
        }
    }

行为动画：

经常在一个特定的属性值改变时要应用一个动画，这样可以使用Behavior为属性改变指定一个默认的动画。

Rectangle{
        id:rect1;width: 100;height: 100
        color:"red";radius: 10
 
        Behavior on x{  //x变化时，使用该行为
            PropertyAnimation{
                duration: 500
                easing.type:Easing.InQuart
            }
        }  
        Behavior on y{  //y变化时，使用该行为
            PropertyAnimation{
                duration: 500
                easing.type:Easing.InQuint
            }
        }
    }
 
    MouseArea{
        anchors.fill:parent
        onPressed: {
            rect1.x=mouse.x
            rect1.y=mouse.y
        }
    }

切换：

使用states：State，当状态改变时，进行切换。

Rectangle{
        id:rect1
        width:100;height: 100;color: "red"
        MouseArea{
            anchors.fill: parent
            onClicked: rect1.state="moved"
        }
        states: State{  //添加状态
            name:"moved"
            PropertyChanges{
                target: rect1
                x:50;y:50
            }
        }
        transitions: Transition {  //添加过渡
            PropertyAnimation{
                properties: "x,y"
                duration: 1000
            }
 
        }
    }

 属性动画元素：

以下都是继承自PropertyAnimation

• NumberAnimation  为实数和整数等数值类属性提供了高效的实现
• ColorAnimation   为颜色提供支持
• RotationAnimation 为旋转动画提供支持
• Vector3dAnimation 为矢量3D提供支持

 NumberAnimation的使用：

数字动画是一种专门的属性动画，它定义在数值更改时要应用的动画。

如果 NumberAnimation 所跟踪的数字值发生不规则更改，则可能无法平滑地进行动画处理。如果是这种情况，请改用SmoothedAnimation处理。

Rectangle{
        width: 100;height: 100
        color: "lightBlue"
        NumberAnimation on x{
            to:50
            duration: 1000
        }
    }

ColorAnimation   为颜色提供支持

ColorAnimation 是一种专用的属性动画，它定义在颜色值更改时要应用的动画

ColorAnimation 可以通过多种方式应用，包括过渡、行为和属性值源

Rectangle{
        id:rect
        width: 100;height: 100
        color: "lightBlue"
        ColorAnimation on color{  //颜色从蓝色变为红色
            from: "blue"
            to:"red"
            duration: 1000
        }
 
    }

RotationAnimation 为旋转动画提供支持

旋转动画是一种专门的属性动画，用于控制动画期间的旋转方向，默认情况下，它沿数值变化的方向旋转;从 0 到 240 的旋转将顺时针旋转 240 度，而从 240 到 0 的旋转将逆时针旋转 240 度。可以设置方向属性以指定旋转发生的方向

属性： 

direction：enumeration 

Rectangle{
        id:rect1
        height: 200;width: 200
        x:200;y:200;color: "red"
        RotationAnimation on rotation{
            to:200
            direction: RotationAnimation.Counterclockwise//逆时针旋转
            duration: 2000
        }
    }

参考文档：

Animation and Transitions in Qt Quick | Qt Quick 5.15.12

Qt Quick Examples - Animation | Qt Quick 5.15.12