Svelte를 사용한 값 변경 애니메이션

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

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

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

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

이 기사에서는 Svelte 구성 요소의 값에 애니메이션을 적용하기 위해 트윈을 만드는 방법을 살펴보겠습니다.

트윈으로 값 변경에 대한 애니메이션 만들기

tweened 함수를 사용하여 값을 변경할 때 애니메이션으로 표시되는 값을 생성할 수 있습니다.

예를 들어 다음과 같이 이징 효과가 있는 애니메이션 진행률 표시줄을 만드는 데 사용할 수 있습니다.

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

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });

  const moveProgress = () => {
    $progress = 0;
    const interval = setInterval(() => {
      $progress += 0.1;
      if ($progress === 1) {
        clearInterval(interval);
      }
    }, 1500);
  };
</script>

<style>
  progress {
    display: block;
    width: 100%;
  }
</style>

<progress value={$progress}></progress>
<br>
<button on:click="{moveProgress}">
  Start
</button>

위의 코드에는 moveProgress 상점 값을 설정하는 $progress 함수가 있습니다.

그런 다음 1이 될 때까지 업데이트합니다. 1이 되면 타이머 개체를 지워 실행을 중지합니다.
$progress 저장소는 tweened 함수에서 생성되어 값이 변경될 때 애니메이션을 적용할 수 있습니다. tweened 함수에 첫 번째 인수로 0을 전달했을 때 초기 값은 0입니다.

두 번째 인수에는 애니메이션이 수행되는 방식을 지정하는 개체가 있습니다. 애니메이션의 지속 시간을 400ms로 설정했습니다. 그런 다음 여유 함수를 큐빅 출력으로 설정합니다.

큐빅 아웃은 애니메이션이 빠르게 움직인 다음 천천히 움직이는 것을 의미합니다.

두 번째 인수로 전달하는 개체에서 사용할 수 있는 모든 옵션은 다음과 같습니다.

delay   - 트윈 시작 전  밀리초

duration  — 트윈 기간(밀리초) 또는 트윈

을 지정할 수 있는 (from, to) => milliseconds 함수

easing  — a p => t 기능

interpolate   -   임의의 값 사이를 보간하기 위한 사용자 지정(from, to) => t => value 함수입니다. Svelte는 기본적으로 숫자, 날짜, 동일한 모양의 배열과 객체 사이를 보간합니다

.

기본값을 재정의하는 두 번째 인수로 progress.set 및 progress.update 옵션을 전달할 수 있습니다.
set 및 update 메서드는 모두 트윈이 완료될 때 확인되는 약속을 반환합니다.

스프링 기능

spring 함수를 사용하여 값이 변경될 때 애니메이션으로 표시되는 값이 있는 저장소를 만들 수 있습니다.

예를 들어, 다음 코드를 작성하여 다른 위치에 마우스를 올려서 사각형을 이동할 때 사각형에 스프링 효과를 추가할 수 있습니다.
App.svelte  :

<script>
  import { spring } from "svelte/motion";

  let coords = spring({ x: 50, y: 50 });
  let square;

  const setCoords = e => {
    coords.set({ x: e.clientX, y: e.clientY });
    square.style.top = `${$coords.y}px`;
    square.style.left = `${$coords.x}px`;
  };
</script>

<style>
  .screen {
    width: 100vw;
    height: 100vh;
  }

  .square {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
  }
</style>

<div class="screen" on:mousemove="{setCoords}">
  <div class="square" bind:this={square}>
  </div>
</div>

위의 코드에서 클래스square가 있는 div를 square 변수에 바인딩합니다.

그런 다음 setCoords 함수를 추가하여 coords 저장소를 마우스 호버 위치의 x 및 y 값으로 설정했습니다.

그런 다음 이를 사용하여 기존 스타일과 결합할 때 사각형을 이동할 클래스 square가 있는 div의 top 및 left 값을 설정했습니다.
spring 함수는 마우스로 빨간색 사각형을 움직일 때 사각형에 탄력 있는 효과를 줍니다.
spring와 writable 사이를 전환하면 사각형이 움직이는 방식에 차이가 있음을 알 수 있습니다.

결론

tween 및 spring 함수를 사용하여 상점 상태에서 애니메이션을 만들 수 있습니다.

그런 다음 tween 함수는 덜 자주 변경되는 값에 적합하고 spring 함수는 더 자주 변경되는 값의 애니메이션에 적합합니다.