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 }

在工程目录里：图片格式如下

效果图：

这个图是动态的。。。

 

posted @ 2019-05-24 17:47  wxmwanggood  阅读(907)  评论(0)  编辑  收藏  举报