Aggiungere animazioni del percorso della videocamera

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere animazioni del percorso della videocamera alla tua mappa 3D per offrire un'esperienza più coinvolgente ai tuoi utenti. Le animazioni del percorso della videocamera possono volare verso un punto, ruotare intorno a un punto o essere combinate per animare la Camera verso un punto sulla mappa, inclusa la specifica della sua altitudine e altitudeMode.

Quando configuri un Camera per un'animazione, puoi impostare la proprietà altitudeMode per specificare come viene interpretata l'altitudine della videocamera:

  • AltitudeMode.absolute: interpreta l'altitudine come metri sopra il livello medio del mare (il valore predefinito se non specificato).
  • AltitudeMode.relativeToGround: interpreta l'altitudine come metri sopra la superficie del terreno nel punto centrale della videocamera.
  • AltitudeMode.relativeToMesh: interpreta l'altitudine come metri sopra la superficie della mesh 3D più alta (ad esempio edifici o terreno) nel punto centrale della videocamera.

Vai su

L'esempio di codice seguente mostra come utilizzare il flyCameraTo modificatore per animare la Camera in modo che voli verso un punto specifico su una mappa 3D.

Map(mode: .hybrid)
  .flyCameraTo(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 4000,
      altitudeMode: .relativeToGround
    ),
    duration: 5,
    trigger: animate,
    completion: {}
  )

Ruota intorno a

L'esempio di codice seguente mostra come utilizzare il flyCameraAround modificatore per animare la Camera in modo che ruoti intorno a un punto specifico su una mappa 3D.

Map(mode: .hybrid)
  .flyCameraAround(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 3000,
      altitudeMode: .relativeToGround
    ),
    duration: 90,
    repeatCount: 3,
    trigger: flyAround,
    completion: {}
  )