MotionZoom

Kuva, joka zoomautuu paikaltaan koko näytölle; sulje vetämällä se pois.

WebReact NativePeitot

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Photo.jsx

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

Mitä se hoitaa puolestasi

Napsautus, Enter tai Space zoomaa kuvan paikaltaan täyttämään näytön margin-arvon sisällä.
Zoomattu kopio alkaa täsmälleen pikkukuvan näköisenä, sen object-fit-rajauksella ja kulmasäteellä.
zoomSrc häivytetään esiin, kun se on latautunut.
Napsautus, Esc tai pois vetäminen sulkee sen; nopea heitto sulkee myös, ja lyhyt veto palaa jousella.

Käytä sitä

Valokuvaruudukko.
Tuotegalleria.
Blogikirjoituksen kuvat.

Props

Prop	Tyyppi	Oletus	Kuvaus
`src`	`string`		Paikallaan näytettävä kuva.
`zoomSrc`	`string`		Suurempi kuva, joka näytetään latauduttuaan; säilytä sama kuvasuhde.
`margin`	`number`	`24`	Zoomatun kuvan ympärille jätettävä tila pikseleinä.
`disabled`	`boolean`	`false`	Poistaa zoomauksen käytöstä.
`onZoomChange`	`(zoomed) => void`		Suoritetaan `true`-arvolla zoomattaessa ja `false`-arvolla suljettaessa.
`backdropStyle`	`CSSProperties`		Taustan inline-tyyli.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Peitto on olemassa vain zoomattuna (webissä ylimmän tason dialogi), joten kuva voi olla missä tahansa, jopa kappaleen sisällä. Muut props-arvot menevät img-elementille.

React Nativessa anna source ja zoomSource; peitto on läpinäkyvä Modal.

Käytetty näissä esimerkeissä

KuvasyötePyyhkäise kuvien läpi, hyppää pikkukuvilla, avaa mikä tahansa kuva koko näytölle ja vedä sen tiedot ylös.MotionPagerMotionHighlightMotionZoomMotionSheet