마스크 애니메이션

클리핑 마스크를 사용한 스타일리시한 나타남/사라짐 효과

마스크 애니메이션

마스크(Mask) 애니메이션은 클리핑 마스크를 사용하여 요소가 원형, 타원형, 또는 사각형 모양으로 나타나거나 사라지는 효과를 만듭니다. Material Design의 리플 효과와 유사한 스타일리시한 전환을 제공합니다.

사용법

import { transition } from '@ssgoi/react';
import { mask } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...mask()
    })}>
      Mask me!
    </div>
  );
}

옵션

interface MaskOptions {
  shape?: 'circle' | 'ellipse' | 'square';  // 마스크 모양 (기본값: 'circle')
  origin?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 
           'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';  // 시작 위치 (기본값: 'center')
  scale?: number;     // 마스크 크기 배율 (기본값: 1.5)
  fade?: boolean;     // 페이드 효과 동시 적용 (기본값: false)
  spring?: {
    stiffness?: number;  // 스프링 강도 (기본값: 300)
    damping?: number;    // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// 중앙에서 시작하는 원형 마스크
mask()

// 좌측 상단에서 시작하는 원형 마스크
mask({ origin: 'top-left' })

// 타원형 마스크
mask({ shape: 'ellipse' })

// 사각형 마스크
mask({ shape: 'square', origin: 'center' })

// 페이드와 함께 적용
mask({ fade: true })

// 더 큰 범위의 마스크
mask({ scale: 2 })

// 부드러운 애니메이션
mask({ spring: { stiffness: 100, damping: 20 } })

활용 예시

카드 리플 효과

// 클릭 위치에서 시작하는 리플 효과
mask({ 
  origin: 'top-left',  // 클릭 위치에 따라 동적으로 설정
  scale: 2,
  spring: { stiffness: 400, damping: 35 }
})

모달 오픈 효과

// 버튼 위치에서 확장되는 모달
mask({
  origin: 'bottom-right',  // 버튼 위치
  scale: 3,
  fade: true
})

갤러리 이미지 전환

// 이미지 중앙에서 확장
mask({
  shape: 'circle',
  origin: 'center',
  scale: 1.5,
  spring: { stiffness: 200, damping: 25 }
})