MoveAnimation

A base class for animations that move point markers along lines or path trajectories, which can be used for scenarios such as trajectory playback and real-time trajectory. MoveAnimation does not need to be declared or initialized separately, as Marker, Text, and LabelMarker have all inherited the implementation of MoveAnimation

Static method

moveTo(targetPosition, opts)

Move the marker to the specified location with a given duration/speed, the AMap.MoveAnimation plugin needs to be loaded to use this feature

Parameter:

targetPosition (LngLat | Vector): The specified location supports passing in a longitude and latitude object or a one-dimensional array composed of longitude and latitude, such as: AMap.LngLat(77.19, 28.59) or [77.19, 28.59]

opts (MoveToOptions): moveTo animation parameters

Attribute	Type	Description
duration	number	Duration of each animation segment, unit: ms
speed	number	Animation speed, deprecated
easing	EasingCallback	easing timing function
autoRotation	boolean	Whether the marker direction rotates along the path, default: true

Prompt

If there is a need to rotate the marker along the path, it is recommended to use the moveTo method of the Marker

Demo:

AMap.plugin("AMap.MoveAnimation", function () {
  // After loading the AMap.MoveAnimation plugin, create a Marker instance
  const animationMarker = new AMap.Marker({ 
    position: new AMap.LngLat(77.01486, 28.602616),
  });
  map.add(animationMarker);
  // Call the moveTo method
  animationMarker.moveTo([116.356877, 39.907636], {
    duration: 2000, // 动画持续时长
  });
});

moveAlong(path, opts)

The point marker moves along the specified path for a specified duration. After loading AMap.MoveAnimation, JS API 2.0 can support segmented speed and duration settings.

Parameter:

path (Array<LngLat> | Array<Vector> | Array<MoveAlongObj>): Path array, if in doubt, please refer to the sample code below

opts (MoveAlongOptions): moveAlong animation parameters optional

Attribute	Type	Description
duration	number \| AnimationCallback	Duration of each animation segment, unit: ms
speed	number \| AnimationCallback	Animation speed, deprecated
easing	EasingCallback	Easing timing function
circlable	boolean	Whether the animation loops, default: false
delay	number \| AnimationCallback	Delay animation duration, unit: ms. If duration is set for each segment, the corresponding delay animation duration will be executed for each segment
aniInterval	number	Interval duration between complete animations
autoRotation	boolean	Whether the marker direction rotates along the path, default: true

Prompt

If there is a need to rotate the marker along the path, it is recommended to use the moveTo method of the Marker

Demo:

// Define the path
const path = [
  new AMap.LngLat(76.993574, 28.664089),
  new AMap.LngLat(76.992888, 28.621906),
  new AMap.LngLat(77.024474, 28.606836),
  new AMap.LngLat(77.092451, 28.606836),
  new AMap.LngLat(77.155623, 28.598999),
];
// 给路径分段设置动画时长
const customData = [
  { position: path[0], duration: 200 },
  { position: path[1], duration: 400 },
  { position: path[2], duration: 600 },
  { position: path[3], duration: 800 },
  { position: path[4], duration: 1000 },
];
AMap.plugin("AMap.MoveAnimation", function () {
  // After loading the AMap.MoveAnimation plugin, create a Marker instance
  const animationMarker = new AMap.Text({
    position: new AMap.LngLat(77.176909, 28.619495),
    anchor: "bottom-center",
    text: "marker",
    style: { "background-color": "red" },
  });
  // Add the Marker instance to the map
  map.add(animationMarker);
  // Call the moveAlong method
  animationMarker.moveAlong(customData, {
    circlable: true, //The animation starts looping
    aniInterval: 2000, //The interval between each complete animation is 2s
  });
});

startMove()

Start the point marker animation, point markers created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.startMove();

stopMove()

Stop the point marker animation, point markers created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.stopMove();

resumeMove()

Restart the point marker animation, point markers created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.resumeMove();