Using custom camera animations
This example demonstrates animated camera movements using the Mapbox Maps SDK for Android. It includes functionalities such as setting the camera target, loading map style, and animating the camera with specific options.
The activity initializes a MapView
to display the map, creates and customizes animations for bearing, zoom, and pitch using CameraAnimatorOptions
, and applies a sequential animation to the camera movement. The camera is targeted to a specific geographic point defined by longitude and latitude coordinates, with the animation interpolator set to AccelerateDecelerateInterpolator
for smooth transition effects. Additionally, the animation durations and starting values for zoom, bearing, and pitch are configured to create a visually appealing camera movement experience.
To experiment with camera pitch, bearing, tilt, and zoom and get values to use in your code, try our Location Helper tool.
This example code is part of the Maps SDK for Android Examples App, a working Android project available on GitHub. Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
See our Run the Maps SDK for Android Examples App tutorial for step-by-step instructions.
package com.mapbox.maps.testapp.examples.camera
import android.os.Bundle
import android.view.animation.AccelerateDecelerateInterpolator
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Point
import com.mapbox.maps.MapView
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Style
import com.mapbox.maps.dsl.cameraOptions
import com.mapbox.maps.plugin.animation.CameraAnimatorOptions.Companion.cameraAnimatorOptions
import com.mapbox.maps.plugin.animation.camera
class LowLevelCameraAnimatorActivity : AppCompatActivity() {
private lateinit var mapboxMap: MapboxMap
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = MapView(this)
setContentView(mapView)
mapboxMap = mapView.mapboxMap
mapboxMap.setCamera(CAMERA_TARGET)
mapboxMap.loadStyle(
Style.STANDARD
) {
mapView.camera.apply {
val bearing = createBearingAnimator(cameraAnimatorOptions(-45.0)) {
duration = 4000
interpolator = AccelerateDecelerateInterpolator()
}
val zoom = createZoomAnimator(
cameraAnimatorOptions(14.0) {
startValue(3.0)
}
) {
duration = 4000
interpolator = AccelerateDecelerateInterpolator()
}
val pitch = createPitchAnimator(
cameraAnimatorOptions(55.0) {
startValue(0.0)
}
) {
duration = 4000
interpolator = AccelerateDecelerateInterpolator()
}
playAnimatorsSequentially(zoom, pitch, bearing)
}
}
}
private companion object {
private val CAMERA_TARGET = cameraOptions {
center(Point.fromLngLat(-74.0060, 40.7128))
zoom(3.0)
}
}
}