Motion
변수의 값이 업데이트 되었을 때 사용할 수 있는 애니메이션 기능인 motion 기능을 제공한다
Tweened
<script>
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>
- tweened 함수
store = tweened(value: any, options)tweened 함수는 2개의 파라미터를 갖는다. 첫번째 파라미터는 변경되는 값, 두번째 파라미터는 옵션이다. tweened함수는 store를 리턴한다. options에서 선택할 수 있는 값은 아래와 같다
- delay : 디폴트값0, 단위 ms, 설정한 시간 후에 시작된다
- duration : 디폴트 400, 단위 ms, 설정한 시간 동안 실행
- easing : easing — a p => t function (easing function 은 시간의 흐름에 따른 매개변수의 변화율을 나타내는 것으로 애니매이션 효과에서의 움직임의 미세한 속도를 조정해준다)
- interpolate : (from, to) => t => value
store.set 과 store.update의 두번째 파라미터에 options 를 전달할 수 있다. 전달된 옵션은 기본값에 override된다. set과 update 함수 리턴 값은 promise로 이후 tweened가 완료도면 resolve된다. (promise 미래에 ~~값을 주겠다 는 약속의 값)
spring
spring은 변동이 많을때 tweened을 대체해서 사용한다. 아래의 예시에는 두개의 store가 있다. 하나는 원의 좌표, 하나는 원의 사이즈를 나타낸다. spring motion을 사용하여 커서의 위치를 나타내는 원과 클릭 이벤트에 따라 원의 크기가 바뀌는 에제이다.
<script>
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>
- spring 함수
store = spring(value: any, options)첫번째 파라미터는 변경값, 두번째 파라미터는 옵션이다. spring 함수는 store를 리턴한다. options에 설정할 수 있는 값을 살펴보자
- stiffness : 디폴트 0.15, 0과 1사이의 값, 값이 높을 수록 즉시 motion이 반영
- damping : 디폴트 0.8, 0과 1사이의 값, 값이 낮을 수록 스프링처럼 튕기는 motion 범위가 넓어진다
- precision : 디폴트 0.001, 스프링처럼 튕기는 동작이 정착된 것으로 간주하는 임곗값, 값이 클수록 스프링처럼 튕기는 횟수가 줄어들고 값이 낮을 수록 튕기는 횟수가 증가한다.
store.stiffness, store.damping, store.precision 속성을 변경할 수 있다.
tweened store와 동일하게, set과 update 함수를 제공된다.
tweened함수와의 차이점
: spring store의 값은 stiffness와 damping의 값에 따라 점차 변경된다. tweened store의 값은 고정된 duration 동안 변경되는 반면, spring store은 기본 속도에 의해 결정된 시간 동안 값이 변경되어 좀 더 자연스럽게 보이게 된다.
