高德地图 API Loca 动画的说明

高德地图 API Loca 动画的说明

我们在使用 Loca 制作地图动画时，里面有几个对应的动画效果，有

• center: 平移
• pitch: 视角
• zoom: 缩放
• rotation: 旋转

来看一下代码对应的不同动画效果，就很明确的知道动画是怎样制作的了

具体的例子可以查看这里：

https://kylebing.cn/tools/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,
    }
}],()=>{})