Circle scale animation from center



  • 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:
    0_1553690083382_a4818141-6972-4040-938e-d1a60538e096-image.png

    and this is what I'd like to achieve:
    0_1553690564974_8f9afc96-9641-4711-94cb-bd4c175d8ab8-image.png

    Thanks in advance



  • @JoeBermejales Hi,

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

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


  • @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:

    0_1553692446383_e71eed28-ee1f-4237-b2e1-d7cf6072bae6-image.png

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



  • @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
             ...
        }
    }
    


  • @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:

    0_1553784135022_346c58bf-80d9-4791-a0fe-8828c51573b9-image.png



  • @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
    }
    


  • @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
            }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.