目录

Class (Animation)

Modules to Import

import { map } from '@kit.MapKit';

Animation

Animation abstract class. This class is used to control the animation effects of map elements, supporting multiple animation types such as rotation, scaling, and translation. It is ideal for scenarios like enhanced map interactions and path animation displays.

The default animation duration is 250 milliseconds.

The default status after the animation ends is AnimationFillMode.FORWARDS.

The default animation interpolator is Curve.Linear.

The default number of times an animation is replayed is 0.

The default animation replay mode is AnimationRepeatMode.RESTART.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Example:

let animation = new map.RotateAnimation(0, 270);
// Animation execution duration.
animation.setDuration(2000);

// Status after the animation ends.
animation.setFillMode(map.AnimationFillMode.BACKWARDS);

// Animation replay mode.
animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);

// Number of times an animation is replayed.
animation.setRepeatCount(100);

// Set the animation listener based on the development requirements.
let callbackStart = () => {
  console.info("animationStart", `callback`);
};
let callbackEnd = () => {
  console.info("animationEnd", `callback`);
};
animation.on("animationStart", callbackStart);
animation.on("animationEnd", callbackEnd);

[h2]setDuration

setDuration(duration: number): void

Sets the animation duration.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
duration number Yes Animation duration, in milliseconds. The value must be greater than or equal to 0. Invalid values are not processed.

Example:

animation.setDuration(3000);

[h2]setFillMode

setFillMode(fillMode: AnimationFillMode): void

Sets the status after the animation ends.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
fillMode AnimationFillMode Yes Status after the animation ends.

Example:

animation.setFillMode(map.AnimationFillMode.BACKWARDS);

[h2]setInterpolator

setInterpolator(curve: Curves.Curve): void

Sets an animation interpolator.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
curve Curves.Curve Yes Animation interpolator.

Example:

animation.setInterpolator(Curve.Linear);

[h2]setRepeatCount

setRepeatCount(repeatCount: number): void

Sets the number of times that an animation is replayed.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
repeatCount number Yes

Number of times that an animation is replayed.

Positive number: The animation will be replayed for the number of times specified by this parameter.

0: The animation is not replayed.

-1: The animation is replayed an unlimited number of times.

If the passed value is less than –1 or is invalid, the default value 0 is used.

Example:

animation.setRepeatCount(100);

[h2]setRepeatMode

setRepeatMode(repeatMode: AnimationRepeatMode): void

Sets the animation replay mode. By default, the animation is replayed from the start.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
repeatMode AnimationRepeatMode Yes Animation replay mode.

Example:

animation.setRepeatMode(map.AnimationRepeatMode.RESTART);

[h2]on('start')

on(type: 'start', callback: Callback<void>): void

Listens for animation start events. This API uses an asynchronous callback to return the result.

You are advised to use animation.on(type: 'animationStart').

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
type string Yes 'start': animation start event.
callback Callback<void> Yes Callback that returns no value.

Example:

animation.on("start", () => {
  console.info(`start alphaAnimation`);
});

[h2]off('start')

off(type: 'start', callback: Callback<void>): void

Cancels the listening for animation start events. This API uses an asynchronous callback to return the result.

You are advised to use animation.off(type: 'animationStart').

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
type string Yes 'start': animation start event.
callback Callback<void> Yes Callback that returns no value.

Example:

animation.off("start", () => {
  console.info(`start alphaAnimation`);
});

[h2]on('end')

on(type: 'end', callback: Callback<void>): void

Listens for animation end events. This API uses an asynchronous callback to return the result.

You are advised to use animation.on(type: 'animationEnd').

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
type string Yes 'end': animation end event.
callback Callback<void> Yes Callback that returns no value.

Example:

animation.on("end", () => {
  console.info(`end alphaAnimation`);
});

[h2]off('end')

off(type: 'end', callback: Callback<void>): void

Cancels the listening for animation end events. This API uses an asynchronous callback to return the result.

You are advised to use animation.off(type: 'animationEnd').

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 4.1.0(11).

System capability: SystemCapability.Map.Core

Since: 4.1.0(11)

Parameters:

Name Type Mandatory Description
type string Yes 'end': animation end event.
callback Callback<void> Yes Callback that returns no value.

Example:

animation.off("end", () => {
  console.info(`end alphaAnimation`);
});

[h2]on('animationStart')

on(type: 'animationStart', callback: Callback<void>): void

Listens for animation start events. This API can use multiple asynchronous callbacks to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 5.0.0(12).

System capability: SystemCapability.Map.Core

Since: 5.0.0(12)

Parameters:

Name Type Mandatory Description
type string Yes 'animationStart': animation start event.
callback Callback<void> Yes Callback that returns no value. This callback is used to listen for animation start events.

Example:

let callback1 = () => {
  console.info("animationStart", `callback1`);
};
let callback2 = () => {
  console.info("animationStart", `callback2`);
};
let callback3 = () => {
  console.info("animationStart", `callback3`);
};
animation.on("animationStart", callback1);
animation.on("animationStart", callback2);
animation.on("animationStart", callback3);

[h2]off('animationStart')

off(type: 'animationStart', callback?: Callback<void>): void

Cancels the listening for animation start events. This API can use multiple asynchronous callbacks to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 5.0.0(12).

System capability: SystemCapability.Map.Core

Since: 5.0.0(12)

Parameters:

Name Type Mandatory Description
type string Yes 'animationStart': animation start event.
callback Callback<void> No

Callback that returns no value. This callback is used to cancel the listening for animation start events.

- If callback is null, cancel all callbacks.

- If callback is not null, cancel the specified callback.

Example:

let callback1 = () => {
  console.info("animationStart", `callback1`);
};
let callback2 = () => {
  console.info("animationStart", `callback2`);
};
let callback3 = () => {
  console.info("animationStart", `callback3`);
};
animation.on("animationStart", callback1);
animation.on("animationStart", callback2);
animation.on("animationStart", callback3);

// Cancel only the event response of the callback1 object. When a animationStart event occurs, callback2 and callback3 will be called.
animation.off('animationStart', callback1);
// Cancel all animationStart event responses.
animation.off('animationStart');

[h2]on('animationEnd')

on(type: 'animationEnd', callback: Callback<void>): void

Listens for animation end events. This API can use multiple asynchronous callbacks to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 5.0.0(12).

System capability: SystemCapability.Map.Core

Since: 5.0.0(12)

Parameters:

Name Type Mandatory Description
type string Yes 'animationEnd': animation end event.
callback Callback<void> Yes Callback that returns no value. This callback is used to listen for animation end events.

Example:

let callback1 = () => {
  console.info("animationEnd", `callback1`);
};
let callback2 = () => {
  console.info("animationEnd", `callback2`);
};
let callback3 = () => {
  console.info("animationEnd", `callback3`);
};
animation.on("animationEnd", callback1);
animation.on("animationEnd", callback2);
animation.on("animationEnd", callback3);

[h2]off('animationEnd')

off(type: 'animationEnd', callback?: Callback<void>): void

Cancels the listening for animation end events. This API can use multiple asynchronous callbacks to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since version 5.0.0(12).

System capability: SystemCapability.Map.Core

Since: 5.0.0(12)

Parameters:

Name Type Mandatory Description
type string Yes 'animationEnd': animation end event.
callback Callback<void> No

Callback that returns no value. This callback is used to cancel the listening for animation end events.

- If callback is null, cancel all callbacks.

- If callback is not null, cancel the specified callback.

Example:

let callback1 = () => {
  console.info("animationEnd", `callback1`);
};
let callback2 = () => {
  console.info("animationEnd", `callback2`);
};
let callback3 = () => {
  console.info("animationEnd", `callback3`);
};
animation.on("animationEnd", callback1);
animation.on("animationEnd", callback2);
animation.on("animationEnd", callback3);

// Cancel only the event response of the callback1 object. When a animationEnd event occurs, callback2 and callback3 will be called.
animation.off('animationEnd', callback1);
// Cancel all animationEnd event responses.
animation.off('animationEnd');