QT动画制作（三）

alltolove

效果：使一个矩形做直线运动,用鼠标点击窗口变换位置

知识点1：学会让一个物体直线运动

知识点2：学会简单的鼠标点击事件

我们还是建一个QT QUICK项目，然后在根目录“/”下新建一个XY.qml的文件，代码如下：

import QtQuick 2.4//此处要修改为2.2以上版本

Item {
    Rectangle {

        color:"red"
        width:80
        height:80
        /*让图像水平移动*/
        XAnimator on x{//只有引入QtQuick2.2以上版本才会有这种模式
            from:10
            to:300
            duration:1000
            loops:Animation.Infinite
            easing.type: Easing.OutBounce//设定为反弹模式
        }
    }
}

将以下两个文件也做相应修改
main.qml文件

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent

    }
}

MainForm.ui.qml文件

import QtQuick 2.5
Rectangle {
    property alias mouseArea: mouseArea
    property alias rect: rect//声明id为rect的物体的属性别名
    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: rect.y=300//鼠标点击事件，让rect的位置在y轴300上
    }

   XY{
       id:rect


   }
}