SvelteKit svelte/easing関数すべて試してみた。

# easing関数とは

transitionやanimationなどを使うときに、
時間の経過とともにオブジェクトがどのような速度で、変化するかを指定するもので、
10種類のeaseing関数がそれぞれ`in`、`out`、`inout`のバリエーションと、`linear`の合計31種類が用意されています。

`In`は消えるときの変化。
`Out`は表示時の変化。
日本語的には逆に勘違いしそうなので注意。

`InOut`は消えるとき、表示時両方に変化をつける方法。

[公式](https://svelte.jp/examples/easing)が速度変化のグラフを用意してくれているが、
正直表示してみないとよくわからないので、今回は表示させてみた。


|番号|ease|in|out|inOut|
|----|----|----|----|----|
|1|back   |`backIn`   |`backOut`   |`backInOut`|
|2|bounce |`bounceIN` |`bounceOut` |`bounceInOut`|
|3|circ   |`circIN`   |`circOut`   |`circInOut`|
|4|cubic  |`cubicIN`  |`cubicOut`  |`cubicInOut`|
|5|elastic|`elasticIN`|`elasticOut`|`elasticInOut`|
|6|expo   |`expoIN`   |`expoOut`   |`expoInOut`|
|7|quad   |`quadIN`   |`quadOut`   |`quadInOut`|
|8|quart  |`quartIN`  |`quartOut`  |`quartInOut`|
|9|quint  |`quintIN`  |`quintOut`  |`quintInOut`|
|10|sine   |`sineIN`   |`sineOut`   |`sineInOut`|

## 使ったもの

* Vite + Svelte + Typescript

## 検証コード・画面

最初に載せると見づらくなるので最後に載せます。

# easing関数を全て試していく。

## 1. back

![backInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/bd8b04d2-d0d2-161b-8093-7b4353234477.gif)

## 2. bounce

![bounceInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/49f97571-7b3b-85f8-53aa-9b48b9d11c16.gif)

## 3. circ

![circInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/151551c1-8919-dab2-dd0d-44d5f55ca788.gif)

## 4. cubic

![cubicInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/a39c2074-340b-d4f9-a921-281ea9cd8a29.gif)

## 5. elastic

![elasticInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/90088b68-68ce-7df4-718e-1cb04b0b01c0.gif)

## 6. expo

![expoInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/8a754fa5-a730-4685-b089-44723d07079a.gif)

## 7. quad

![quadInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1719aa7c-f5cb-75ad-1083-eb4cdc1774d1.gif)

## 8. quart

![quartInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/266d9533-02cd-f8cf-8410-a51cbbd4fe86.gif)

## 9. quint

![quintInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/9fe83cf9-029a-e0b6-dc03-7ec714ab5046.gif)

## 10. sine

![sineInOut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/4be3b8b6-22b6-0887-73de-14d9506683c4.gif)

# 結論

## よく差がわかりません..."(-""-)"ムムム。<br>(こだわらないならどれでもよい印象ｗ)


## 検証コード

```vue
<script lang="ts">
	import { backIn, backOut, backInOut, bounceIn, bounceOut, bounceInOut, circIn, circOut, circInOut, cubicIn, cubicOut, cubicInOut, elasticIn, elasticOut, elasticInOut, expoIn, expoOut, expoInOut, quadIn, quadOut, quadInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, sineIn, sineOut, sineInOut } from 'svelte/easing';
	import { crossfade } from 'svelte/transition';

    const title = 'backIn'

	const [send, receive] = crossfade({
		duration: d => Math.sqrt(d * 200),

		fallback(node, params) {
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;

			return {
				duration: 1000,
				easing: quintOut,
				css: t => `
					transform: ${transform} scale(${t});
					opacity: ${t}
				`
			};
		}
	});

	interface Todo {
		id: number
		content: string
	}

	let todos: Array<Todo> = [];

	const click = () => {
		todos.push({ id: 1, content: title })
		todos = todos
		setTimeout(() => {todos = []}, 2000)
	}
</script>

<button on:click={click}>実行</button>
<div class='m-auto'>
	<div>
		{#each todos as todo (todo.id)}
			<p
				in:receive="{{key: todo.id}}"
				out:send="{{key: todo.id}}"
			>
				{todo.content}
			</p>
		{/each}
	</div>
</div>

<style>
	.m-auto {
		margin: auto;
	}

	p {
		position: relative;
		line-height: 1.2;
		padding: 0.5em 2.5em 0.5em 2em;
		margin: 0 0 0.5em 0;
		border-radius: 2px;
		user-select: none;
		border: 1px solid hsl(240, 8%, 70%);
		background-color:hsl(240, 8%, 93%);
		color: #333;
	}
</style>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/0a7acc4d-d2e3-0f7d-48c8-07fb1410dacc.png)