17.自定义点击带波纹特效按钮

本文主要是介绍17.自定义点击带波纹特效按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 说明：

此自定义按钮的大致效果为：当点击了按钮控件后，会在按钮中心生成一个类似波纹的特效并向四周扩散，同时按钮控件会有一个跳动的特效。
效果展示

波纹按钮

2. 示例代码：

功能实现方式：在WaveButton.qml中使用动态创建组件的方式，创建WaveEffect.qml自定义控件，有关波纹的代码均在WaveEffect.qml中进行设计。相关代码如下：
WaveButton.qml

import QtQuick 2.0
import QtQuick.Controls 2.0Rectangle {id:rootanchors.centerIn: parentwidth: 100height: 50radius: height/4color: Qt.rgba(0.9,0.9,0.9,1)signal clicked()function createWaveEffect(){var waveCom = Qt.createComponent("qrc:/WaveEffect.qml")if(waveCom.status === Component.Ready){var waveObj = waveCom.createObject(root,{"waveDiameter":root.width > root.height ? root.height : root.width,"waveBorderWidth":2,"waveBorderColor" : Qt.rgba(0.95,0.95,0.95,1)})waveObj.anim.start()}}MouseArea {anchors.fill: parentonClicked: {createWaveEffect()scaleAnim.start()root.clicked()}}Text {id: waveTextanchors.centerIn: parenttext: qsTr("click")color: Qt.rgba(0.3,0.3,0.3,1)font.pixelSize : parent.width > parent.height ? parent.height * 0.4 : parent.width * 0.4}SequentialAnimation {id: scaleAnimrunning: falseloops: 1NumberAnimation {target: rootproperty: "scale"to:0.95duration: 100}NumberAnimation {target: rootproperty: "scale"to:1.0duration: 100}}
}

WaveEffect.qml

import QtQuick 2.0
import QtQuick.Controls 2.0Item {id:rootwidth: 200height: 200anchors.centerIn: parentproperty alias anim : animproperty int waveDiameter : 0property int waveBorderWidth : 1property color waveBorderColor : Qt.rgba(0.8,0.8,0.8,1)Rectangle {id:waveanchors.centerIn: parentwidth:0height: widthradius: height / 2border.width: waveBorderWidthborder.color: waveBorderColorcolor: Qt.rgba(0,0,0,0)property alias anim : animproperty int duration : 800onOpacityChanged: {if(opacity === 0) {root.destroy()}}ParallelAnimation {id:animrunning: falseloops: 1NumberAnimation {target: waveproperties: "width,height"to:waveDiameterduration: duration}NumberAnimation {target: waveproperties: "radius"to:waveDiameterduration: duration}NumberAnimation {target: waveproperty: "opacity"to: 0duration: duration}}}
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.0ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("Hello World")WaveButton{anchors.centerIn: parentonClicked: {console.log("create waveEffect Button ....")}}
}