MotionZoom

Et billede, der zoomer fra sin plads til fuld skærm; træk det væk for at lukke.

WebReact NativeOverlays

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Photo.jsx

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

Det klarer den for dig

Et klik, Enter eller mellemrum zoomer billedet fra, hvor det er, til det fylder skærmen inden for margin.
Den zoomede kopi starter præcis, som miniaturen ser ud, med sin object-fit-beskæring og hjørneradius.
zoomSrc toner ind, så snart det er indlæst.
Et klik, Escape eller at trække væk lukker det; et hurtigt kast lukker også, og et kort træk fjedrer tilbage.

Brug den til

Et fotogitter.
Et produktgalleri.
Billeder i et blogindlæg.

Props

Prop	Type	Standard	Beskrivelse
`src`	`string`		Billedet, der vises på stedet.
`zoomSrc`	`string`		Et større billede, der vises, når det er indlæst; behold samme billedformat.
`margin`	`number`	`24`	Afstand omkring det zoomede billede i pixels.
`disabled`	`boolean`	`false`	Slår zoom fra.
`onZoomChange`	`(zoomed) => void`		Kører med `true` ved zoom ind og `false` ved lukning.
`backdropStyle`	`CSSProperties`		Inline-style til baggrunden.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

Overlayet findes kun, mens der er zoomet ind (en dialog i det øverste lag på nettet), så billedet kan sidde hvor som helst, selv i et afsnit. Andre props går til img.

Giv source og zoomSource i React Native; overlayet er en gennemsigtig Modal.

Brugt i disse eksempler

FotofeedSwipe gennem fotos, hop med miniaturer, åbn et vilkårligt foto i fuld skærm, og træk dets detaljer op.MotionPagerMotionHighlightMotionZoomMotionSheet