A library of map related animations.
The following static methods are exposed on the
||PlayableAnimation||Adds an offset array property to point shapes and animates it's y value to simulate dropping. Use with a symbol layer with the icon/text offset property set to ['get', 'offset'].|
||PlayableAnimation||Animates a Point shape along a path.|
||GroupAnimation||Plays an array of animations at the same time.|
||GroupAnimation||Plays an array of animations one by one based on an interval.|
||GroupAnimation||Plays an array of animations sequentially.|
||PlayableAnimation||Animates the update of coordinates on a shape. Shapes will stay the same type. Currently supports Point shapes.|
||PlayableAnimation||Animates the path of a LineString.|
Classes and Option interfaces
The following classes and option interfaces are exposed on the
Group animation handler.
||When called, will prevent any animation that hasn't already started in the group animation from starting.|
||Stops all animations and jumps to the final state of each animation.|
An abstract class which defines an animation that supports a play function.
||Plays the animation.|
||Stops the animation and jumps to the final state of the animation.|
||boolean||Specifies if the animation should start automatically or wait for the play function to be called.|
||number||The duration of the animation in ms. Default: 100 ms|
||string||The easing of the animaiton.|
Extends the BaseAnimationOptions object.
||boolean||Specifies if metadata should be captured as properties of the shape. Potential metadata properties that may be captured: _heading|
||boolean||Specifies if a curved geodesic path should be used between points rather than a straight pixel path. Default: false|
|linear||linear easing function.|
|easeInSine||Slight acceleration from zero to full speed.|
|easeOutSine||Slight deceleration at the end.|
|easeInOutSine||Slight acceleration at beginning and slight deceleration at end.|
|easeInQuad||Accelerating from zero velocity.|
|easeOutQuad||Decelerating to zero velocity.|
|easeInOutQuad||Acceleration until halfway, then deceleration.|
|easeInCubic||Accelerating from zero velocity.|
|easeOutCubic||Decelerating to zero velocity.|
|easeInOutCubic||Acceleration until halfway, then deceleration.|
|easeInQuart||Accelerating from zero velocity.|
|easeOutQuart||Decelerating to zero velocity.|
|easeInOutQuart||Acceleration until halfway, then deceleration.|
|easeInQuint||Accelerating from zero velocity.|
|easeOutQuint||Decelerating to zero velocity.|
|easeInOutQuint||Acceleration until halfway, then deceleration.|
|easeInExpo||Accelerate exponentially until finish.|
|easeOutExpo||Initial exponential acceleration slowing to stop.|
|easeInOutExpo||Exponential acceleration and deceleration.|
|easeInCirc||Increasing velocity until stop.|
|easeOutCirc||Start fast, decreasing velocity until stop.|
|easeInOutCirc||Fast increase in velocity, fast decrease in velocity.|
|easeInBack||Slow movement backwards then fast snap to finish.|
|easeOutBack||Fast snap to backwards point then slow resolve to finish.|
|easeInOutBack||Slow movement backwards, fast snap to past finish, slow resolve to finish.|
|easeInElastic||Bounces slowly then quickly to finish.|
|easeOutElastic||Fast acceleration, bounces to zero.|
|easeInOutElastic||Slow start and end, two bounces sandwich a fast motion.|
|easeOutBounce||Bounce to completion.|
|easeInBounce||Bounce increasing in velocity until completion.|
|easeInOutBounce||Bounce in and bounce out.|
TODO - Roadmap
- Allow looping of animations.
- Add additional types of shape animations.
- translate line/polygons?
- point drop in?
- GPX animation?
- route animation (points include speed and possibly acceleration)
- Add property animation support for shapes and layers.
- tween/morph line/polygons on setCoordinates.
- Time series animations
- Animated tile layers
- Expanding/collapsing circle mask
- Wrap map events and expose as playable animations.
- Add easing examples, update animation options sample.
- Events - onProgress, onEnd, on data point
- Support for play, pause, stop for some animations.
- Turn into a generic animation library.
- Consider reducing animated shapes classes down to a single class.
- Expose easings as strings or function.
- Consider removing type option from shape animation and automatically choose one based on the coordinate input.
- Async animations for sequences of a set of animations.
- Add support for adding group animations into ply/playSeq/playInterval. Then we can mix an match to create long running complex combinations of animations.