Animating bearing property change with Qml Map

Question

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,

Could you check that your map plugin supports bearing? If it does not, as the documentation reports, calling setBearing or setting the property bearing will have no effect. Nevertheless, by changing directly the bearing property, you will trigger the property change signal and thus the behavior attached to it. — epsilon, Nov 15 '19 at 10:57
Settings the bearing works (the maps supports it) but the animation only works when I directly set the property. — Hyndrix, Nov 15 '19 at 14:24
What Qt version do you use? From the docs: _This method was introduced in Qt 5.10_ — folibis, Nov 15 '19 at 14:31

Pa_ · Accepted Answer · 2019-11-15T19:15:42.497

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>)
    }

Animating bearing property change with Qml Map

1 Answers1