メインコンテンツまでスキップ

Animations

Camera animations move around the view of the map and change the user's perspective and orientation.

To change the user's perspective the camera settings are updated over a period of time. The Maps SDK for Flutter provides expressive ways of controlling these animations. For example, you can animate the camera to move to a new center location and to update the bearing, pitch, zoom, padding, and anchor. Each of these camera properties can be animated independently through the Maps SDK camera animation system.

Animation Limits

Only one animation instance per camera setting type can run at a time. For example, if an animator that changes the camera's bearing is running, then starting another bearing operator at the same time will cancel the first one and then start running the new one instead. This prevents the map from jumping between two or more animators of the same type. The code in the completion block will be called upon the animation's cancellation.

Animation types

Using animations to change camera values

If you use mapboxMap.setCamera() to change camera values instead of using an animator, the camera position will change abruptly to the new values instead of an animated change.

The Maps SDK has a set of ready-to-use functions for animating map camera transitions. These high-level APIs allow you to implement animations quickly, but have limited options for customization. The Maps SDK provides a few built-in animation types:

  • flyTo() changes the camera's position from the old values to the new values using a combination of zooming and panning in an animated transition that evokes flight.
  • easeTo() gradually changes the camera's position with an animated transition from the old values to the new values.
FlyTo
EaseTo

For both, you pass the new CameraOptions you want to set and MapAnimationOptions to determine the duration and delay for the animation. For example:

mapboxMap.flyTo(
CameraOptions(
anchor: ScreenCoordinate(x: 34.43, y: 53.43),
zoom: 17,
bearing: 180,
pitch: 30),
MapAnimationOptions(duration: 2000, startDelay: 0));

Note that only one animation can run at a time. If an animation starts while another animation is already running, the running animation will be canceled even if the new animation only changes map camera parameters the running one does not use.

このpageは役に立ちましたか?