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