Skip to content
This repository has been archived by the owner on Aug 8, 2023. It is now read-only.

expose property transitions to platform SDKs #6779

Closed
incanus opened this issue Oct 21, 2016 · 5 comments
Closed

expose property transitions to platform SDKs #6779

incanus opened this issue Oct 21, 2016 · 5 comments
Assignees
Labels
Android Mapbox Maps SDK for Android feature GL JS parity For feature parity with Mapbox GL JS iOS Mapbox Maps SDK for iOS macOS Mapbox Maps SDK for macOS runtime styling
Milestone

Comments

@incanus
Copy link
Contributor

incanus commented Oct 21, 2016

As in GL JS, we support paint property transitions (i.e animations over time) in core (see here) but not yet in the platform SDKs.

This is an enhancement to runtime styling, but not needed to ship that feature.

/cc @1ec5 @mollymerp @peterqliu

@incanus incanus added feature GL JS parity For feature parity with Mapbox GL JS iOS Mapbox Maps SDK for iOS macOS Mapbox Maps SDK for macOS Android Mapbox Maps SDK for Android runtime styling labels Oct 21, 2016
@incanus incanus added this to the ios-future milestone Oct 21, 2016
@1ec5
Copy link
Contributor

1ec5 commented Oct 21, 2016

mbgl does support paint property transitions baked into the style. However, as far as I can tell, the concrete mbgl::style::Layer classes don’t support transitions as part of runtime styling. (They also doesn’t support setting properties per style class: #5948.)

@1ec5
Copy link
Contributor

1ec5 commented Oct 21, 2016

Also, mbgl does support setting a global paint property duration and delay, via mbgl::Map::setTransitionOptions(). However, in the iOS and macOS SDKs, -[MGLStyle setStyleClasses:transitionDuration:] is currently private; its only caller is -[MGLStyle setStyleClasses:].

@incanus
Copy link
Contributor Author

incanus commented Nov 1, 2016

I've done some experiments with this using the approach outlined here (under Animating Non-Visual Properties), which leverages CALayer's ability to interpolate various types of values (numbers, colors, etc.) and, within a CABasicAnimation, repeatedly sets them in the runtime styling API through the use of the presentationLayer values.

pulse

rotate

This isn't high priority right now, but I will get back to this in the near future.

@incanus
Copy link
Contributor Author

incanus commented Nov 1, 2016

Similarly, @cammace was able to do something a lot like this on Android using ValueAnimator in the demo app. We could probably build out similar APIs on both platforms using the built-in animators of each.

@incanus incanus self-assigned this Jan 12, 2017
@incanus
Copy link
Contributor Author

incanus commented Jan 13, 2017

Re: #6779 (comment), I'm going to sidestep anything related to style classes right now due to #5948 (comment).

Instead, I'm working on global/per-map setters & getters that can be used for broad style URL changes as well as runtime styling. I've confirmed that such things work when set globally (so, you could set a global duration of five seconds, then change a runtime styling property and see it animate in over that duration).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Android Mapbox Maps SDK for Android feature GL JS parity For feature parity with Mapbox GL JS iOS Mapbox Maps SDK for iOS macOS Mapbox Maps SDK for macOS runtime styling
Projects
None yet
Development

No branches or pull requests

2 participants