Animer les chemins de caméras

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez ajouter des animations de trajectoires de caméra à votre carte 3D pour offrir une expérience plus immersive à vos utilisateurs. Les animations de trajectoires de caméra peuvent se déplacer vers un point de la carte ou le survoler.

L'exemple suivant combine les animations flyCameraTo et flyCameraAround :

Trajectoires de caméra prédéfinies

3D Maps dans Maps JavaScript fournit deux trajectoires de caméra prédéfinies. Vous pouvez personnaliser les trajectoires de caméra en modifiant la durée de l'animation (ce qui augmente ou diminue la vitesse) ou en les combinant pour créer des expériences plus cinématographiques. Vous pouvez également contrôler la hauteur de la caméra en spécifiant altitudeMode.

3D Maps dans Maps JavaScript est compatible avec les trajectoires de caméra suivantes :

• L'animation flyCameraTo se déplace du centre de la carte vers une destination spécifiée.
• L'animation flyCameraAround effectue le nombre de rotations spécifié autour d'un point de la carte.

Les deux trajectoires disponibles peuvent être combinées pour se déplacer vers un point d'intérêt, effectuer une rotation autour de celui-ci, puis s'arrêter lorsque cela est spécifié.

Aller à

L'exemple de code suivant montre comment animer la caméra pour qu'elle se déplace vers un lieu :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Survoler

L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Combiner des animations

L'exemple de code suivant montre comment combiner des animations pour déplacer la caméra vers un lieu, puis effectuer une rotation autour de celui-ci lorsque la première animation se termine :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}