MotionZoom

Une image qui s’agrandit depuis sa place jusqu’au plein écran ; faites-la glisser pour la fermer.

WebReact NativeSuperpositions

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

App.jsx

import { MotionZoom, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Small generated landscapes, so the example needs no image files.
function landscape(sky, hill, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
    <rect width="300" height="200" fill="${sky}"/>
    <circle cx="220" cy="62" r="26" fill="${sun}"/>
    <path d="M0 150 Q80 90 160 140 T300 120 V200 H0Z" fill="${hill}"/>
    <path d="M0 175 Q110 130 200 170 T300 160 V200 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  landscape('#eaf6f0', '#43c58f', '#ffffff'),
  landscape('#cfe8dc', '#176b52', '#f4faf7'),
  landscape('#176b52', '#2e8f6d', '#eaf6f0'),
  landscape('#f4faf7', '#2e8f6d', '#43c58f'),
  landscape('#0e2e24', '#176b52', '#43c58f'),
  landscape('#43c58f', '#176b52', '#ffffff'),
];

export default function App({ margin = 24, radius = 14, spring = 'default' }) {
  return (
    <div className="stage">
      <div className="grid">
        {photos.map((photo) => (
          <MotionZoom
            key={photo}
            src={photo}
            width={300}
            height={200}
            margin={margin}
            transition={motionTokens.spring[spring]}
            style={{ borderRadius: radius }}
            className="photo"
          />
        ))}
      </div>
      <p className="hint">Click a photo. Drag it away, click or press Escape to close.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Usage minimal

Photo.jsx

<MotionZoom
  src={photo.thumb}
  zoomSrc={photo.full}
  width={240}
  height={160}
  style={{ objectFit: 'cover', borderRadius: 12 }}
/>;

Ce qu’il gère pour vous

Un clic, Entrée ou Espace agrandit l’image depuis sa position jusqu’à remplir l’écran dans les limites de margin.
La copie agrandie commence exactement comme la vignette, avec son recadrage object-fit et son rayon d’angle.
zoomSrc apparaît en fondu une fois chargée.
Un clic, Échap ou un glisser la referme ; un lancer rapide aussi, et un glisser court revient avec un ressort.

À utiliser pour

Une grille de photos.
Une galerie de produits.
Des images dans un article de blog.

Props

Prop	Type	Défaut	Description
`src`	`string`		L’image affichée en place.
`zoomSrc`	`string`		Une image plus grande affichée une fois chargée ; gardez le même rapport d’aspect.
`margin`	`number`	`24`	Espace conservé autour de l’image agrandie, en pixels.
`disabled`	`boolean`	`false`	Désactive le zoom.
`onZoomChange`	`(zoomed) => void`		S’exécute avec `true` à l’agrandissement et `false` à la fermeture.
`backdropStyle`	`CSSProperties`		Style en ligne du fond.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

La superposition n’existe que pendant le zoom (un dialog de la couche supérieure sur le web) : l’image peut donc se trouver n’importe où, même dans un paragraphe. Les autres props vont à l’img.

Sur React Native, passez source et zoomSource ; la superposition est un Modal transparent.

Utilisé dans ces exemples

Fil de photosFaites défiler les photos, sautez de l’une à l’autre avec les vignettes, ouvrez n’importe quelle photo en plein écran et remontez ses détails.MotionPagerMotionHighlightMotionZoomMotionSheet