最近在看天地图,发现天地图的 panTo 没有动画效果支持,因此在 ai 的帮助下写了一个 smoothMove 缓动函数, 使用 easeInOutCubic 这种方式缓动,即先慢,然后快,然后再慢,感觉效果比较好。
本函数是用ts写的,要转成js也很容易。
/**
* 平滑移动地图到指定位置和缩放级别(使用 easeInOutCubic 缓动函数优化动画效果)
* @param map 天地图实例
* @param targetLngLat 目标经纬度对象
* @param targetZoom 目标缩放级别,设置为0则不进行缩放
* @param duration 动画持续时间(毫秒,默认1000ms)
*/
function smoothMove(
map: any,
targetLngLat: T.LngLat,
targetZoom: number,
duration: number = 500
): void {
const startCenter: T.LngLat = map.getCenter();
const startZoom: number = map.getZoom();
const startTime: number = Date.now();
if(targetZoom == 0) targetZoom = startZoom;
// 添加缓动函数 - easeInOutCubic(开始和结束慢,中间快)
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
};
// 动画帧回调函数
const animate = (): void => {
const elapsed: number = Date.now() - startTime;
let progress: number = Math.min(elapsed / duration, 1);
// 应用缓动函数转换进度(实现非线性动画)
const easedProgress = easeInOutCubic(progress);
// 位置插值计算(使用缓动后的进度)
const lng: number = startCenter.lng + (targetLngLat.lng - startCenter.lng) * easedProgress;
const lat: number = startCenter.lat + (targetLngLat.lat - startCenter.lat) * easedProgress;
// 缩放级别插值
const zoom: number = startZoom + (targetZoom - startZoom) * easedProgress;
// 更新地图视图(中心点和缩放级别)
map.panTo(new T.LngLat(lng, lat), zoom);
// 递归调用直到动画完成
if (progress < 1) {
requestAnimationFrame(animate);
}
};
animate(); // 启动动画
}
1242

被折叠的 条评论
为什么被折叠?



