头图

高德地图 API Loca 动画的说明

KyleBing
English

高德地图 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)
}

move.gif

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,
}

rotation-30p.gif

组合起来就是

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,
    }
}],()=>{})

combine-30p.gif

阅读 592

青枫ky
个人成长记录

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
0 条评论
你知道吗?

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
宣传栏