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`	منحنى توقيت `{ duration, easing }` أو نابض `{ tempo: 'spring', spring }`. تحتفظ النوابض بزخمها عند المقاطعة.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

لا توجد الطبقة العلوية إلا أثناء التكبير (dialog في الطبقة العليا على الويب)، فيمكن أن تكون الصورة في أي مكان، حتى داخل فقرة. وتذهب props الأخرى إلى img.

في React Native مرّر source وzoomSource؛ والطبقة العلوية Modal شفاف.

مستخدم في هذه الأمثلة

خلاصة الصورتنقّل بين الصور بالسحب، وانتقل عبر الصور المصغّرة، وافتح أي صورة بملء الشاشة واسحب تفاصيلها إلى الأعلى.MotionPagerMotionHighlightMotionZoomMotionSheet