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, 끌어서 치우기로 닫힙니다. 빠르게 던져도 닫히고, 짧게 끌면 제자리로 돌아옵니다.

이럴 때 쓰세요

사진 격자.
상품 갤러리.
블로그 글 속 이미지.

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

겹침 화면은 확대된 동안에만 존재하므로(웹에서는 최상위 레이어 대화상자) 이미지는 문단 안 어디에나 둘 수 있습니다. 그 밖의 props는 img로 갑니다.

React Native에서는 source와 zoomSource를 넘기며, 겹침 화면은 투명한 Modal입니다.

이 컴포넌트를 쓰는 예제

사진 피드사진을 넘기고, 썸네일로 이동하고, 어떤 사진이든 전체 화면으로 열고, 상세 정보를 끌어올립니다.MotionPagerMotionHighlightMotionZoomMotionSheet