Svelte의 전환 및 애니메이션 이해하기

애니메이션을 잘 활용하면 사용자 경험을 개선하고 사용자에게 피드백을 전달하는 훌륭한 방법이 될 수 있습니다. Svelte를 사용하면 타사 자바스크립트 라이브러리를 거의 사용하지 않고도 애플리케이션에 애니메이션과 트랜지션을 쉽게 통합할 수 있습니다.

스벨테 프로젝트 설정하기

스벨테를 활용하려면 Node.js 런타임 환경과 자바스크립트 기반 시스템에서 소프트웨어 패키지를 설치하고 관리할 수 있는 노드 패키지 관리자(NPM)가 컴퓨팅 장치에서 완전히 작동하는지 확인하는 것이 중요합니다. 이렇게 하려면 컴퓨터에서 터미널 애플리케이션을 열고 그 안에서 다음 명령을 실행하세요:

 npm create vite
 

새로운 Vite.js 프로젝트 생성을 시작하려면 적절한 이름을 입력해야 합니다. 그런 다음 선호하는 프레임워크로 Svelte를 지정하고 JavaScript 변형을 선택합니다. 마지막으로 지정된 프로젝트 폴더로 이동하여 지정된 설치 명령을 실행하여 시스템 내에 필요한 모든 종속성을 도입합니다:

 npm install
 

프로젝트에서 상용구 코드를 제거하면 앞서 언급한 지정된 디렉터리와 App.svelte 및 App.css 파일 내의 해당 콘텐츠를 모두 삭제하여 프로젝트 설정에서 불필요한 요소를 효율적으로 제거할 수 있습니다.

Svelte에서 트위닝을 사용하는 방법

트위닝의 활용은 애니메이션 및 그래픽 계산의 필수적인 측면을 구성하며, 키 프레임 사이의 중간 프레임을 생성하여 원활하고 신뢰할 수 있는 움직임 또는 변환을 쉽게 달성할 수 있도록 합니다. 스벨트 프레임워크는 구성 요소 애니메이션을 위해 숫자 값을 사용하는 트윈 기능을 통합하여 개발자가 웹 기반 소프트웨어 플랫폼 내에서 흐르는 듯한 전환과 시각 효과를 손쉽게 실행할 수 있도록 지원합니다.

Tweened 유틸리티는 시간이 지남에 따라 애니메이션을 적용하여 다양한 상태 또는 값 간의 부드러운 전환을 만들 수 있는 Svelte/Motion 모듈 내의 컴포넌트입니다. 트위드 기능을 자체 컴포넌트에 통합하려면 아래 그림과 같이 트위드 기능을 가져와서 적절하게 통합해야 합니다:

 import { tweened } from 'svelte/motion'
 

Svelte의 Tweened 유틸리티는 구성 가능한 쓰기 가능한 저장소로 기능하며, 애플리케이션 내에서 상태 관리를 효율적으로 처리하는 수단으로 사용됩니다. 이 유틸리티는 “설정”과 “업데이트”라는 두 가지 기본 메서드로 구성되며, 이 두 가지 메서드는 모두 작동에 필수적입니다. 본질적으로 일반적인 트위드 저장소의 구조는 자바스크립트 객체의 구조와 유사하며, 효과적인 상태 관리에 필요한 필수 구성 요소를 갖추고 있습니다.

 const y = tweened(defaultValue, {
    duration: [time-in-milliseconds],
    easing: [easing-function],
})
 

제공된 코드는 Tweenable 스토어에 바인딩된 “y”라는 변수를 설정합니다. 이 저장소에는 두 개의 매개변수가 존재합니다. 초기 매개변수는 “y” 바인딩의 미리 결정된 기본 상태를 나타냅니다. 이 기본 상태는 두 개의 키-값 쌍을 포함하는 다른 객체, 즉 “duration”과 “easing”으로 표시됩니다. 전자의 속성인 “기간”은 트윈이 활성 상태로 유지되는 시간(밀리초)을 지정합니다. 동시에 후자의 속성인 ‘완화’는 애니메이션 프로세스 중에 사용되는 특정 완화 기능을 지정합니다.

Svelte에서 두 상태 간 전환의 애니메이션 동작을 제어하기 위해 원하는 이징 함수를 정의하여 “트위닝”을 활용합니다. 앞서 언급한 기능은 ‘스벨트/이완’ 모듈 내에 캡슐화되어 있으며, 특정 함수를 트위닝된 데이터 스토리지의 파라미터로 통합하기 전에 해당 모듈에서 임포트해야 합니다. 다행히도 스벨트는 ‘이징 시각화 도구’라는 그래픽 표현을 제공하여 사용자가 다양한 이징 기능을 실험하고 각각의 동작을 시각적으로 관찰할 수 있도록 합니다.

Svelte의 맥락에서 “트위스트” 유틸리티의 활용에 대한 포괄적인 이해를 돕기 위해 증분 변환을 통해 요소의 차원을 향상시키는 기능을 보여주는 데모를 소개합니다.

 <script>
  import { tweened } from "svelte/motion";
  import { bounceOut } from "svelte/easing";

  const size = tweened(0, {
    easing:bounceOut
  })
</script>

<div class="container">
  <div style={`height: ${$size * 30}px;`}>
  </div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Increase size</button>

<style>
  .container{
    display: flex;
    align-items: flex-end;
    margin-top: 400px;
  }
  div{
    height:0;
    width:100px;
    background-color: red;
  }
</style>
 

{x: 0, y: 0}}”. 이 기본값(즉, 상점의 가치)은 “$” 기호를 사용하여 액세스할 수 있습니다. 이 기본값에 이어 트위트 함수는 객체로 표시되는 또 다른 기능을 허용하며, 이 객체는 “bounceOut” 완화 메커니즘에 대한 관심을 유도하는 “완화” 속성으로 구성됩니다.

마크업 섹션은 ‘크기’ 바인딩에서 ‘업데이트’ 함수를 호출하는 ‘온클릭’ 속성이 있는 버튼 컴포넌트로 구성됩니다. 이 함수는 버튼을 클릭할 때마다 ‘$size’ 저장소 변수의 값을 3씩 증가시킵니다. 또한 div 요소는 ‘$size’ 저장 변수의 현재 값에 따라 인라인 스타일을 표시합니다. 웹 브라우저에서 이 코드를 실행하면 다음과 같은 시각적 표시가 나타납니다:

via GIPHY

Svelte의 트랜지션

Svelte에서는 문서 객체 모델(DOM) 내에서 요소를 동적으로 삽입 및 제거할 수 있도록 지시어 메커니즘과 해당 지시어와의 원활한 통합을 위해 설계된 실용적인 유틸리티 기능을 제공하는 전용 패키지인 “svelte/transition”이 있습니다.예를 들어, 요소가 DOM에 들어오고 나가는 동안 점진적으로 흐리게 처리하고 싶다고 가정해 보겠습니다. 이 경우 원하는 시각적 효과를 얻으려면 처음에 “svelte/transition” 패키지에서 흐리게 처리 함수를 가져오는 것이 현명할 것입니다.

 <script>
import { blur } from 'svelte/transition';
</script>
 

물론이죠! 이 기능을 자바스크립트에서 구현할 수 있는 한 가지 방법은 React 후크를 사용하는 것입니다: ”’자바스크립트 ‘react’에서 { useState }를 가져옵니다; 함수 MyComponent() { const [isVisible, setIsVisible] = useState(false); // 이 함수는 사용자가 무언가를 클릭해서 가시성을 토글할 때 호출됩니다. const handleVisibilityToggle = () => { setIsVisible(!isVisible); }; 반환 (

 <script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
 

 {#if visible}
<div>Here I am...</div>
{/if}
 

 <button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
 

 <script>
  import { blur, slide } from 'svelte/transition';
  let visible = false;
  </script>

{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}

<button on:click={()=>visible=!visible}>
  {visible ? "Hide" : "Show"}
  </button>
 

 <script>
  import { flip } from "svelte/animate";
  let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
  let shoppingList = [...originalList];
</script>

<div class="container">
  {#each shoppingList as item (item)}
    {@const number = shoppingList.indexOf(item)}
    <div animate:flip>
      {number + 1}. {item}
    </div>
  {/each}
</div>

<button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>