MotionZoom

Μια εικόνα που μεγεθύνεται από τη θέση της σε πλήρη οθόνη· σύρετέ την μακριά για να κλείσει.

WebReact 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`	Χώρος που αφήνεται γύρω από τη μεγεθυσμένη εικόνα σε pixels.
`disabled`	`boolean`	`false`	Απενεργοποιεί το ζουμ.
`onZoomChange`	`(zoomed) => void`		Εκτελείται με `true` όταν μεγεθύνεται και `false` όταν κλείνει.
`backdropStyle`	`CSSProperties`		Inline στυλ για το φόντο.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Η επικάλυψη υπάρχει μόνο όσο είναι μεγεθυσμένη (ένα dialog στο ανώτατο επίπεδο στο web), οπότε η εικόνα μπορεί να βρίσκεται οπουδήποτε, ακόμη και μέσα σε παράγραφο. Τα υπόλοιπα props πηγαίνουν στο img.

Στο React Native δώστε source και zoomSource· η επικάλυψη είναι ένα διαφανές Modal.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Ροή φωτογραφιώνΣαρώστε φωτογραφίες, πηδήξτε με μικρογραφίες, ανοίξτε οποιαδήποτε φωτογραφία σε πλήρη οθόνη και τραβήξτε προς τα πάνω τις λεπτομέρειές της.MotionPagerMotionHighlightMotionZoomMotionSheet