QT动画制作（三）

alltolove

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

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

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

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

1. import QtQuick 2.4//此处要修改为2.2以上版本
   
2. 
   
3. Item {
   
4.     Rectangle {
   
5. 
   
6.         color:"red"
   
7.         width:80
   
8.         height:80
   
9.         /*让图像水平移动*/
   
10.         XAnimator on x{//只有引入QtQuick2.2以上版本才会有这种模式
    
11.             from:10
    
12.             to:300
    
13.             duration:1000
    
14.             loops:Animation.Infinite
    
15.             easing.type: Easing.OutBounce//设定为反弹模式
    
16.         }
    
17.     }
    
18. }

复制代码

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

1. import QtQuick 2.5
   
2. import QtQuick.Window 2.2
   
3. 
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     title: qsTr("Hello World")
   
9. 
   
10.     MainForm {
    
11.         anchors.fill: parent
    
12. 
    
13.     }
    
14. }

复制代码

MainForm.ui.qml文件

1. import QtQuick 2.5
   
2. Rectangle {
   
3.     property alias mouseArea: mouseArea
   
4.     property alias rect: rect//声明id为rect的物体的属性别名
   
5.     width: 360
   
6.     height: 360
   
7. 
   
8.     MouseArea {
   
9.         id: mouseArea
   
10.         anchors.fill: parent
    
11.         onClicked: rect.y=300//鼠标点击事件，让rect的位置在y轴300上
    
12.     }
    
13. 
    
14.    XY{
    
15.        id:rect
    
16. 
    
17. 
    
18.    }
    
19. }

复制代码