Create ring circle with animation
-
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 ?
-
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
-
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