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 ಅಥವಾ ಎಳೆದು ದೂರ ಮಾಡುವುದು ಅದನ್ನು ಮುಚ್ಚುತ್ತದೆ; ವೇಗದ ಎಸೆತವೂ ಮುಚ್ಚುತ್ತದೆ, ಮತ್ತು ಸಣ್ಣ ಎಳೆತ spring ನಿಂದ ಹಿಂತಿರುಗುತ್ತದೆ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಫೋಟೋ ಗ್ರಿಡ್.
ಉತ್ಪನ್ನ ಗ್ಯಾಲರಿ.
ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿನ ಚಿತ್ರಗಳು.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`src`	`string`		ಜಾಗದಲ್ಲಿ ತೋರಿಸಿದ ಚಿತ್ರ.
`zoomSrc`	`string`		ಲೋಡ್ ಆದ ನಂತರ ತೋರಿಸುವ ದೊಡ್ಡ ಚಿತ್ರ; ಅದೇ ಅನುಪಾತ ಇಡಿ.
`margin`	`number`	`24`	ಜೂಮ್ ಆದ ಚಿತ್ರದ ಸುತ್ತ ಇಡುವ ಅಂತರ, ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ.
`disabled`	`boolean`	`false`	ಜೂಮ್ ಆಫ್ ಮಾಡುತ್ತದೆ.
`onZoomChange`	`(zoomed) => void`		ಜೂಮ್ ಆದಾಗ `true` ಮತ್ತು ಮುಚ್ಚಿದಾಗ `false` ನೊಂದಿಗೆ ನಡೆಯುತ್ತದೆ.
`backdropStyle`	`CSSProperties`		ಬ್ಯಾಕ್‌ಡ್ರಾಪ್‌ಗೆ inline style.
`transition`	`Transition`	`spring`	ಟೈಮಿಂಗ್ ವಕ್ರ `{ duration, easing }` ಅಥವಾ spring `{ tempo: 'spring', spring }`. spring ಗಳು ಅಡ್ಡಿಯಾದಾಗ ತಮ್ಮ ಆವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ಓವರ್‌ಲೇ ಜೂಮ್ ಆಗಿರುವಾಗ ಮಾತ್ರ ಇರುತ್ತದೆ (ವೆಬ್‌ನಲ್ಲಿ ಮೇಲಿನ ಪದರದ dialog), ಹೀಗಾಗಿ ಚಿತ್ರ ಎಲ್ಲಿಯಾದರೂ, ಪ್ಯಾರಾಗ್ರಾಫ್ ಒಳಗೂ, ಇರಬಹುದು. ಇತರ props img ಗೆ ಹೋಗುತ್ತವೆ.

React Native ನಲ್ಲಿ source ಮತ್ತು zoomSource ಕೊಡಿ; ಓವರ್‌ಲೇ ಪಾರದರ್ಶಕ Modal.

ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ

ಫೋಟೋ ಫೀಡ್ಫೋಟೋಗಳ ಮೂಲಕ ಸ್ವೈಪ್ ಮಾಡಿ, ಥಂಬ್‌ನೇಲ್‌ಗಳಿಂದ ಜಿಗಿಯಿರಿ, ಯಾವುದೇ ಫೋಟೋವನ್ನು ಪೂರ್ಣ ಪರದೆಯಲ್ಲಿ ತೆರೆದು ಅದರ ವಿವರಗಳನ್ನು ಮೇಲಕ್ಕೆ ಎಳೆಯಿರಿ.MotionPagerMotionHighlightMotionZoomMotionSheet