如何在传单中为 setView 动画使用自定义立方贝塞尔曲线?
How do I use a custom cubic bezier for setView animations in leaflet?
我想在 Leaflet 中执行动画 setView()
时使用自定义立方贝塞尔曲线。我在 Leaflet's pan options 中发现了 easeLinearity
,但这只会改变三次贝塞尔曲线的第三个参数:
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.
我尝试使用 easeLinearity
选项,但感觉不对。
我正在寻找的是一种使用 'ease-in' 或 'ease-in-out' 类型的缓动,甚至是完全自定义的立方贝塞尔曲线的方法。有人知道实现此目标的方法吗?
缓出平移动画存在于 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
属性 来覆盖它,最好是在 之前 任何平移动画发生。
这很脏,很黑,但这是可能的。
我想在 Leaflet 中执行动画 setView()
时使用自定义立方贝塞尔曲线。我在 Leaflet's pan options 中发现了 easeLinearity
,但这只会改变三次贝塞尔曲线的第三个参数:
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.
我尝试使用 easeLinearity
选项,但感觉不对。
我正在寻找的是一种使用 'ease-in' 或 'ease-in-out' 类型的缓动,甚至是完全自定义的立方贝塞尔曲线的方法。有人知道实现此目标的方法吗?
缓出平移动画存在于 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 ofL.PosAnimation
的所有实例。通过将子类的一个实例注入L.Map
实例的(私有)_panAnim
属性 来覆盖它,最好是在 之前 任何平移动画发生。
这很脏,很黑,但这是可能的。