qml闪光特效

最新推荐文章于 2024-07-12 21:25:26 发布

砖农L

最新推荐文章于 2024-07-12 21:25:26 发布

阅读量123

点赞数 3

文章标签： qt

本文链接：https://blog.csdn.net/liusarzn/article/details/137629777

版权

文章介绍了如何使用QtQuick库中的QML编写一个在窗口中心以闪光方式逐渐扩大的圆形效果，通过Rectangle和ShapePath创建渐变圆环，并配合PropertyAnimation实现动画。

摘要由CSDN通过智能技术生成

使用qml编写在窗口中心闪光逐渐扩大的特效

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Shapes 1.7

Window {
    id:root
    visible: true
    width: 400
    height: 400
    title: qsTr("Growing Circle")
    Rectangle{
        id: glowRect
        anchors.centerIn: parent
        width: 0
        height: width

        Shape {
            id:glowCircle
            anchors.fill: parent
            ShapePath {
                fillGradient: RadialGradient {
                    centerX: glowCircle.width /2
                    centerY: glowCircle.width /2
                    centerRadius: glowCircle.width /2
                    focalX: centerX
                    focalY: centerY
                    GradientStop { position: 0; color: "white" }
                    GradientStop { position: 0.2; color: "#10FFFF00" }
                    GradientStop { position: 0.4; color: "#30FFFF00" }
                    GradientStop { position: 0.5; color: "#50FFFF00" }
                    GradientStop { position: 0.6; color: "#30FFFF00" }
                    GradientStop { position: 0.8; color: "#10FFFF00" }
                    GradientStop { position: 1; color: "white" }
                }
                startX: glowCircle.width /2
                startY: 0
                PathArc{
                    useLargeArc: true
                    radiusX: glowCircle.width / 2
                    radiusY: glowCircle.width / 2
                    x:glowCircle.width / 2
                    y:glowCircle.width
                }
                PathArc{
                    useLargeArc: true
                    radiusX: glowCircle.width / 2
                    radiusY: glowCircle.width / 2
                    x:glowCircle.width /2
                    y:0
                }
            }
        }

        PropertyAnimation{
            duration: 1000
            property: 'width'
            target: glowRect
            to: root.width * 3
            running: true
            onStopped: {
                glowRect.visible = false
            }
        }
    }
}