MotionZoom

รูปภาพที่ซูมจากตำแหน่งเดิมเป็นเต็มจอ ลากออกไปเพื่อปิด

เว็บReact Nativeโอเวอร์เลย์

ลองดู

กำลังเตรียมตัวอย่าง…

JavaScript ถูกปิดอยู่ โค้ดด้านล่างคือตัวอย่างฉบับสมบูรณ์

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

การใช้งานที่สั้นที่สุด

Photo.jsx

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

สิ่งที่มันจัดการให้คุณ

การคลิก Enter หรือ Space ซูมรูปจากตำแหน่งที่อยู่จนเต็มจอภายใน margin
สำเนาที่ซูมเริ่มต้นเหมือนภาพย่อทุกประการ ทั้งการครอบตัด object-fit และรัศมีมุม
zoomSrc ค่อย ๆ ปรากฏเมื่อโหลดเสร็จ
การคลิก Escape หรือการลากออกไปจะปิด การเหวี่ยงเร็วก็ปิดได้ ส่วนการลากสั้น ๆ จะเด้งกลับ

ใช้สำหรับ

ตารางรูปภาพ
แกลเลอรีสินค้า
รูปภาพในโพสต์บล็อก

Props

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`src`	`string`		รูปภาพที่แสดงในตำแหน่งเดิม
`zoomSrc`	`string`		รูปที่ใหญ่กว่าซึ่งแสดงเมื่อโหลดเสร็จ ใช้อัตราส่วนภาพเดียวกัน
`margin`	`number`	`24`	ระยะเว้นรอบรูปที่ซูมเป็นพิกเซล
`disabled`	`boolean`	`false`	ปิดการซูม
`onZoomChange`	`(zoomed) => void`		ทำงานพร้อม `true` เมื่อซูม และ `false` เมื่อปิด
`backdropStyle`	`CSSProperties`		สไตล์ inline ของฉากหลัง
`transition`	`Transition`	`spring`	เส้นโค้ง timing `{ duration, easing }` หรือสปริง `{ tempo: 'spring', spring }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ

props อื่นจะส่งต่อไปยังองค์ประกอบที่เรนเดอร์ className, style และตัวจัดการเหตุการณ์จึงทำงานตามปกติ

เว็บและ React Native

โอเวอร์เลย์มีอยู่เฉพาะตอนซูม (เป็น dialog ใน top layer บนเว็บ) รูปจึงอยู่ที่ใดก็ได้ แม้แต่ในย่อหน้า props อื่นส่งต่อไปยัง img

บน React Native ให้ส่ง source และ zoomSource โอเวอร์เลย์คือ Modal โปร่งใส

ใช้ในตัวอย่างเหล่านี้

ฟีดรูปภาพปัดผ่านรูปภาพ กระโดดด้วยภาพย่อ เปิดรูปใดก็ได้แบบเต็มจอ และดึงรายละเอียดขึ้นมาMotionPagerMotionHighlightMotionZoomMotionSheet