qml实现一个超级好看的水波纹

好的，以下是一个简单的 QML 水波纹效果的实现方式：

import QtQuick 2.15

Rectangle {
    id: root
    width: 200
    height: 200
    color: "black"
    radius: 100

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onPositionChanged: {
            // 计算鼠标位置相对于中心点的距离
            var dx = mouse.x - root.width / 2
            var dy = mouse.y - root.height / 2
            var distance = Math.sqrt(dx * dx + dy * dy)

            // 计算水波纹半径和透明度
            var radius = distance * 1.5
            var opacity = (root.height - radius) / root.height

            // 创建动画
            var animation = Qt.createQmlObject(
                "import QtQuick 2.15; NumberAnimation {}", root)
            animation.target = circle
            animation.property = "radius"
            animation.to = radius
            animation.duration = 500
            animation.easing.type = Easing.InOutQuad
            animation.start()

            circle.opacity = opacity
        }
    }

    Circle {
        id: circle
        color: "white"
        radius: 0
        opacity: 0
        anchors.centerIn: parent
    }
}

以上代码创建了一个圆形区域，并在鼠标移动时创建一个水波纹效果。当鼠标移动到圆形区域的边缘时，水波纹的半径和透明度会相应地变化。通过动画效果，圆形区域的半径会从当前半径到水波纹半径进行平滑过渡，而透明度则直接设置为计算出的值。运行程序后，你会看到一个非常流畅的水波纹效果。