iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

motion spring

motion spring 是svelte motion的另一個工具,它的內容跟motion tweened很類似,簡單講就是在處理影格動畫的內插方法,對於tweened而言動態較為直線的,對於spring而言動態較為曲線。

本文同步放置於此

motion spring 的用途

大家應該會問甚麼時候要用motion tweened而甚麼時候要用motion spring,筆者認為看起來舒服比較重要,例如昨天分享的tweened用在progress bar上面,那spring要用在哪裡呢?今天就來分享一下spring的用途跟實作。

motion spring 的實作

今天來跟大家分享一下軌跡球的實作,首先先來看一下下面的例子。

<script>
	import { writable } from 'svelte/store';

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

<style>
	svg { width: 100%; height: 100%; margin: -8px; }
	circle { fill: #ff3e00 }
</style>

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

這個例子用writable store實作,大家可以體驗看看目前的動態,接下來我們可以試試看tweened的方式來實作,大家可以看看以下的修改。

<script>
	import { tweened } from 'svelte/motion';

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

如果用motion tweened實作是不是動態比較平滑一點呢。接下來是示範一下用spring來實作,大家可以看看以下的修改。

<script>
	import { spring } from 'svelte/motion';

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

大家可以跟上面兩個例子比照一下,是不是用spring的動態更平順一點。

小結

今天跟大家分享svelte motion的第二個部分spring方式的運動,希望大家會喜歡


上一篇
DAY21- 動態 tweened
下一篇
DAY23- html的class標籤
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言