QT动画制作（十）

alltolove

效果：

知识点1：学会设定项目的状态State
知识点2：学会正弦运动
还是新建QT项目，然后在 / 下新建个Rect.qml文件，代码如下

1. import QtQuick 2.4
   
2. 
   
3. Item {
   
4.     MouseArea{//确定鼠标区域
   
5.         anchors.fill: parent
   
6.         onClicked: text.state="green"
   
7.     }
   
8. 
   
9.     Text{
   
10.         id:text
    
11.         anchors.centerIn: parent
    
12.         font.pointSize: 24//字号24
    
13.         font.bold: true//设定粗体字
    
14.         text:"I love FishC"
    
15.         state: "red"//设定初始状态为红色
    
16.         /*这是一个设定状态的数组，里面可以设置多种状态*/
    
17.         states: [State {//设定一种颜色为红色的状态
    
18.             name: "red"
    
19.             PropertyChanges {
    
20.                 target: text//设定目标
    
21.                 color:"red"
    
22.             }
    
23. 
    
24.         },
    
25.             State{
    
26.                 name:"green"
    
27.                 PropertyChanges{
    
28.                     target:text
    
29.                     color:"green"
    
30.                 }
    
31.             }
    
32.         ]
    
33.         transitions: Transition{//设定状态变化时的动画渐变效果
    
34.                 from:"red"
    
35.                 to:"green"
    
36.             PropertyAnimation{
    
37.                 target:text
    
38.                 property:"color"
    
39.                 duration:1000
    
40.             }
    
41.             }
    
42.         /*做正弦曲线运动*/
    
43.         XAnimator on x{
    
44.             from:100
    
45.             to:400
    
46.             duration:10000
    
47.             loops:Animator.Infinite
    
48.             easing.type: Easing.SineCurve
    
49.         }
    
50.         YAnimator on y{
    
51.             from:100
    
52.             to:400
    
53.             duration:5000
    
54.             loops:Animator.Infinite
    
55.             easing.type: Easing.SineCurve
    
56.         }
    
57. 
    
58.     }
    
59. 
    
60. 
    
61. }
    

复制代码

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. 
   
3. Rect{}
   

复制代码

谦虚求学

看过