MotionZoom

Slika, ki se poveča s svojega mesta na celoten zaslon; povlecite jo stran, da jo zaprete.

SpletReact NativePrekrivni elementi

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Photo.jsx

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

Kaj uredi namesto vas

Klik, Enter ali Space sliko poveča od tam, kjer je, da zapolni zaslon znotraj margin.
Povečana kopija se začne natanko tako, kot je videti sličica, z obrezovanjem object-fit in polmerom vogalov.
zoomSrc se postopno prikaže, ko se naloži.
Klik, Escape ali vlečenje stran jo zapre; zapre jo tudi hiter met, kratko vlečenje pa se z vzmetjo vrne.

Uporabite jo za

Mreža fotografij.
Galerija izdelkov.
Slike v objavi na blogu.

Props

Prop	Tip	Privzeto	Opis
`src`	`string`		Slika, prikazana na mestu.
`zoomSrc`	`string`		Večja slika, prikazana, ko se naloži; ohranite isto razmerje stranic.
`margin`	`number`	`24`	Prostor okoli povečane slike v pikslih.
`disabled`	`boolean`	`false`	Izklopi povečavo.
`onZoomChange`	`(zoomed) => void`		Se izvede s `true` ob povečavi in s `false` ob zaprtju.
`backdropStyle`	`CSSProperties`		Vrstični slog za ozadje.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Prekrivni element obstaja le med povečavo (na spletu pogovorno okno v zgornji plasti), zato je slika lahko kjer koli, celo v odstavku. Druge props gredo img.

V React Nativu podajte source in zoomSource; prekrivni element je prozoren Modal.

Uporabljeno v teh primerih

Vir fotografijListajte po fotografijah s potegom, skačite s sličicami, odprite katero koli fotografijo na celoten zaslon in povlecite navzgor njene podrobnosti.MotionPagerMotionHighlightMotionZoomMotionSheet