How do I use a custom cubic bezier for setView animations in leaflet?

Question

I'd like to use a custom cubic bezier when performing an animated setView() in Leaflet. I found out about easeLinearity in Leaflet's pan options, but that only changes the third parameter of a cubic bezier curve:

The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, and the smaller this number, the more bowed the curve.

I tried using the easeLinearity option, but it just doesn't feel right.

What I'm looking for is a way to use an 'ease-in' or 'ease-in-out' type easing, or even a completely customized cubic bezier. Does anybody know a way to achieve this?

Answer 1

The ease-out pan animation lives in this very particular piece of code:

_easeOut: function (t) {
    return 1 - Math.pow(1 - t, this._easeOutPower);
}

In order to switch to a custom easing function, you should:

• Subclass L.PosAnimation and override either the _step() or the _easeOut() private methods.
• All instances of L.Map spawn an instance of L.PosAnimation. Override this by injecting an instance of your subclass into the (private) _panAnim property of your L.Map instance, preferably before any pan animation happens.

It's dirty, it's hackish, but it's possible.