Description of Amap API Loca animation

When we animate a map using LOCA, there are several animations that correspond to it

  • centerAs translation
  • pitchPerspective:
  • zoom: zoom
  • rotationRotation:

If you look at the different animations in the code, it’s very clear how the animations are made. Right

See here for an example:

https://kylebing.cn/tools/map/

The official description of LOCA

https://lbs.amap.com/api/loca-v2/intro

center

Center: {value: position.cityCenter, // Control: [Position. Hanyu, Position. CityCenter], // The trajectory control point in transition, Timing: [0.42, 0, 0.4, 1], // Animation time control point Duration: 2000, // Transition time, milliseconds (ms)}

pitch

Control: [[0.3, 20], [0.4, 40]], // Control: [[0.3, 20], [0.4, 40]], // Controller, x is the starting interval of 0 ~ 1, y is the pitch value: [0, 0, 1, 1], // This value is a linear duration: 5000

zoom

// Control: [[0.4, 18], [0.6, 17]], // Controller, x is the start interval of 0 ~ 1, y is the zoom value Timing: [0.42, 0, 0.4, 1], duration: 5000,}

rotation

Control: [[0.4, 30], [0.6, 120]], // Control: [[0.4, 30], [0.6, 120]], // Control: [[0.4, 30], [0.6, 120], [0.42, 0, 0.4, 1], duration: 10000,}

So the combination is

Enclosing loca. ViewControl. AddAnimates ([{center: {value: the POSITION of cityCenter, / / the latitude and longitude at the end of the animation control: [Position. Hanyu, Position. CityCenter], // The trajectory control point in transition, Timing: [0.42, 0, 0.4, 1], // Animation time control point Duration: }, // Pitch: {value: 45, // Pitch: 45, control: [[0.3, 20], [0.4, 40]], // Controller, x = 0 ~ 1 start interval, y = pitch timing: [0, 0, 1, 1], // This value is linear transition duration: 5000,}, // zoom level animation zoom: Control: [[0.4, 18], [0.6, 17]], // controller, x is the start interval of 0 ~ 1, y is the zoom value timing: [0.42, 0, 0.4, 1], duration: 5000,}, // Rotate to: {value: 120, // Control: [[0.4, 30], [0.6, 120]], / / controller, the initial interval of x is 0 ~ 1, y is the rotation value timing: [0.42, 0, 0.4, 1], duration: 10000,}}], () = > {})