MotionZoom

Ảnh phóng to từ vị trí của nó ra toàn màn hình; kéo ra xa để đóng.

WebReact NativeLớp phủ

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Photo.jsx

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

Những gì nó xử lý giúp bạn

Nhấp, Enter hoặc Space phóng ảnh từ chỗ của nó cho đến khi lấp đầy màn hình bên trong margin.
Bản phóng to bắt đầu giống hệt ảnh thu nhỏ, với cách cắt object-fit và bo góc của nó.
zoomSrc hiện dần khi đã tải xong.
Nhấp, Escape hoặc kéo ra xa sẽ đóng nó; hất nhanh cũng đóng, còn kéo ngắn sẽ bật trở lại.

Dùng cho

Lưới ảnh.
Thư viện sản phẩm.
Ảnh trong bài blog.

Props

Prop	Kiểu	Mặc định	Mô tả
`src`	`string`		Ảnh hiển thị tại chỗ.
`zoomSrc`	`string`		Ảnh lớn hơn hiển thị khi đã tải xong; hãy giữ cùng tỉ lệ khung hình.
`margin`	`number`	`24`	Khoảng trống quanh ảnh phóng to tính bằng pixel.
`disabled`	`boolean`	`false`	Tắt phóng to.
`onZoomChange`	`(zoomed) => void`		Chạy với `true` khi phóng to và `false` khi đóng.
`backdropStyle`	`CSSProperties`		Style nội tuyến cho lớp nền.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Lớp phủ chỉ tồn tại khi đang phóng to (một dialog ở top layer trên web), nên ảnh có thể nằm ở bất cứ đâu, kể cả trong một đoạn văn. Các props khác chuyển tới img.

Trên React Native, truyền source và zoomSource; lớp phủ là một Modal trong suốt.

Được dùng trong các ví dụ này

Bảng tin ảnhVuốt qua ảnh, nhảy bằng ảnh thu nhỏ, mở bất kỳ ảnh nào ra toàn màn hình và kéo lên xem chi tiết.MotionPagerMotionHighlightMotionZoomMotionSheet