Quick控件--3.animation button
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"
}
}