Create ring circle with animation

Vinoth Rajendran4

Hi everyone,

I have a use-case,

In my application, when the user clicks somewhere in my application, a ring circle has to be created at that point, which for next 10 seconds should increase in radius and then disappear.

Not sure how to approach this problem. Can some one help me, how i approach this ?

J.Hilk

@Vinoth-Rajendran4

this is not quite what you want, but it's close enough that you should be able to adapt it :D

Keep in mind, this is one option, Im sure there are other and better options out there

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    id:mainWindowRoot
    visible: true
    width: 640
    height: 480

    Item{
        id: increasingCyrcle
        anchors.centerIn: parent

        width: 1
        height: 1

        Timer {
            id:increaseInfinite
            repeat: true
            interval: 10
            running: true
            onTriggered:{
                increasingCyrcle.width = increasingCyrcle.width +1
                increasingCyrcle.height = increasingCyrcle.height +1
            }
        }

        Canvas{
            anchors.fill:parent

            property int centerX: width / 2
            property int centerY: height / 2
            property int radius: Math.min(centerX, centerY) - 1

            onCenterXChanged: requestPaint()
            onCenterYChanged: requestPaint()

            onPaint: {
                var context = getContext("2d");
                context.reset()

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.lineWidth = 1;
                context.strokeStyle = 'black';
                context.stroke();
            }
        }
    }


}  // Window

Vinoth Rajendran4

@J-Hilk : Thanks for the tips. I will look into it. Cheers !

UlrichS

Hi, let me propose more sophisticated way to achieve this. Create a ring object dynamically to the desired position and run animation on opacity and size inside that component. Once the animation is completed, destroy the object. The lifetime of the ring object is then handled automatically and more declarative way. Here's example code:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: ringComponent.createObject(root, {originX: mouse.x, originY: mouse.y})
    }

    Component {
        id: ringComponent
        Rectangle {
            id: ring
            property int originX: 0
            property int originY: 0

            color: "transparent"
            border.color: "red"
            border.width: 5

            x: originX - width/2
            y: originY - height/2
            height: width
            radius: width / 2

            NumberAnimation on width {
                from: 0
                to: 100
                duration: 500
                running: true
            }
            OpacityAnimator on opacity {
                from: 1
                to: 0
                duration: 500
                onStopped: ring.destroy()
            }
        }
    }
}

Regards,
Ulrich