qml 实现播放器播放图标跳动

虽然，qml有AnimatedImage这个控件，但是，不是所有的图片都能做成gif格式的。因此，当有需求播放一系列图片时，就只能自定义个控件了，不说了，亮代码。。。

首先，自定义控件Playing_icon.qml

import QtQuick 2.0

Item {
    property int image_index_max
    property int image_index_min
    property url first_img
    property string sub_img
    //补0
      function pad(num, n) {
          var len = num.toString().length;
          while(len < n) {
              num = "0" + num;
              len++;
          }
          return num;
      }
    function add_image_index() {
            ++image_index_min;
        if(image_index_min > image_index_max)
        {
            image_index_min = 0
        }
        var temp_source = sub_img+pad(image_index_min,2)+".png"
        //console.log(temp_source)
        play_icon.source = temp_source
    }
    Rectangle {
         id: rect
         x: 320
         y: 240
         color: "transparent"
        Image{
            id:play_icon
            source:first_img
        }
        Timer {
            interval: 100
            running: true
            repeat: true
            onTriggered: {
                  add_image_index()
            }
        }
     }
}

在main.qml中引用Playing_icon.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
     640
    height: 480
    title: qsTr("Hello World")
    Playing_icon{
        id:playing_icon
        image_index_max:23
        image_index_min:0
        first_img:"./play_green_00000.png"
        sub_img:"./play_green_000"
    }
}

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

效果图：

这个图是动态的。。。