[Svelte] 스벨트 모션 사용하기(tweened, spring)

 

 

 

 

 

 

🌈 스벨트 모션 사용 방법

스벨트에서 사용할 수 있는 모션의 종류에는 tweened와 spring이 있다.

 

 

 

 

1️⃣ tweened

tweened는 값이 변경될 때 적용될 애니메이션의 저장소이다.
또한, tweened는 숫자, 날짜, 숫자와 날짜를 값으로 가지는 객체와 배열에 애니메이션을 추가할 수 있다.

<!-- 이 예제에서는 따로 스토어를 만들지 않고 컨테이너에 저장소를 직접 만든다. -->
<script>
    import { writable } from 'svelte/store';
    import { tweened } from 'svelte/motion';
    import { cubicIn } from 'svelte/easing';

    const progress = tweened(0, {
        delay: 1, // 애니메이션이 시작할 때까지 걸리는 시간
        duration: 1500,// 애니메이션의 길이, 기본값은 400밀리초
        easing: cubicIn // 스밸트 내장 함수
    }); 
    setTimeout(() => {
        progress.set(1);
    }, 1500);
</script>

<progress value={$progress} />

 

◾ 결과

 

 

 

 

2️⃣ Spring

예시 참고 : Svelte Tutorial :: Spring

<script>
  import { writable } from 'svelte/store';

  let coords = writable({ x: 50, y: 50 });
  let size = writable(10);
</script>

<div style="position: absolute; right: 1em;">
  <label>
    <h3>stiffness ({coords.stiffness})</h3>
    <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
  </label>

  <label>
    <h3>damping ({coords.damping})</h3>
    <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
  </label>
</div>

<svg
  on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
  on:mousedown="{() => size.set(30)}"
  on:mouseup="{() => size.set(10)}"
>
  <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg>

<style>
  svg {
    width: 100%;
    height: 100%;
    margin: -8px;
  }
  circle {
    fill: #ff3e00;
  }
</style>

 

 

 

 

3️⃣ 정리

애니메이션 저장소는 컴포넌트 전용 저장소가 합리적이다.

왜냐하면 컴포넌트 내부에 애니메이션을 적용할 값이 있을 경우 tweened나 spring 저장소에 해당 값을 저장하면

즉시 해당 애니메이션을 사용할 수 있기 때문이다.

 

따라서 별도의 파일을 만들 필요 없이 컴포넌트에 애니메이션을 넣고 싶다면 하나의 컴포넌트 안에서 애니메이션을 설정하는 것이 더 낫다. 하지만, 컴포넌트 간에 공유하는 데이터에 애니메이션을 적용하려면 tweened와 spring을 별도의 파일에 저장하는 것이 더 낫다.

 

 

 

 

 

 

📌 참고사이트

Svelte Docs :: tweened