共计 1396 个字符,预计需要花费 4 分钟才能阅读完成。
高德地图 API Loca 动画的阐明
咱们在应用 Loca 制作地图动画时,外面有几个对应的动画成果,有
center
: 平移pitch
: 视角zoom
: 缩放rotation
: 旋转
来看一下代码对应的不同动画成果,就很明确的晓得动画是怎么制作的了
具体的例子能够查看这里:
https://kylebing.cn/tools/riding-map/
Loca 的官网阐明
https://lbs.amap.com/api/loca-v2/intro
center
center: {
value: POSITION.cityCenter, // 动画起点的经纬度
control: [POSITION.hanyu, POSITION.cityCenter], // 过渡中的轨迹控制点,地图上的经纬度
timing: [0.42, 0, 0.4, 1], // 动画工夫控制点
duration: 2000, // 过渡工夫,毫秒(ms)}
pitch
// 俯仰角动画
pitch: {
value: 45, // 动画起点的俯仰角度
control: [[0.3, 20], [0.4, 40]], // 控制器,x 是 0~1 的起始区间,y 是 pitch 值
timing: [0, 0, 1, 1], // 这个值是线性过渡
duration: 5000
zoom
// 缩放等级动画
zoom: {
value: 17, // 动画起点的地图缩放等级
control: [[0.4, 18], [0.6, 17]], // 控制器,x 是 0~1 的起始区间,y 是 zoom 值
timing: [0.42, 0, 0.4, 1],
duration: 5000,
}
rotation
// 旋转动画
rotation: {
value: 120, // 动画起点的地图旋转角度
control: [[0.4, 30], [0.6, 120]], // 控制器,x 是 0~1 的起始区间,y 是 rotation 值
timing: [0.42, 0, 0.4, 1],
duration: 10000,
}
组合起来就是
this.loca.viewControl.addAnimates([{
center: {
value: POSITION.cityCenter, // 动画起点的经纬度
control: [POSITION.hanyu, POSITION.cityCenter], // 过渡中的轨迹控制点,地图上的经纬度
timing: [0.42, 0, 0.4, 1], // 动画工夫控制点
duration: 2000, // 过渡工夫,毫秒(ms)},
// 俯仰角动画
pitch: {
value: 45, // 动画起点的俯仰角度
control: [[0.3, 20], [0.4, 40]], // 控制器,x 是 0~1 的起始区间,y 是 pitch 值
timing: [0, 0, 1, 1], // 这个值是线性过渡
duration: 5000,
},
// 缩放等级动画
zoom: {
value: 17, // 动画起点的地图缩放等级
control: [[0.4, 18], [0.6, 17]], // 控制器,x 是 0~1 的起始区间,y 是 zoom 值
timing: [0.42, 0, 0.4, 1],
duration: 5000,
},
// 旋转动画
rotation: {
value: 120, // 动画起点的地图旋转角度
control: [[0.4, 30], [0.6, 120]], // 控制器,x 是 0~1 的起始区间,y 是 rotation 值
timing: [0.42, 0, 0.4, 1],
duration: 10000,
}
}],()=>{})
正文完