MotionZoom

En bild som zoomar från sin plats till helskärm; dra bort den för att stänga.

WebbReact NativeÖverlägg

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Photo.jsx

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

Det här sköter den åt dig

Ett klick, Enter eller mellanslag zoomar bilden från där den är tills den fyller skärmen inom margin.
Den inzoomade kopian börjar exakt som miniatyren ser ut, med sin object-fit-beskärning och hörnradie.
zoomSrc tonas in så snart den har lästs in.
Ett klick, Escape eller att dra bort stänger den; ett snabbt kast stänger också, och en kort dragning fjädrar tillbaka.

Använd den för

Ett fotorutnät.
Ett produktgalleri.
Bilder i ett blogginlägg.

Props

Prop	Typ	Standard	Beskrivning
`src`	`string`		Bilden som visas på plats.
`zoomSrc`	`string`		En större bild som visas när den lästs in; behåll samma bildförhållande.
`margin`	`number`	`24`	Avstånd runt den inzoomade bilden i pixlar.
`disabled`	`boolean`	`false`	Stänger av zoomning.
`onZoomChange`	`(zoomed) => void`		Körs med `true` vid inzoomning och `false` vid stängning.
`backdropStyle`	`CSSProperties`		Inline-style för bakgrunden.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

Överlägget finns bara medan bilden är inzoomad (en dialog i det översta lagret på webben), så bilden kan sitta var som helst, även i ett stycke. Andra props går till img.

Skicka source och zoomSource i React Native; överlägget är en genomskinlig Modal.

Används i de här exemplen

FotoflödeSvep mellan foton, hoppa med miniatyrer, öppna valfritt foto i helskärm och dra upp dess detaljer.MotionPagerMotionHighlightMotionZoomMotionSheet