Animate change in position and bearing QML Map using setBearing and alignCoordinateToPoint

[Jenny R]

I have a project where I display a map using the MapView component. I use the Map component's functions alignCoordinateToPoint and setBearing to "center" the map with an offset and rotate around a certain point. When I update the position and bearing I would prefer using alignCoordinateToPoint and setBearing to keep the offset centering. All this works well, but I would like the change in position and bearing to be animated, to make it look smoother. However, I cannot find a way to animate the change caused by calling these two functions.

Is there a way to do this?

Thanks!

[Jenny R]

@Jenny-R I solved the problem by using this solution: https://stackoverflow.com/questions/58874314/animating-bearing-property-change-with-qml-map.

Some additions and clarifications: I placed the RotationAnimation component on the same level as the MapView and placed the property "myBearing" and "onMyBearingChanged" inside the MapView component. The animation is then called from whereever the change should be triggered. I.e., a separate property (myBearing) is animated and every time the property is changed, setBearing() is called. alignCoordinateToPoint is handled in a similar way.

Code example:

MapView {
        id: mapView

        property real myBearing
        property geoCoordinate myCenter

        anchors.fill: parent
        z: 0

        map {
            plugin: mapPlugin
            zoomLevel: 14
            center: QtPositioning.coordinate(51.507622, -0.127855) 
        }

        onMyBearingChanged: {
            mapView.map.setBearing(myBearing, predefinedAlignmentPoint)
        }

        onMyCenterChanged: {
            mapView.map.alignCoordinateToPoint(myCenter, predefinedAlignmentPoint)
        }
    }

RotationAnimation {
    id: bearingAnimation
    target: mapView
    property: "myBearing"
    direction: RotationAnimation.Shortest
    duration: 1000

    function startBearingAnimation(to)
    {
        bearingAnimation.stop()
        bearingAnimation.from = mapView.map.bearing
        bearingAnimation.to = to
        if (bearingAnimation.from  !== bearingAnimation.to) {
            bearingAnimation.start()
        }
    }
}

CoordinateAnimation{
    id: centerAnimation
    target: mapView
    property: "myCenter"
    to: QtPositioning.coordinate(newLatitude, newLongitude)
    duration: 1000
}