Fling animation can be more fluid

[aytunch]

I am not talking about dragging(pan). While dragging, the map is fluid. However while swiping(pan), like a fast flicker of finger, the map moves in an unnatural way. Seems too much acceleration. We can do it like Apple Maps or Google maps swipe gesture. If I am not wrong, this could be solved by altering the swipe gesture. Damping and Curves.

[johnpryan]

Yep, I think I agree that this is slightly unnatural, at least on iOS. (Android users might feel differently). The fling animation is here: https://github.com/johnpryan/flutter_map/blob/1d048608ab0ab6daf716b3c4b20db7a62cc44536/lib/src/gestures/gestures.dart#L20 and is using the AnimationController.fling() function from the flutter framework.

[aytunch]

@johnpryan @lpongetti There has been some great contributions in the past days to flutter_map by you two. I really think that the Fling gesture is very un natural at the moment. It is as if the animation accelerates instead of decelerating. I use Google maps, Apple maps, yandex maps on iOS and all of them behave the same way when it comes to fling(swipe/throw) gesture animation. But Flutter map behaves differently. Thanks

[lpongetti]

I'll see when i'll have some time

[lpongetti]

I read the code and at first look i think that can be the duration... its never setted. It have to be proportioned by velocity. but i have to try.. monday

[aytunch]

@lpongetti Sounds great, thanks. Now that you pointed out a hint about duration, I looked at the code and it seems the author records the magnitude of the fling gesture and calculates the new center according to it. And then makes a linear tween to that new center. In other gestures like double tap author used Curves.fastOutSlowIn. But I couldn't see something like that for fling animation. Maybe that is what causes the unnatural animation along with no duration. Good luck since it seems too much math:D What I realized after looking at other map apps, Their fling animations decelerate much quicker, and don't go too far away unless it is a very big fling. Ours moves a lot even when a small fling distance is made by the finger

[lpongetti]

Surely the distance and duration are wrong. Fling animation sounds good.. but i dont know... Monday i will look for a solution

[lpongetti]

i tried to remove fling animation and i added CurvedAnimation with Curves.decelerate.
i have pixel per seconds and i have to calculate the duration and end offset.
with the right duration and offset the animation will have at the start the same speed of touch.

unfortunately I'm not a mathematician and i don't know how to compute them.

if you want you can try

var magnitude = details.velocity.pixelsPerSecond.distance;
    if (magnitude < _kMinFlingVelocity) {
      return;
    }

    Animation<double> animation =
        CurvedAnimation(parent: _controller, curve: Curves.decelerate);

    _flingAnimation = Tween<Offset>(
      begin: _flingOffset,
      end: _flingOffset - (details.velocity.pixelsPerSecond / xxx),
    ).animate(animation);

    _controller
      ..value = 0.0
      ..duration = Duration(milliseconds: xxx)
      ..forward();

[aytunch]

I just found out about a great library named Flutter-Flick: https://github.com/aliyigitbireroglu/flutter-flick

I believe This package takes away the need of math calculations and results in a natural Fling gesture. Do you guys think we can implement this inside Flutter_Map? @johnpryan @lpongetti @aliyigitbireroglu

[johnpryan]

I think a simpler solution might be to use AnimationController.animateWith and use a physics simulation: https://github.com/flutter/samples/blob/master/animations/lib/src/misc/physics_card_drag.dart#L70

[aliyigitbireroglu]

The Flick library has a very simple logic: First, of course, it moves the widget according to the drag gestures. When these gestures end, it calculates the imminent displacement based on the velocity of the DragEndDetails. Then, it creates a CurvedAnimation tween based on the calculated displacement using Curves.decelerate. Finally, it moves the widget with this animation.

I haven't had the chance of looking at the code of Flutter_Map yet but I hope you can implement Flick directly. If not, I would be glad to contribute:) I will see the code as soon as I can.

[RyanRamchandar]

Any updates on this?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[FloLecoeuche]

Any updates on this ?

[aytunch]

@FloLecoeuche unfortunately it has been 2 years since I opened this but it has not been addressed yet. Do you know of a way to re-open the issue? The bot closed it automatically.
Google maps and Apple Maps have a much more natural fling/swipe gesture.

[joeldsparks]

The initial rapid acceleration appears to be due to the spring physics being critically dampened. I changed the default to be over damped and tweaked it by manually comparing it to google and apple maps and now it's smoother.

    _flingController
      ..value = 0.0
      ..fling(
          velocity: magnitude / 1000.0,
          springDescription: SpringDescription.withDampingRatio(
            mass: 1.0,
            stiffness: 1000.0,
            ratio: 5.0,
          ));

The default values are:

    _flingController
      ..value = 0.0
      ..fling(
          velocity: magnitude / 1000.0,
          springDescription: SpringDescription.withDampingRatio(
            mass: 1.0,
            stiffness: 500.0,
            ratio: 1.0,
          ));

[aytunch]

@joeldsparks These values are better imo. Will you be opening a PR and merging these to main?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.