Style effects in Svelte

1. Motion

스벨트에서는 변경 사항을 매끄럽게 보여주는 UI를 구축하기 편리한 애니메이션 도구들을 제공합니다. CSS로도 이러한 효과들을 만들 수 있지만, Svelte의 Motion은 Writable Store를 사용하여 효과를 쉽게 적용할 수 있게 도와줍니다.

1.1. Tweened

트위닝 효과는 DOM에서 상태가 변경될 때, 변경되는 요소를 부드럽게 변경하는 것처럼 보여주는 효과입니다. progress 바의 진행 막대의 상태를 변경할 때 주로 사용합니다.

import { tweened } from 'svelte/motion';

const progress = tweened(value: any, { options })

💡 **options 종류**

delay : Tweened 효과가 시작하기 전 시간

duration : Tweened 효과가 지속되는 시간

ease : 시간 경과에 따른 효과를 지정

interpolate : Tweened 효과의 보간법 설정

※ 참고 : 두 번째 파라미터인 options를 설정하면 Tweened 기본 값이 모두 options의 내용으로 덮어 씌워집니다. Tweened 효과가 끝난 후에는 tweened.set과 tweened.update가 Promise값을 리턴합니다.

progress 상태 바 예제 )

	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

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

<progress value={$progress}></progress>

<button on:click="{() => progress.set(0)}">
	0%
</button>

<button on:click="{() => progress.set(0.25)}">
	25%
</button>

<button on:click="{() => progress.set(0.5)}">
	50%
</button>

<button on:click="{() => progress.set(0.75)}">
	75%
</button>

<button on:click="{() => progress.set(1)}">
	100%
</button>

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

1.2. spring

spring은 자주 변경되는 값에 사용하는 것이 좋습니다.

store = spring(value: any, options)

spring함수는 2개의 파라미터를 가집니다. 첫 번째 파라미터는 변경되는 값이고 두 번째 파라미터는 옵션입니다.

💡 options 종류

stiffness

: 스프링의 강도 설정, 값이 높을수록 반응이 빨라진다. (0 ~ 1)

damping

: 스프링의 탄성 정도 설정, 값이 낮을수록 튕기는 범위가 넓어진다. (0 ~ 1)

precision

: 스프링의 안정화, 값이 높으면 튕기는 횟수가 줄어들고, 값이 낮을수록 튕기는 횟수가 증가 (0 ~ 1 )

※ 참고 : Tweened와 동일하게 Promise가 리턴됩니다.

	import { spring } from 'svelte/motion';

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

다음과 같이 spring 옵션 값을 추가해 세부적인 값들을 지정해주어 작성할 수 있습니다.

let coords = spring({ x: 50, y: 50 }, {
	stiffness: 0.1,
	damping: 0.25
});

• spring 전체 예제

  
  	import { spring } from 'svelte/motion';
  
  	let coords = spring({ x: 50, y: 50 }, {
  		stiffness: 0.1,
  		damping: 0.25
  	});
  
  	let size = spring(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>

2. Transitions

transition을 사용해 요소를 DOM의 안과 밖으로 부드럽게 전환할 수 있습니다.

2.1. fly & fade transitions

• fade

import { fade } from 'svelte/transition';
let visible = true;

<p transition:fade>Fades in and out</p>"

요소가 화면에서 서서히 사라지는 효과를 볼 수 있습니다.

• fly

import { fly } from 'svelte/transition';
let visible = true;

<p transition:fly="{{ y: 200, duration: 2000 }}">
	Flies in and out
</p>

요소가 화면 밖으로 날아가는 듯한 효과를 줄 수 있습니다.

2.2. in & out

transition 요소는 in 또는 out과 함께 사용할 수 있습니다.

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

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
	Flies in, fades out
</p>

2.3. local transition

트랜지션을 전역적으로 설정할 수 있습니다.

<div transition:slide|local>
	{item}
</div>

2.4. Deferred transitions

지연된 전환

여러 요소들 사이에서 조정하여 전환을 사용할 수 있습니다.

<label
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
>

<label
	class="done"
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
>

2.5. Key blocks

표현식의 값이 변경될 때 내용을 다시 만듭니다.

요소가 DOM에 들어가거나 나올 때 뿐만 아니라 값이 변경될 때 마다 전환을 재생하는 경우 유용하게 사용할 수 있습니다.

{#key value}
	<div transition:fade>{value}</div>
{/key}

전체 예제)

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

	let number = 0;
</script>

<div>
	The number is:
	{#key number}
		<span style="display: inline-block" in:fly={{ y: -20 }}>
			{number}
		</span>
	{/key}
</div>
<br />
<button
	on:click={() => {
		number += 1;
	}}>
	Increment
</button>