qml 實現播放器播放圖標跳動

雖然，qml有AnimatedImage這個控件，可是，不是全部的圖片都能作成gif格式的。所以，當有需求播放一系列圖片時，就只能自定義個控件了，不說了，亮代碼。。。

首先，自定義控件Playing_icon.qml

 1 import QtQuick 2.0
 2 
 3 Item {
 4     property int image_index_max
 5     property int image_index_min
 6     property url first_img
 7     property string sub_img
 8     //補0
 9       function pad(num, n) {
10           var len = num.toString().length;
11           while(len < n) {
12               num = "0" + num;
13               len++;
14           }
15           return num;
16       }
17     function add_image_index() {
18             ++image_index_min;
19         if(image_index_min > image_index_max)
20         {
21             image_index_min = 0
22         }
23         var temp_source = sub_img+pad(image_index_min,2)+".png"
24         //console.log(temp_source)
25         play_icon.source = temp_source
26     }
27     Rectangle {
28          id: rect
29          x: 320
30          y: 240
31          color: "transparent"
32         Image{
33             id:play_icon
34             source:first_img
35         }
36         Timer {
37             interval: 100
38             running: true
39             repeat: true
40             onTriggered: {
41                   add_image_index()
42             }
43         }
44      }
45 }

在main.qml中引用Playing_icon.qml

 1 import QtQuick 2.9
 2 import QtQuick.Window 2.2
 3 
 4 Window {
 5     visible: true
 6     width: 640
 7     height: 480
 8     title: qsTr("Hello World")
 9     Playing_icon{
10         id:playing_icon
11         image_index_max:23
12         image_index_min:0
13         first_img:"./play_green_00000.png"
14         sub_img:"./play_green_000"
15     }
16 }

在工程目錄裏：圖片格式以下

效果圖：

這個圖是動態的。。。