Svelte 앱에 전환 효과 추가

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 Svelte 앱에 전환 효과를 추가하는 방법을 살펴보겠습니다.

전환

Svelte에는 전환 추가를 위한 내장 라이브러리가 있습니다. fade 기능을 추가하여 페이드 효과를 만들 수 있습니다.

이를 사용하기 위해 다음 코드를 작성합니다.
App.svelte  :

<script>
  import { fade } from "svelte/transition";
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p transition:fade>foo</p>
{/if}

위의 코드에서 토글 버튼을 클릭할 때 visible와 true 사이에서 false를 토글합니다.

그런 다음 p 요소가 켜고 끌 때 페이드됩니다.

전환 함수는 매개변수를 받아들일 수 있습니다. 예를 들어 fly 효과의 기본 옵션을 다음과 같이 수정할 수 있습니다.
App.svelte  :

<script>
  import { fly } from "svelte/transition";
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p transition:fly="{{ y: 200, duration: 3000 }}">foo</p>
{/if}

위의 코드는 Toggle 버튼을 클릭할 때 단어foo를 위아래로 움직였습니다. y는 foo라는 단어를 위아래로 이동한 거리를 나타냅니다. duration는 전환 효과의 길이입니다.

따라서 Toggle 버튼을 클릭할 때 단어foo가 위아래로 움직이는 것을 볼 수 있습니다.

Svelte를 사용하면 in 지시문을 사용하여 항목이 DOM에 추가될 때만 전환 효과를 추가하고 out 지시문을 사용하여 DOM에서 항목이 제거될 때 애니메이션을 적용할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
App.svelte  :

<script>
  import { fade } from "svelte/transition";
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p in:fade="{{ y: 200, duration: 3000 }}">foo</p>
{/if}

위의 코드는 fade라는 단어가 있는 p 요소가 DOM에 삽입될 때만 foo 효과를 적용합니다. 그 때 페이드 효과를 봐야 합니다.

마찬가지로 out 지시문을 사용하여 다음과 같이 p 요소가 DOM에서 제거될 때만 전환 효과를 추가할 수 있습니다.

<script>
  import { fade } from "svelte/transition";
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p out:fade="{{ y: 200, duration: 3000 }}">foo</p>
{/if}

나만의 전환 만들기

내장 전환을 사용하지 않으려면 자체 전환을 만들 수 있습니다.

예를 들어, 다음 코드를 작성하여 텍스트를 회전시키고 p 요소가 DOM에서 제거될 때 색상을 변경하는 효과를 생성할 수 있습니다.

<script>
  import { fade } from "svelte/transition";
  import { elasticOut } from "svelte/easing";
  let visible = true;

  const spin = (node, { duration }) => {
    return {
      duration,
      css: t => {
        const eased = elasticOut(t);

        return `
            transform: scale(${eased}) rotate(${eased * 1080}deg);
            color: hsl(
              ${~~(t * 360)},
              ${Math.min(100, 2000 - 1000 * t)}%,
              ${Math.min(50, 2000 - 500 * t)}%
            );`;
      }
    };
  };
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p out:spin="{{ y: 200, duration: 3000 }}">foo</p>
{/if}

우리가 추가한 것은 시간t이 증가함에 따라 p 요소의 스타일을 지정하기 위해 CSS를 반환하는 것이었습니다.
elasticOut는 시간 경과에 따른 변화율인 완화를 정의합니다. 텍스트의 크기를 변경하기 위해 transform에 전달했습니다. 또한 페이드 아웃할 때 텍스트의 회전 각도를 변경하는 데 사용했습니다.

자바스크립트 애니메이션

JavaScript로 텍스트에 애니메이션을 적용할 수도 있습니다. 예를 들어 다음과 같이 타자기 효과를 만들 수 있습니다.

<script>
  let visible = true;

  const typewriter = (node, { speed = 50 }) => {
    const valid =
      node.childNodes.length === 1 && node.childNodes[0].nodeType === 3;

    if (!valid) {
      return;
    }

    const text = node.textContent;
    const duration = text.length * speed;

    return {
      duration,
      tick: t => {
        const i = Math.ceil(text.length * t);
        node.textContent = text.slice(0, i);
      }
    };
  };
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
<p in:typewriter>Hello Jane. How are you?</p>
{/if}

위의 코드에서 typewriter 함수를 정의하여 타자기 효과를 만들었습니다.

우리는 시간이 지남에 따라 텍스트 내용을 p 요소에 점진적으로 추가합니다. 이는 t가 증가함을 의미합니다.

따라서 다음이 있으므로 Toggle 버튼을 클릭하여 텍스트를 토글할 때 타자기를 얻습니다.

<p in:typewriter>Hello Jane. How are you?</p>

마크업에서.

결론

Svelte에는 전환 및 애니메이션 생성을 위한 내장 라이브러리가 있습니다. 애니메이션 효과를 쉽게 만듭니다.

애니메이션용 함수를 가져와서 in  , out   또는 transition 지시문으로 적용합니다.

또한 동일한 지시문을 적용하여 자체 애니메이션 함수를 작성하여 사용자 정의 애니메이션을 만들 수 있습니다.