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 או רווח מגדילים את התמונה מהמקום שלה עד שהיא ממלאת את המסך בתוך margin.
העותק המוגדל מתחיל בדיוק כמו שהתמונה הממוזערת נראית, עם החיתוך של object-fit ורדיוס הפינות.
zoomSrc מופיע בהדרגה ברגע שנטען.
לחיצה, Escape או גרירה הצידה סוגרים; גם זריקה מהירה סוגרת, וגרירה קצרה קופצת בחזרה.

מתאים ל־

רשת תמונות.
גלריית מוצרים.
תמונות בתוך פוסט בבלוג.

Props

Prop	טיפוס	ברירת מחדל	תיאור
`src`	`string`		התמונה שמוצגת במקומה.
`zoomSrc`	`string`		תמונה גדולה יותר שמוצגת ברגע שנטענה; שמרו על אותו יחס גובה־רוחב.
`margin`	`number`	`24`	מרווח שנשמר סביב התמונה המוגדלת בפיקסלים.
`disabled`	`boolean`	`false`	מכבה את הזום.
`onZoomChange`	`(zoomed) => void`		רץ עם `true` כשמוגדל ועם `false` כשנסגר.
`backdropStyle`	`CSSProperties`		סגנון מוטבע לרקע.
`transition`	`Transition`	`spring`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

שכבת־העל קיימת רק בזמן הזום (באינטרנט, dialog בשכבה העליונה), כך שהתמונה יכולה לשבת בכל מקום, אפילו בתוך פסקה. props אחרים עוברים ל־img.

ב־React Native העבירו source ו־zoomSource; שכבת־העל היא Modal שקוף.

בשימוש בדוגמאות האלה

פיד תמונותהחליקו בין תמונות, קפצו בעזרת תמונות ממוזערות, פתחו כל תמונה במסך מלא ומשכו למעלה את הפרטים שלה.MotionPagerMotionHighlightMotionZoomMotionSheet