动态元素——动画

1.实现点击矩形，让其斜对角移动
2.实现矩形在x轴的0-50之间来回移动
3.实现点击矩形，宽度缩小到30

import QtQuick 2.12
import QtQuick.Window 2.12

//窗口
Window {
    visible: true   //可见
    width: 640  //宽度
    height: 480 //高度
    title: qsTr("Animation")    //标题

    //实现点击矩形，让其斜对角移动
    Rectangle {
        id: greenRect   //矩形元素id
        width: 88;      //矩形元素宽度
        height: 88;     //矩形元素高度
        color: "green"  //矩形元素颜色
        Behavior on x {PropertyAnimation{}} //点击(行为)触发x轴上的属性动画
        Behavior on y {PropertyAnimation{}} //点击(行为)触发y轴上的属性动画

        //鼠标区域
        MouseArea {
            anchors.fill: parent;   //整个矩形框

            //点击操作
            onClicked:
            {
                parent.x = 50;  //点击，矩形框x轴位置到50
                parent.y = 50;  //点击，矩形框y轴位置到50
            }
        }
    }

    //实现矩形在x轴的0-50之间来回移动
    Rectangle {
        id: redRect //矩形元素id
        width: 88;  //矩形元素宽度
        height: 88; //矩形元素高度
        color: "red"    //矩形元素颜色
        x: 0;   //矩形框x坐标
        y: 168; //矩形框y坐标

        //在x轴上的顺序动画
        SequentialAnimation on x {
            loops: Animation.Infinite   //动画无限循环
            PropertyAnimation{ to: 50 } //属性动画，矩形框到x轴的50位置
            PropertyAnimation{ to: 0 }  //属性动画，矩形框到x轴的0位置
        }

        //鼠标区域
        MouseArea {
            anchors.fill: parent    //锚定整个矩形框

            //点击触发属性动画
            onClicked: PropertyAnimation {
                target: redRect;    //触发目标：矩形框
                property: "opacity";    //透明度
                to: 0   //完全透明
            }
        }

    }

    //实现点击矩形，宽度缩小到30
    Rectangle {
        id: blueRect    //矩形元素id
        width: 88   //矩形元素宽度
        height: 88  //矩形元素高度
        color: "blue"//矩形元素颜色
        x:0 //矩形框x坐标
        y: 300  //矩形框y坐标

        //属性动画
        PropertyAnimation {
            id: animation   //属性动画id
            target: blueRect//属性动画目标：blueRect
            property:"width"//属性：宽度
            to: 30  //宽度到30
            duration: 500   //持续时间500ms
        }

        //鼠标区域元素
        MouseArea {
            anchors.fill: parent    //锚定到整个矩形框

            //点击
            onClicked:
            {
                animation.running = true;   //属性动画运行状态：正在运行
            }
        }

    }
}