MotionZoom

Gambar yang membesar dari tempatnya ke layar penuh; seret menjauh untuk menutup.

WebReact NativeOverlay

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Photo.jsx

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

Yang ditanganinya untuk Anda

Klik, Enter, atau Space membesarkan gambar dari tempatnya hingga memenuhi layar di dalam margin.
Salinan yang diperbesar dimulai persis seperti tampilan thumbnail, dengan potongan object-fit dan radius sudutnya.
zoomSrc muncul perlahan setelah dimuat.
Klik, Escape, atau menyeret menjauh menutupnya; lemparan cepat juga menutup, dan seretan pendek memantul kembali.

Gunakan untuk

Grid foto.
Galeri produk.
Gambar di dalam artikel blog.

Props

Prop	Tipe	Bawaan	Deskripsi
`src`	`string`		Gambar yang ditampilkan di tempatnya.
`zoomSrc`	`string`		Gambar lebih besar yang ditampilkan setelah dimuat; pertahankan rasio aspek yang sama.
`margin`	`number`	`24`	Ruang di sekitar gambar yang diperbesar dalam piksel.
`disabled`	`boolean`	`false`	Mematikan zoom.
`onZoomChange`	`(zoomed) => void`		Berjalan dengan `true` saat diperbesar dan `false` saat ditutup.
`backdropStyle`	`CSSProperties`		Gaya inline untuk backdrop.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Overlay hanya ada selama diperbesar (dialog top layer di web), jadi gambar bisa berada di mana saja, bahkan di dalam paragraf. Semua props lain diteruskan ke img.

Di React Native, berikan source dan zoomSource; overlay-nya Modal transparan.

Dipakai di contoh-contoh ini

Feed fotoGeser foto, lompat dengan thumbnail, buka foto mana pun di layar penuh, dan tarik detailnya ke atas.MotionPagerMotionHighlightMotionZoomMotionSheet