Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable linear easing on map camera #1281

Merged
merged 8 commits into from
Apr 18, 2021

Conversation

naftalibeder
Copy link
Collaborator

I encountered a scenario where it would be extremely useful for the camera to be able to animate with a linear timing function, and realize that this library currently does not support that, although it's well within the ability of the camera module to do so.

Thoughts about this solution? There would be a number of ways to do this, but adding a new mode fits best within the current architecture, without needing to refactor out an easing-specific parameter.

@ferdicus
Copy link
Member

Thanks for your contribution @naftalibeder 🙇🏿

Any particular reason why you didn't add the implementation for Android as well?
We should have parity between the platforms (if that's possible with the available feature set of course).

Additionally, it would be cool if you could add this to one of the many example examples where it's appropriate OR add some video to the PR showing it off for posterity.

Thanks in advance

@naftalibeder
Copy link
Collaborator Author

naftalibeder commented Mar 19, 2021

@ferdicus Thanks for checking it out, and very good question! The answer is that I forgot to mention, I wanted to see if you all supported the idea, at which point I would port it over to Android. So sounds like that's a yes! I'll update when I have that ready.

And absolutely, I'd be happy to include some example video and update the demos.

@naftalibeder
Copy link
Collaborator Author

naftalibeder commented Mar 29, 2021

All right, Android is set up to have parity with iOS! (Tested and works on device.)

I've attached two videos below from the iOS simulator. In both of them, the map attempts to center on a coordinate that updates every 1000ms.

Smooth easing

animationDuration={1000}
animationMode={'easeTo'}
ease.mov

Linear easing

animationDuration={1000}
animationMode={'linearTo'}
linear.mov

This should also demonstrate an ideal use case - any kind of continuous motion looks a lot better with linear map movement.

Keen eyes will notice that even the linear map transition shows a very slight fluctuation at the end of each cycle. This is the point where I need to waive responsibility off to the Mapbox SDK - I don't think there's anything else we can do in this library to fix that. But compared with the ease-in-ease-out movement, I think the linear easing is a significant improvement for uses that require it.

cc @ferdicus

@ferdicus
Copy link
Member

Looks great, thanks @naftalibeder 🙇🏿

@ferdicus ferdicus merged commit be0309c into rnmapbox:master Apr 18, 2021
mikalaiulasevich pushed a commit to OneSoil-Platform/maps that referenced this pull request Sep 23, 2021
* Add linear easing option to camera

* Update docs

* Update docs

* Update docs/props

* Add linear easing logic to Android

* Add required arg

* Update docs

* Set CameraStop mode to linear if key in readableMap
@naftalibeder naftalibeder deleted the camera-linear-easing branch December 22, 2023 16:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants