[javascript] Svelte에서 애니메이션 효과를 사용하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Svelte의 Built-in 트랜지션과 애니메이션

Svelte는 컴포넌트의 상태 변화에 따라 자동으로 애니메이션을 처리하는 built-in 애니메이션 기능을 제공합니다. 이를 통해 코드를 작성하는 동안 애니메이션을 만들고 제어하는 데 있어 편리하게 할 수 있습니다.

transition 키워드

Svelte에서 transition 키워드를 사용하면 특정 요소의 상태 변화에 따라 애니메이션을 적용할 수 있습니다. 예를 들어, 아래의 코드는 in 변수의 값에 따라 요소가 나타나거나 사라지는 애니메이션을 적용합니다.

<script>
  import { fade, fly } from 'svelte/transition';

  let in = false;
</script>

<button on:click={() => in = !in}>
  Toggle
</button>

{#if in}
  <div transition:fade>
    This element fades in and out
  </div>
{/if}

animate 키워드

animate 키워드를 사용하면 특정 요소에 직접 애니메이션을 적용할 수 있습니다. 예를 들어, 아래의 코드는 버튼을 클릭할 때 요소의 위치를 변경하는 애니메이션을 적용합니다.

<script>
  import { animate } from 'svelte/animate';

  let x = 0;

  function move() {
    animate(
      () => ({ x: 200 }),
      {
        duration: 500,
        easing: cubicIn
      }
    );
  }
</script>

<button on:click={move}>
  Move
</button>

<div style="transform: translateX({x}px);">I'm moving!</div>

외부 라이브러리 사용하기

Svelte에서는 built-in 애니메이션 기능 외에도 다른 애니메이션 라이브러리를 사용할 수 있습니다. 이러한 라이브러리들은 풍부한 애니메이션 효과와 설정 옵션을 제공하여 다양한 애니메이션을 구현할 수 있습니다.

예를 들어, GreenSock Animation Platform (GSAP)은 많은 개발자들이 선호하는 애니메이션 라이브러리 중 하나입니다. Svelte와의 통합도 간단하며, GSAP의 강력한 애니메이션 기능을 활용할 수 있습니다.

<script>
  import { onMount } from 'svelte';
  import { TweenMax } from 'gsap';

  let element;

  onMount(() => {
    TweenMax.to(element, 1, { opacity: 0, x: 200 });
  });
</script>

<div bind:this={element}>I'm animating!</div>

Svelte에서 애니메이션을 구현하는 방법은 다양하며, 사용자의 요구에 맞게 선택할 수 있습니다. Built-in 기능을 활용하거나 외부 라이브러리를 사용하여 풍부한 애니메이션 효과를 만들어보세요.