1 效果

2 简介

button按键最常用，control2中对button做了固定封装，为了更灵活使用，自定义animation button组件。

3 控件代码

3.1 SenAnimationBtn.qml

import QtQuick 2.12
import QtQuick.Controls 1.0

// frame animation component
Item {
    property int framewidth: 950/10
    property int frameheight: 95
    property int framecount: 10
    property int frameduration: 100
    property url btnurl: "qrc:/hmi/img/Anima_Hover.png"
    property string btmTitle: "Start Run"
    property int clickType: 0
    signal signalClickedBtn(int clicktype); //0 close 1:min 2:menu 3:feedback
    clip: true

    width: framewidth
    height: frameheight+txtId.height

    MouseArea{
        id:ma
        anchors.fill: animated
        hoverEnabled: true
        onEntered: {
            animated.running = true;
            animated.resume();
        }
        onExited: {
            animated.running = true;
            animated.currentFrame = 0
            animated.pause()
        }
    }
    AnimatedSprite {
        id: animated;
        width:framewidth ;
        height: frameheight;
        source: btnurl;
        frameWidth:framewidth;
        frameHeight: frameheight;
        frameDuration: frameduration;
        frameCount: framecount;
        frameX: 0;
        frameY: 0;
        currentFrame: 0
        onCurrentFrameChanged: {
            if(currentFrame == frameCount-1 ){
                animated.pause();
                animated.running = false;
            }
        }
        Component.onCompleted: {
            running = false;
        }
    }
    Text {
        id:txtId
        text: btmTitle
        width: parent.width
        height: 30
        anchors.bottom: parent.bottom
        horizontalAlignment: Text.AlignHCenter
    }
}

/*************************************************************************
> Description: Test case
 *************************************************************************

 ************************************************************************/

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SenCom.SenAnimationBtn {
        framecount: 10
        framewidth: 95
        frameheight: 95
        anchors.centerIn: parent
        btnurl: "qrc:/img/Anima_Hover.png"
        anchors.verticalCenter: parent.verticalCenter
        btmTitle: "Start"
    }
}