Circle scale animation from center

[JoeBermejales]

Hi,

I'd like to scale a circle in a map, but I don't know how to scale from the center of the circle, not the top left.

This is my current code:

        //Animation under vehicle icon
        MapQuickItem {
            id: animationScan
            antialiasing: true
            sourceItem: Rectangle {
                id: scanner
                width: 100
                height: 100
                color: "#08b3e5"
                radius: 50
                border.width: 0
                z: map.z + 3
                OpacityAnimator on opacity{
                    loops: Animation.Infinite
                    from: 0.80
                    to: 0.00
                    duration: 1500
                }
                ScaleAnimator on scale {
                    loops: Animation.Infinite
                    from: 0;
                    to: 1;
                    duration: 1500

                }
            }
            anchorPoint.x: scanner.width / 2
            anchorPoint.y: scanner.height / 2
            z: bus3d.z - 1
            coordinate: bus3d.coordinate
            zoomLevel: bus3d.zoomLevel
        }

This is how it scales now:

and this is what I'd like to achieve:

Thanks in advance

[JoeBermejales]

@KroMignon

THANK YOU!! It works!!

This is how it appears now:

        //Animation under vehicle icon
        MapQuickItem {
            id: animationScan
            antialiasing: true
            width: 100
            height: 100
            sourceItem:
                Item{
                id: scanner
                width: 140
                height: 140
                Rectangle {
                    width: 140
                    height: 140
                    color: "#08b3e5"
                    radius: 75
                    border.width: 0
                    z: map.z + 3
                    anchors.centerIn: parent
                    OpacityAnimator on opacity{
                        loops: Animation.Infinite
                        from: 0.90
                        to: 0.00
                        duration: 1500
                    }

                    ScaleAnimator on scale {
                        loops: Animation.Infinite
                        from: 0;
                        to: 1;
                        duration: 1500
                    }
                }
            }
            anchorPoint.x: scanner.width / 2
            anchorPoint.y: scanner.height / 2
            z: 4
            coordinate: bus3d.coordinate
            zoomLevel: bus3d.zoomLevel
        }

        //Lidar animation
        MapQuickItem {
            sourceItem:
                Item{
                id: lidarimg
                width: 80
                height: 80
                Image {
                    source: "qrc:/img/lidar.png"
                    width: 80
                    height: 80
                    enabled: false
                    antialiasing: true
                    anchors.centerIn: parent
                    RotationAnimator on rotation {
                        loops: Animation.Infinite
                        from: 0;
                        to: 360;
                        duration: 1500
                    }
                }
            }
            z: 4
            coordinate: bus3d.coordinate
            anchorPoint.x: lidarimg.width / 2
            anchorPoint.y: lidarimg.height / 2
            zoomLevel: bus3d.zoomLevel
            opacity: 0.4
        }

[Gojir4]

@JoeBermejales Hi,

I guess you need to set anchor points to fixed coordinates:
Example:

anchorPoint.x: animationScan.width / 2
anchorPoint.y: animationScan.height / 2

[JoeBermejales]

@Gojir4 thanks for your answer!

The rectangle object is correctly centered to the coordinate, the problem is with the scale animation.

If I add the anchorPoint to the Rectangle, I get the following:

(horizontalCenter and verticalCenter don't seem to work neither)

[KroMignon]

@JoeBermejales Do you have tried using anchors.centerIn?
Like this:

MapQuickItem {
    id: animationScan
    antialiasing: true
    sourceItem: Rectangle {
        id: scanner
        width: 100
        height: 100
        anchors.centerIn: animationScan
         ...
    }
}

[JoeBermejales]

@KroMignon thanks

Same behavior, I tried with another image, and another animation (rotation) and it seems that it also takes the top-left corner as a central point.

Could it be because the object rectangle is inside a MapQuickItem ? I can't find a logical sense to this

I need the animations centered in a coordinate and I can't do it, but what I have now is the following:

[KroMignon]

@JoeBermejales A stupide solution may be to add a parent, like this:

MapQuickItem {
    id: animationScan
    antialiasing: true
    sourceItem: Item {
        id: scanner
        width: 100
        height: 100
        z: map.z + 3
        Rectangle {
            width: 100
            height: 100
            anchors.centerIn: parent
            color: "#08b3e5"
            radius: 50
            border.width: 0
            OpacityAnimator on opacity{
                loops: Animation.Infinite
                from: 0.80
                to: 0.00
                duration: 1500
            }
            ScaleAnimator on scale {
                loops: Animation.Infinite
                from: 0;
                to: 1;
                duration: 1500

            }
        }
    }
    anchorPoint.x: scanner.width / 2
    anchorPoint.y: scanner.height / 2
    z: bus3d.z - 1
    coordinate: bus3d.coordinate
    zoomLevel: bus3d.zoomLevel
}

[JoeBermejales]

@KroMignon

THANK YOU!! It works!!

This is how it appears now:

        //Animation under vehicle icon
        MapQuickItem {
            id: animationScan
            antialiasing: true
            width: 100
            height: 100
            sourceItem:
                Item{
                id: scanner
                width: 140
                height: 140
                Rectangle {
                    width: 140
                    height: 140
                    color: "#08b3e5"
                    radius: 75
                    border.width: 0
                    z: map.z + 3
                    anchors.centerIn: parent
                    OpacityAnimator on opacity{
                        loops: Animation.Infinite
                        from: 0.90
                        to: 0.00
                        duration: 1500
                    }

                    ScaleAnimator on scale {
                        loops: Animation.Infinite
                        from: 0;
                        to: 1;
                        duration: 1500
                    }
                }
            }
            anchorPoint.x: scanner.width / 2
            anchorPoint.y: scanner.height / 2
            z: 4
            coordinate: bus3d.coordinate
            zoomLevel: bus3d.zoomLevel
        }

        //Lidar animation
        MapQuickItem {
            sourceItem:
                Item{
                id: lidarimg
                width: 80
                height: 80
                Image {
                    source: "qrc:/img/lidar.png"
                    width: 80
                    height: 80
                    enabled: false
                    antialiasing: true
                    anchors.centerIn: parent
                    RotationAnimator on rotation {
                        loops: Animation.Infinite
                        from: 0;
                        to: 360;
                        duration: 1500
                    }
                }
            }
            z: 4
            coordinate: bus3d.coordinate
            anchorPoint.x: lidarimg.width / 2
            anchorPoint.y: lidarimg.height / 2
            zoomLevel: bus3d.zoomLevel
            opacity: 0.4
        }