高德自定义镜头动画

高德自定义镜头动画效果分享：

tips:掘金居然发不了视频，代码贴上了

1、世界旋转入场动画（领导最爱）

	const curZoom = map.getZoom();
	const curPitch = map.getPitch();
	const curRotation = map.getRotation();
	const curCenter = [map.getCenter().lng, map.getCenter().lat];

	const targZoom = zoom;
	const targPitch = 40;
	const targRotation = 0;
	const targCenter = center;

	const route = [
		{
			pitch: {
				value: targPitch,
				duration: 9000,
				control: [
					[0, curPitch],
					[1, targPitch],
				],
				timing: [1.0, 0.01, 0.56, 0.995],
			},
			zoom: {
				value: targZoom,
				duration: 10000,
				control: [
					[0, curZoom],
					[1, targZoom],
				],
				timing: [0.52, 0.0, 0.29, 0.99],
			},
			rotation: {
				value: targRotation,
				duration: 7000,
				control: [
					[0, curRotation],
					[1, targRotation],
				],
				timing: [0.55, 0.005, 0.565, 1],
			},
			center: {
				value: targCenter,
				duration: 6000,
				control: [curCenter, targCenter],
				timing: [0.8, 0.85, 0.9, 0.95, 1],
			},
		},
	];

	loca.viewControl.addAnimates(route, () => {
		console.log("初始动画结束，开始调用");
		// 开始自动旋转动画
		// startAutoRotate();
	});
};

2.地点详情效果（类似mapbox效果）

// 相机动画
const cameraEnterAnimation = () => {
	// viewControl镜头动画入场
	// zoom为8，pitch为0，rotation为90  -----> zoom为12，pitch为50，rotation为0
	map.setZoom(8, true);
	map.setPitch(0, true);
	map.setRotation(180, true);

	loca.viewControl.addAnimates(
		[
			{
				pitch: {
					value: 45,
					duration: 4000,
					control: [
						[0, 0],
						[1, 45],
					],
					timing: [0, 0.2, 0.4, 0.8, 1],
				},
				zoom: {
					value: 16,
					duration: 4000,
					control: [
						[0, 8],
						[1, 12],
					],
					timing: [0, 0, 0.8, 1],
				},
				rotation: {
					value: 0,
					duration: 4000,
					control: [
						[0, 90],
						[1, 0],
					],
					timing: [0, 0, 0.8, 1],
				},
			},
		],
		() => {}
	);
};