[Svelte] Motion - tweened, spring example

<script>
import {tweened, spring} from 'svelte/motion'
import {cubicOut} from 'svelte/easing'

// 0.2초 후에 0.4초 동안 cubicOut 이라는 동작을 수행한다.
// tweened 함수는 store를 반환한다.
const progress = tweened(0, {
	delay: 200,
	duration: 400,
	easing: cubicOut
})

// spring은 자주 변경되는 값에 사용하는 것이 좋다.
// spring 함수는 store를 반환한다.
let coords = spring({x:10, y:10}, {
	stiffness: 0.1,
	damping: 0.25,
	precision: 0.01
})
</script>
<div id="tweened">
	<h1>
		1. Tweened Exmple
	</h1>
	<progress value={$progress} min=0 max=100></progress>
	<button on:click={() => $progress = 0}> 0% </button>
	<button on:click={() => $progress = 50}> 50%</button>
	<button on:click={() => $progress = 100}> 100% </button>
</div>

<div id="spring">
	<h1>
		2. Spring Exmple
	</h1>
	<div class="ranges">
		<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>
		<label>
			<h3>Precision ({coords.precision})</h3>
			<input bind:value={coords.precision} type="range" min=0 max=10 step="0.01"/>
		</label>
	</div>
	<svg on:mousemove={e => coords.set({x: e.clientX, y: e.clientY})}>
		<circle cx={$coords.x} cy={$coords.y} r={10}/>
	</svg>
</div>


<style>
	svg{position: absolute; top:0px; width:100%;height:100%;}
	circle{fill:red}
	div#tweened{width:100%; height:120px;}
	div#spring div.ranges{position: absolute; float:left}
</style>