Add the ability to progressively reveal / hide a line

[peterqliu]

Animating a line draw is a common need in routing and transportation. I've previously simulated this in GL by chopping a line into a bunch of tiny segments and feeding them in one at a time (via setData), but it would be nice to do this in a less hacky fashion.

In SVG, this is done by turning the line into an extremely long dash, applying a dash-offset property to "push" the dash off the line, and then at runtime, animating the offset to 0. Maybe we can do something similar, or a simpler approach.

cc/ @lyzidiamond

[tmcw]

This should be folded into mapbox/mapbox-gl-js#1180 - mapbox-gl-js needs animation primitives and faster setData calls. We shouldn't copy the SVG line-dash hack, which is a hack.

[lucaswoj]

It sounds like there are two separate issues in here:

1. setData performance (more of a gl-js or gl-native specific issue, hopefully being addressed in Add "skipWorker" option to GeoJSON sources [DO NOT MERGE] mapbox-gl-js#1979). This is out of scope for this repo.
2. displaying only part of a line, defined by start position and end position. This is an interesting discussion, complicated by the way geometries are sliced on tile boundaries.

[tmcw]

I don't think (2) should be considered. This is one of many potential animations: what about animating a polygon, or a line but from the other side, or from both ends? setData is the universal solution for animation and should be the sole focus.

[lucaswoj]

The underlying issue here is "we need a faster setData". That's a platform-specific challenge which we're tackling (namely in mapbox/mapbox-gl-js#1979)

[jfirebaugh]

More generally there's the question of whether setData is even a suitable primitive for animations.