QT动画制作（八）

alltolove

效果：

以前我们都是单个物体运动，今天我们把多个物体组合起来一起运动
知识点1：物体群组运动
知识点2：透明度自动变化
知识点3：大小自动变化
还是先建个QML项目，在 / 下新建Rect.qml文件

1. import QtQuick 2.4
   
2. 
   
3. Item {
   
4. Rectangle{
   
5.     width:400
   
6.     height:400
   
7.     radius: 200
   
8.     border.width: 3
   
9.     border.color: "#00B000"
   
10.     anchors.centerIn: parent
    
11.     XAnimator on x{
    
12.         from:0
    
13.         to:250
    
14.         duration:7000
    
15.         loops:Animator.Infinite
    
16.         easing.type: Easing.Linear//线性运动
    
17.     }
    
18.     RotationAnimator on rotation{
    
19.         from:0
    
20.         to:360
    
21.         duration: 7000
    
22.         loops:Animator.Infinite
    
23.     }
    
24. 
    
25.             Column{
    
26.                 anchors.centerIn: parent
    
27.                 spacing:5
    
28.                 Repeater{
    
29.                     model:6
    
30.             Rectangle{
    
31.                 width:60
    
32.                 height:60
    
33.                 color:"red"
    
34.                 ScaleAnimator on scale{//大小变化
    
35.                     from:0.1
    
36.                     to:1
    
37.                     duration:7000
    
38.                     loops:Animator.Infinite
    
39.                 }
    
40.                 OpacityAnimator on opacity {//深浅度变化
    
41.                     from:0.5
    
42.                     to:1
    
43.                     duration:7000
    
44.                     loops:Animator.Infinite
    
45.                 }
    
46. 
    
47.                 }
    
48.                 }
    
49.             }
    
50.             Row{
    
51.                 anchors.centerIn: parent
    
52.                 spacing:5
    
53.                 Repeater{
    
54.                     model:6
    
55.             Rectangle{
    
56.                 width:60
    
57.                 height:60
    
58.                 color:"red"
    
59.                 ScaleAnimator on scale{//大小变化
    
60.                     from:0.1
    
61.                     to:1
    
62.                     duration:7000
    
63.                     loops:Animator.Infinite
    
64.                 }
    
65.                 OpacityAnimator on opacity {//深浅度变化
    
66.                     from:0.5
    
67.                     to:1
    
68.                     duration:7000
    
69.                     loops:Animator.Infinite
    
70.                 }
    
71. 
    
72.                 }
    
73.                 }
    
74.             }
    
75. }
    
76. }
    

复制代码

MainForm.ui.qml文件

1. import QtQuick 2.5
   
2. 
   
3. 
   
4.    Rect{anchors.centerIn: parent}
   
5. 
   

复制代码

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. }

复制代码