如何在传单中为 setView 动画使用自定义三次贝塞尔曲线？答案

【问题标题】：How do I use a custom cubic bezier for setView animations in leaflet?如何在传单中为 setView 动画使用自定义三次贝塞尔曲线？
【发布时间】：2019-07-04 05:17:53
【问题描述】：

在 Leaflet 中执行动画 setView() 时，我想使用自定义三次贝塞尔曲线。我在Leaflet's pan options 中发现了easeLinearity，但这只会改变三次贝塞尔曲线的第三个参数：

平移动画缓动的曲率因子（三次贝塞尔曲线的第三个参数）。 1.0表示线性动画，这个数字越小，曲线越弯曲。

我尝试使用easeLinearity 选项，但感觉不对。

我正在寻找的是一种使用“缓入”或“缓入”类型缓动的方法，甚至是完全定制的三次贝塞尔曲线。有人知道实现这一目标的方法吗？

【问题讨论】：

标签： javascript leaflet easing

【解决方案1】：

缓出平移动画位于this very particular piece of code:

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

要切换到自定义缓动功能，您应该：

继承 L.PosAnimation 并覆盖 _step() 或 _easeOut() 私有方法。
L.Map spawn an instance of L.PosAnimation 的所有实例。通过将您的子类的一个实例注入到您的L.Map 实例的（私有）_panAnim 属性中来覆盖它，最好在任何平移动画发生之前。

它很脏，很hackish，但它是可能的。

【讨论】：

更新：我最终改写了 flyTo() 方法，因为子类化 L.PosAnimation 只是工作的一半。事实证明，Leaflet 仅在执行 panTo() 时使用 L.PosAnimation，setView() 在缩放级别保持不变时使用。通过覆盖flyTo()，我只需要修改一个同时处理平移和缩放的函数。这让我有能力使用 GSAP 让flyTo() 感觉非常棒！我只用function easeInOut(t) { return Power3.easeInOut.getRatio(t); }替换了function easeOut(t) { return 1 - Math.pow(1 - t, 1.5); }