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

easing関数とは

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

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

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

公式が速度変化のグラフを用意してくれているが、
正直表示してみないとよくわからないので、今回は表示させてみた。

番号	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

2. bounce

3. circ

4. cubic

5. elastic

6. expo

7. quad

8. quart

9. quint

10. sine

結論

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

検証コード

<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>