QT动画制作（十五）

alltolove

效果：

知识点1：学会使用进度条
知识点2：学会减少颜色饱和度效果
不多说直接上代码：
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{}
   

复制代码

Rect.qml文件：

1. import QtQuick 2.0
   
2. import QtQuick.Controls 1.2
   
3. import QtGraphicalEffects 1.0
   
4. Item{
   
5. ProgressBar{//进度条
   
6.     id:pb
   
7.     anchors.bottom: parent.bottom
   
8.     height: 90
   
9. 
   
10. }
    
11. Image{
    
12.     id:pic
    
13.     source: "qrc:/C:/Users/xinwei/Pictures/canary_3.jpg"
    
14.     smooth:true
    
15. }
    
16. Desaturate{//降低颜色饱和度
    
17.     id:tran
    
18.     anchors.fill: pic
    
19.     source: pic
    
20. 
    
21. }
    
22. SequentialAnimation{
    
23. NumberAnimation{
    
24. id:a
    
25. target: tran
    
26. property: "desaturation"
    
27. from:0
    
28. to:1.0
    
29. duration:10000
    
30. }
    
31. running: true
    
32. }
    
33. function b()
    
34. {
    
35.     pb.value=tran.desaturation
    
36. }
    
37. Connections{
    
38. target: tran
    
39. onDesaturationChanged:b()//当颜色饱和度变化时调用b（）函数
    
40. }
    
41. }
    

复制代码

Preview:明天介绍用文件对话框来打开文件的方法