MotionZoom

O imagine care se mărește de la locul ei la ecran complet; trageți-o deoparte pentru a o închide.

WebReact NativeSuprapuneri

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul 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;
}

Cea mai scurtă utilizare

Photo.jsx

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

Ce rezolvă în locul dumneavoastră

Un clic, Enter sau Space mărește imaginea de unde se află până umple ecranul în limita margin.
Copia mărită pornește exact cum arată miniatura, cu decupajul object-fit și raza colțurilor.
zoomSrc apare treptat după ce s-a încărcat.
Un clic, Escape sau tragerea deoparte o închide; o aruncare rapidă o închide și ea, iar o tragere scurtă revine cu arc.

Folosiți-o pentru

O grilă de fotografii.
O galerie de produse.
Imagini dintr-o postare de blog.

Props

Prop	Tip	Implicit	Descriere
`src`	`string`		Imaginea afișată pe loc.
`zoomSrc`	`string`		O imagine mai mare, afișată după ce s-a încărcat; păstrați același raport de aspect.
`margin`	`number`	`24`	Spațiul lăsat în jurul imaginii mărite, în pixeli.
`disabled`	`boolean`	`false`	Dezactivează zoomul.
`onZoomChange`	`(zoomed) => void`		Rulează cu `true` la mărire și cu `false` la închidere.
`backdropStyle`	`CSSProperties`		Stil inline pentru fundal.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Suprapunerea există doar cât e mărită (un dialog în stratul superior pe web), așa că imaginea poate sta oriunde, chiar și într-un paragraf. Celelalte props merg la img.

În React Native transmiteți source și zoomSource; suprapunerea este un Modal transparent.

Folosită în aceste exemple

Flux de fotografiiGlisați printre fotografii, săriți cu miniaturi, deschideți orice fotografie pe tot ecranul și trageți în sus detaliile.MotionPagerMotionHighlightMotionZoomMotionSheet