MotionZoom

Un’immagine che si ingrandisce dal suo posto a schermo intero; trascinala via per chiuderla.

WebReact NativeOverlay

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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;
}

L’uso più breve

Photo.jsx

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

Di che cosa si occupa al posto tuo

Un clic, Invio o Spazio ingrandisce l’immagine da dove si trova fino a riempire lo schermo entro margin.
La copia ingrandita parte esattamente com’è la miniatura, con il ritaglio di object-fit e il raggio degli angoli.
zoomSrc compare in dissolvenza appena è caricata.
Un clic, Esc o un trascinamento la chiudono; la chiude anche un lancio rapido, mentre un trascinamento breve torna indietro con una molla.

Usalo per

Una griglia di foto.
Una galleria di prodotti.
Immagini dentro un articolo del blog.

Props

Prop	Tipo	Predefinito	Descrizione
`src`	`string`		L’immagine mostrata al suo posto.
`zoomSrc`	`string`		Un’immagine più grande mostrata appena è caricata; mantieni le stesse proporzioni.
`margin`	`number`	`24`	Spazio lasciato attorno all’immagine ingrandita, in pixel.
`disabled`	`boolean`	`false`	Disattiva lo zoom.
`onZoomChange`	`(zoomed) => void`		Viene eseguito con `true` quando è ingrandita e con `false` quando si chiude.
`backdropStyle`	`CSSProperties`		Stile inline per lo sfondo.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

L’overlay esiste solo durante lo zoom (sul web, una dialog nel top layer), quindi l’immagine può stare ovunque, anche dentro un paragrafo. Le altre props vanno all’img.

Su React Native passa source e zoomSource; l’overlay è un Modal trasparente.

Usato in questi esempi

Feed di fotoScorri tra le foto, salta con le miniature, apri qualsiasi foto a schermo intero e tira su i suoi dettagli.MotionPagerMotionHighlightMotionZoomMotionSheet