> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ja/flutter/maps/llms.txt)

# 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.

> **Note (warning): 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.

> **Related content (playground): [Location Helper](https://labs.mapbox.com/location-helper/)**
> 
> To experiment with camera pitch, bearing, tilt, and zoom and get values to use in your code, try our *Location Helper* tool.

## Animation types

> **Note: Using animations to change camera values**
> 
> If you use [`mapboxMap.setCamera()`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/MapboxMap/setCamera.html) 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()`**](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/MapboxMap/flyTo.html) 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()`**](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/MapboxMap/easeTo.html) gradually changes the camera's position with an animated transition from the old values to the new values.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/ja/ja/assets/medias/fly-to-e4851dd04895e0f81444be727a9d3ba6.mp4).

FlyTo

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/ja/ja/assets/medias/ease-to-abe408e749ae31ac28d11a12e9bf2d2d.mp4).

EaseTo

For both, you pass the new [`CameraOptions`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/CameraOptions-class.html) you want to set and [`MapAnimationOptions`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/MapAnimationOptions-class.html) to determine the duration and delay for the animation. For example:

```dart
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.