페이드 전환

부드러운 페이드 인/아웃 효과로 페이지를 전환합니다

페이드 전환

페이드(Fade) 전환은 가장 기본적이면서도 세련된 페이지 전환 효과입니다. 현재 페이지가 서서히 사라지면서 새로운 페이지가 나타나는 부드러운 전환을 제공합니다.

기본 사용법

import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: fade()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* 앱 내용 */}
    </Ssgoi>
  );
}

옵션

페이드 전환은 스프링 애니메이션 설정을 커스터마이즈할 수 있습니다:

fade({
  spring: {
    stiffness: 300,  // 스프링 강도 (기본값: 300)
    damping: 30      // 감쇠 계수 (기본값: 30)
  }
})

스프링 옵션 설명

• stiffness: 애니메이션의 속도를 제어합니다. 값이 클수록 빠른 전환
• damping: 애니메이션의 바운스를 제어합니다. 값이 클수록 부드러운 전환

사용 예시

느린 페이드

부드럽고 느린 페이드 효과:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 100,
      damping: 20
    }
  })
};

빠른 페이드

빠르고 즉각적인 페이드 효과:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 500,
      damping: 40
    }
  })
};

특정 경로에만 적용

const config = {
  transitions: [
    {
      from: '/home',
      to: '/about', 
      transition: fade(),
      symmetric: true  // /about → /home도 자동으로 fade 적용
    }
  ]
};

<Ssgoi config={config}>
  {/* 앱 내용 */}
</Ssgoi>

작동 원리

페이드 전환은 다음과 같이 작동합니다:

1. 나가는 페이지: opacity가 1에서 0으로 감소
2. 들어오는 페이지: opacity가 0에서 1로 증가
3. 두 애니메이션이 동시에 진행되어 자연스러운 크로스페이드 효과 생성

장점

• 모든 콘텐츠 유형에 적합한 범용적인 전환
• CPU/GPU 부담이 적은 가벼운 애니메이션
• 시각적으로 부드럽고 프로페셔널한 느낌
• 방향성이 없어 모든 네비게이션에 자연스럽게 적용

권장 사용 사례

• 기본 페이지 전환
• 콘텐츠가 서로 관련이 없는 페이지 간 이동
• 차분하고 우아한 사용자 경험이 필요한 경우
• 모바일 환경에서 성능이 중요한 경우