MotionZoom

Et bilde som zoomer fra plassen sin til fullskjerm; dra det bort for å lukke.

WebReact NativeOverlegg

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Photo.jsx

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

Dette tar den seg av

Et klikk, Enter eller mellomrom zoomer bildet fra der det er til det fyller skjermen innenfor margin.
Den zoomede kopien starter nøyaktig slik miniatyren ser ut, med object-fit-beskjæring og hjørneradius.
zoomSrc tones inn så snart det er lastet inn.
Et klikk, Escape eller å dra bort lukker det; et raskt kast lukker også, og et kort drag fjærer tilbake.

Bruk den til

Et bilderutenett.
Et produktgalleri.
Bilder i et blogginnlegg.

Props

Prop	Type	Standard	Beskrivelse
`src`	`string`		Bildet som vises på plass.
`zoomSrc`	`string`		Et større bilde som vises når det er lastet inn; behold samme sideforhold.
`margin`	`number`	`24`	Avstand rundt det zoomede bildet i piksler.
`disabled`	`boolean`	`false`	Slår av zoom.
`onZoomChange`	`(zoomed) => void`		Kjører med `true` ved zoom inn og `false` ved lukking.
`backdropStyle`	`CSSProperties`		Inline-stil for bakgrunnen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

Overlegget finnes bare mens bildet er zoomet (en dialog i det øverste laget på nettet), så bildet kan sitte hvor som helst, selv i et avsnitt. Andre props går til img.

I React Native sender du source og zoomSource; overlegget er en gjennomsiktig Modal.

Brukt i disse eksemplene

BildefeedSveip gjennom bilder, hopp med miniatyrer, åpne et hvilket som helst bilde i fullskjerm og dra opp detaljene.MotionPagerMotionHighlightMotionZoomMotionSheet