Flutter_map: Add pan animation

[EdHubbell]

This is a feature request. It'd be nice to have a .moveAnimated(center, zoom, ??).

Here's my terrible janky animation method at this time:

Future animateMapMove(MapController mapController, int msDelay, LatLng center) {
  mapController.move(center, 12.0);
  return new Future.delayed(Duration(milliseconds: msDelay), () => "1");
}

animateMapMove(store.state.mapController, 100, LatLng(startingPoint.latitude + 1* incLat, startingPoint.longitude + 1* incLon))
      .then( (t) => animateMapMove(store.state.mapController, 80, LatLng(startingPoint.latitude + 2* incLat, startingPoint.longitude + 2* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 30, LatLng(startingPoint.latitude + 3* incLat, startingPoint.longitude + 3* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 10, LatLng(startingPoint.latitude + 4* incLat, startingPoint.longitude + 4* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 10, LatLng(startingPoint.latitude + 5* incLat, startingPoint.longitude + 5* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 30, LatLng(startingPoint.latitude + 6* incLat, startingPoint.longitude + 6* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 80, LatLng(startingPoint.latitude + 7* incLat, startingPoint.longitude + 7* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 100, LatLng(startingPoint.latitude + 8* incLat, startingPoint.longitude + 8* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 100, action.mapCenter))
  ;

I'd like to be able to use Flutter's animation features, but I can't seem to figure out how to get a reference to vsync. I'm new to Flutter. I guess just about everyone is.

Here's some code that I was trying to use, but never got to go:

    final _latTween = new Tween<double>(begin: store.state.mapCenter.latitude, end: action.mapCenter.latitude);
    final _lngTween = new Tween<double>(begin: store.state.mapCenter.longitude, end: action.mapCenter.longitude);

    AnimationController controller;
    Animation<double> animation;

    // I can't figure out how to get a vsync in here. Might work if I could.
    controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync:);
    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn);

    controller.addListener(() {
      store.state.mapController.move(LatLng(_latTween.evaluate(animation), _lngTween.evaluate(animation)), 12.0);
    });

    controller.forward();

I'm not sure if we'd pass an AnimationController to the MapController, or vice-versa, or what.

[johnpryan]

This would be great! I think this is something we might need to build into the map.

I'm not an animation expert, but you can get a reference to vsync by mixing in the SingleTickerProviderStateMixin class.

Leaflet has an animate option on map.setView so we could try to match that API and do the animation for the user

[EdHubbell]

I got it to work using your suggestion, @johnpryan - Just needed to move my FlutterMap into a stateful widget so that it could get a TickerProvider via the 'this' keyword. Then I pass that TickerProvider up to the redux middleware each time someone clicks on a marker so that the map animates to the center of the marker.

if (action is SetMapCenterAction) {
    final _latTween = new Tween<double>(begin: store.state.mapCenter.latitude, end: action.mapCenter.latitude);
    final _lngTween = new Tween<double>(begin: store.state.mapCenter.longitude, end: action.mapCenter.longitude);

    AnimationController controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: action.tickerProvider);
    Animation<double> animation =  CurvedAnimation(parent: controller, curve: Curves.easeIn);

    controller.addListener(() {
      store.state.mapController.move(LatLng(_latTween.evaluate(animation), _lngTween.evaluate(animation)), 12.0);
      print("${_latTween.evaluate(animation)} , ${_lngTween.evaluate(animation)}");
    });

    animation.addStatusListener((status) {
      print("$status");
      if (status == AnimationStatus.completed) {
        controller.dispose();
      } else if (status == AnimationStatus.dismissed) {
        controller.dispose();
      }
    });

    controller.forward();
}

Note that getting the mixin to actually work - e.g.
class _MapPageState extends State<CartsMapPage> with TickerProviderStateMixin {
required adding an analysis_options.yaml file to the project, as per https://github.com/flutter/flutter/issues/14317#issuecomment-361085869

I can see some advantages of leaving this out of the core library - Easier to customize animation paths and times, etc.

[johnpryan]

Awesome! Would you have time to add an example to the example project?

[EdHubbell]

As it turns out, yes. My paying work today was too boring anyway. And thanks for asking - I thought about doing it, but didn't want to spend time on something if no one wanted it.