設(shè)置數(shù)值并觀察DOM的自動(dòng)更新是很酷的。知道更酷的是什么嗎？變化這些值。Svelte包括一些工具，可以幫助你建立靈活的用戶界面，使用動(dòng)畫來傳達(dá)變化。

讓我們先把 ?progress?存儲(chǔ)改成一個(gè)?Tweened?值。

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

	const progress = tweened(0);
</script>

單擊這些按鈕會(huì)使進(jìn)度條以動(dòng)畫方式顯示其新值。雖然它有點(diǎn)機(jī)械化并且不令人滿意。我們需要添加一個(gè)easing(緩動(dòng))函數(shù)：

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

	const progress = tweened(0, {
		duration: 400,
		easing: cubicOut
	});
</script>

svelte/easing? 模塊包含 Penner 緩動(dòng)方程，或者您可以提供自己的 ?p => t? 函數(shù)，其中 ?p? 和 ?t? 都是介于 0 和 1 之間的值。

可用于?tweened?的全部選項(xiàng)。

• ?delay? — tween 開始前的毫秒數(shù)
• ?duration? — 以毫秒為單位的 tween 持續(xù)時(shí)間，或者一個(gè)?(from,to)=> milliseconds?的函數(shù)，允許你（例如）為更大的值變化指定更長的 tweens。
  
• ?easing? — 一個(gè) ?p => t? 函數(shù)
• ?interpolate? — 一個(gè)自定義 ?(from, to) => t => value? 用于在任意值之間進(jìn)行插值的函數(shù)。默認(rèn)情況下，Svelte 將在數(shù)字、日期和形狀相同的數(shù)組和對象之間進(jìn)行插值（只要它們只包含數(shù)字和日期或其他有效的數(shù)組和對象）。如果要插入（例如）顏色字符串或轉(zhuǎn)換矩陣，請?zhí)峁┳远x插值器

您還可以將這些選項(xiàng)作為第二個(gè)參數(shù)傳遞給 ?progress.set? 和 ?progress.update?，在這種情況下它們將覆蓋默認(rèn)值。 ?set? 和 ?update? 方法都返回一個(gè)在 tween 完成時(shí)解析的 promise。

示例代碼

• App.svelte

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

	const progress = writable(0);
</script>

<style>
	progress {
		display: block;
		width: 100%;
	}
</style>

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