fix: [issue-2238] stop camera animation on mac when reduced motion is on

[sebastianoscarlopez]

To fix issue #2238, this PR modifies the camera animation behavior on Mac when the 'reduced motion' setting is on.

Explanation:

The camera.easeTo method is called after the map movement happens, in order to add if needed a kind of "inertia movement". The easeTo method is called with the around property option with the position that should be the end of the camera ease movement.
Currently, when the 'reduced motion' setting is on, the duration is changed by 0. This does not avoid the final result, it only avoids the animation, because the final result will be at the around position, so it looks like an unexpected jump.

Example of the current behaviour, another example can be found here #2238

issue-2238-main.mp4

Approaches to fix

• My first approach was to just return this; if the reduced motion was on, but that approach didn't work well because it broke the zoom when the method was called by a double click.

• Another approach can be to reassign the around property to the center, because as was said before the movement was already done, and the center is in the current position, so the following code in the method will try as usual to do a movement, but its start position will be equal to the end position, so no movement will occur at all.

• This PR approach avoids calling this method when reduced motion is on

Result with this approach

issue-2238.mp4

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (18dcac9) 75.06% compared to head (e41dc5b) 75.06%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3068   +/-   ##
=======================================
  Coverage   75.06%   75.06%           
=======================================
  Files         240      240           
  Lines       19134    19135    +1     
  Branches     4320     4320           
=======================================
+ Hits        14363    14364    +1     
  Misses       4771     4771           

Files Changed	Coverage Δ
src/ui/handler_manager.ts	96.49% <100.00%> (+0.01%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[HarelM]

Can you elaborate why setting arond to center solves this issue?
Also can you add a before and after videos to better show the change/fix?
What will happen if the user uses easeTo not around the center with reduced motion? Is it a possibility?

[sebastianoscarlopez]

Hi @HarelM, thanks for the feedback. The description was updated. While I was writing it, another approach came to my mind.
Please let me know your thoughts about it.

[HarelM]

I think I would like to avoid calling easeTo in case of reduced motion, seems cleaner to me...

[sebastianoscarlopez]

I think I would like to avoid calling easeTo in case of reduced motion, seems cleaner to me...

@HarelM as you said, avoiding easeTo (inertia animation) results in cleaner code.

note: some tests failed, but it seems like something unrelated to this pr.

[HarelM]

Unfortunately, the tests are flaky, not sure how to solve this... :-(
Can you add a unit test to make sure this behavior will not break in the future?
Otherwise, this looks great.

[sebastianoscarlopez]

Now the test drag map check behavior with and without reduced motion feature

[HarelM]

Looks great and super clean, THANKS!