qtqmlqtquick2qtlocation

Animating bearing property change with Qml Map


I am trying to animate the bearing property change on a Qml map:

Map {
    id: map
    Behavior on bearing {
        enabled: true
        RotationAnimation {
            direction: RotationAnimation.Shortest
            duration: 500
            easing.type: Easing.Linear
        }
    }

    Button {
        onClicked: map.bearing = 100 // animation works. Map rotation is animated
    }

    Button {
        onClicked: map.setBearing(100, Qt.point(10,10)) // animation does not work. Map rotates immediately to the bearing
    }
}

When the bearing is set directly using map.bearing then the animation works. But when using the helper method map.setBearing then the animation is not working. Is there a way to get the animation together with the map.setBearing method?

Regards,


Solution

  • I would bet you need another, separate animation for the setBearing invokable. The one you have in the behavior cannot cover your added use case, as it operates on the property, while the setBearing overload, strictly speaking, bypasses the property and only triggers the updated signal once it's done.

    Something like

            RotationAnimation {
                id: bearingAnimation
                target: <yourmap>
                property: "myBearing"
                direction: RotationAnimation.Shortest
                duration: 360
    
                function distance(a, b)
                {
                    var mx = Math.max(a, b)
                    var mn = Math.min(a, b)
    
                    return Math.min( mx - mn, mn + 360 - mx)
                }
    
                function startBearingAnimation(to)
                {
                    bearingAnimation.stop()
                    bearingAnimation.from = <yourmap>.bearing
                    bearingAnimation.to = to
                    if (bearingAnimation.from  !== bearingAnimation.to) {
                        bearingAnimation.duration = distance(bearingAnimation.from, bearingAnimation.to) * 2
                        bearingAnimation.start()
                    }
                }
            }
    

    and then

        property real myBearing
        onMyBearingChanged {
             <yourmap>.setBearing(myBearing, <thepoint>)
        }