커스텀 Transition — 나만의 애니메이션 만들기

interface TransitionConfig {
  delay?: number;       // 시작 지연 (ms)
  duration?: number;    // 지속 시간 (ms)
  easing?: (t: number) => number;  // 이징 함수
  css?: (t: number, u: number) => string;  // CSS 문자열 반환
  tick?: (t: number, u: number) => void;   // 프레임마다 실행
}
// t: 0(시작) → 1(끝), u: 1-t

<script>
  let visible = $state(true);

  // 타이프라이터 효과
  function typewriter(node, { speed = 50 }) {
    const text = node.textContent;
    const duration = text.length * speed;

    return {
      duration,
      css: (t) => {
        const i = Math.floor(text.length * t);
        return `
          clip-path: inset(0 ${100 - (i / text.length) * 100}% 0 0);
          white-space: nowrap;
        `;
      }
    };
  }

  // 회전하며 나타나기
  function spin(node, { duration = 500, degrees = 360 }) {
    return {
      duration,
      css: (t) => {
        const eased = t;
        return `
          transform: rotate(${eased * degrees}deg) scale(${eased});
          opacity: ${eased};
        `;
      }
    };
  }

  // 흔들림 효과
  function shake(node, { duration = 400, intensity = 10 }) {
    return {
      duration,
      css: (t) => {
        const offset = Math.sin(t * Math.PI * 6) * intensity * (1 - t);
        return `transform: translateX(${offset}px);`;
      }
    };
  }
</script>

<button onclick={() => visible = !visible}>토글</button>

{#if visible}
  <p transition:typewriter={{ speed: 30 }}>
    이 텍스트가 한 글자씩 나타납니다
  </p>

  <div transition:spin={{ duration: 800 }}>
    회전하며 등장!
  </div>
{/if}

<script>
  let visible = $state(true);

  // 숫자 카운트업 효과
  function countUp(node, { target = 100, duration = 1000 }) {
    return {
      duration,
      tick: (t) => {
        node.textContent = Math.floor(t * target).toLocaleString();
      }
    };
  }

  // 랜덤 문자 효과 (매트릭스 스타일)
  function scramble(node, { duration = 800 }) {
    const text = node.textContent;
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

    return {
      duration,
      tick: (t) => {
        let result = '';
        for (let i = 0; i < text.length; i++) {
          if (i < text.length * t) {
            result += text[i];
          } else {
            result += chars[Math.floor(Math.random() * chars.length)];
          }
        }
        node.textContent = result;
      }
    };
  }
</script>

{#if visible}
  <span in:countUp={{ target: 1000, duration: 1500 }}>0</span>
  <p in:scramble={{ duration: 1000 }}>안녕하세요 스벨트!</p>
{/if}

<script>
  let visible = $state(true);

  function cardFlip(node, { duration = 600, direction = 'horizontal' }) {
    const axis = direction === 'horizontal' ? 'Y' : 'X';
    return {
      duration,
      css: (t) => {
        const degrees = (1 - t) * 180;
        return `
          transform: perspective(600px) rotate${axis}(${degrees}deg);
          opacity: ${t};
          backface-visibility: hidden;
        `;
      }
    };
  }

  function ripple(node, { duration = 600 }) {
    const style = getComputedStyle(node);
    const width = parseFloat(style.width);
    const height = parseFloat(style.height);
    const maxDim = Math.max(width, height);

    return {
      duration,
      css: (t) => `
        clip-path: circle(${t * maxDim * 1.5}px at center);
        opacity: ${Math.min(t * 2, 1)};
      `
    };
  }
</script>

<button onclick={() => visible = !visible}>토글</button>

{#if visible}
  <div class="card" transition:cardFlip={{ duration: 800 }}>
    <h3>카드 플립</h3>
    <p>3D 회전 트랜지션</p>
  </div>

  <div class="card" transition:ripple>
    <h3>리플 효과</h3>
    <p>원형으로 확장</p>
  </div>
{/if}

<style>
  .card { padding: 1.5rem; margin: 1rem 0; background: #f5f5f5; border-radius: 8px; }
</style>

<script>
  import { cubicOut } from 'svelte/easing';

  // 여러 효과를 조합하는 팩토리 함수
  function combined(node, {
    duration = 500,
    y = 20,
    scale = 0.95,
    blur = 5,
    easing = cubicOut
  }) {
    return {
      duration,
      easing,
      css: (t) => `
        transform: translateY(${(1 - t) * y}px) scale(${scale + (1 - scale) * t});
        opacity: ${t};
        filter: blur(${(1 - t) * blur}px);
      `
    };
  }
</script>

{#if visible}
  <div transition:combined={{ y: 30, blur: 8, duration: 400 }}>
    복합 트랜지션 효과
  </div>
{/if}