乐趣区

关于高德地图:高德地图-API-Loca-动画的说明

jiezi

高德地图 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,
    }
}],()=>{})

退出移动版