Здравствуйте, товарищи-сторожилы данного форума, я тут новичёк, как и в Qt.
В общем сам вопрос:
Я решил совместить приятное с полезным и попробовать реализовать Material Design на QML, с qml до этого не работал, щас всё изучаю по ходу дела.
Сейчас появилась проблема, сейчас делаю волны при клике, кто не понял о чём я, то вот пример(
http://fian.my.id/Waves/#examples), не сочтите за рекламу, как оформлять ссылки не в курсе.
Ну так вот, получилось генерировать анимацию увеличения круга, поигрался с z-координатой, чтобы не вылезало за текст, но главная проблема, что вылезает за границы кнопки, что не камельфо, как исправить мыслей нет, пробовал opacitymask, но рекурсивные элементы не хочет.
Вот мой код. Заранее спасибо за помощь.
import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.4
Window
{
visible: true
width: 200
height: 200
color: "white"
Rectangle
{
id: button
x:10
y:10
z:1
width: 120
height: 80
color: "#26a69a"
radius: 6
property string textButton: "Button"
states:
State
{
name: "Pressed"//Наведение
PropertyChanges
{
target: dropButtonShadow
radius: 8.0
horizontalOffset: 2
verticalOffset: 2
visible: true
color: "black"
opacity: 0.8
}
}
transitions:
Transition
{
reversible: true
ParallelAnimation
{
PropertyAnimation
{
properties: "horizontalOffset,verticalOffset,radius"
duration: 300
easing.type: Easing.Bezier
}
}
}
Text
{
z:3
text: button.textButton
anchors.horizontalCenter: button.horizontalCenter
anchors.verticalCenter: button.verticalCenter
}
MouseArea
{
id:buttonArea
anchors.fill: parent
hoverEnabled: true
onPressed:
{
button.state = "Pressed"
wave.initialX = mouseX
wave.initialY = mouseY
wave.size = 1.5
wave.state = "opened"
}
onReleased:
{
button.state = ""
}
}
Rectangle {
id: wave
z:2
property bool opened
property real size: 0
property real initialX
property real initialY
property real abstractWidth: button.width
property real abstractHeight: button.height
property real diameter: 2*Math.sqrt(Math.pow(Math.max(initialX, abstractWidth - initialX), 2) + Math.pow(Math.max(initialY, abstractHeight - initialY), 2))
width: size
height: size
radius: size/2
color: "red"
states: State {
name: "opened"
PropertyChanges {
target: wave
size: wave.diameter
}
}
x: initialX - size/2
y: initialY - size/2
transitions: Transition {
id: openedAnim
from: ""
to: "opened"
onRunningChanged: {
if (!openedAnim.running)
wave.state = ""
wave.size = 0
}
NumberAnimation {
property: "size"
easing.type: Easing.InOutQuad
duration: 1000
}
}
}
}
DropShadow
{
id: dropButtonShadow
anchors.fill: button
source: button
cached: true
horizontalOffset: 1
verticalOffset: 1
radius: 0.0
samples: 24
color: "white"
transparentBorder: true
}
}
