writable および readable ストアに加えて、Svelte はユーザーインターフェースにモーションを追加するためのストアを提供しています。

まずは progress ストアを tweened ストアに変更してみましょう。

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

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

ボタンをクリックすると、プログレスバーが新しい値にアニメーションします。しかし、少しロボット的で物足りません。イージング関数を追加する必要があります。

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

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

svelte/easing モジュールには、Penner イージング方程式が含まれています。または、独自の p => t 関数を提供することもできます。ここで、p と t はどちらも 0 から 1 の間の値です。

tweened で利用可能なオプションの完全なセット

• delay — tween が開始されるまでのミリ秒数
• duration — tween の期間（ミリ秒単位）、または (from, to) => milliseconds 関数。これにより、値の大きな変化に対してより長い tween を指定できます（例）。
• easing — p => t 関数
• interpolate — 任意の値間を補間するためのカスタム (from, to) => t => value 関数。デフォルトでは、Svelte は数値、日付、および同じ形状の配列とオブジェクトを補間します（数値と日付、またはその他の有効な配列とオブジェクトのみが含まれている場合）。色文字列や変換行列などを補間する場合は、カスタム補間器を提供します。

これらのオプションは、2 番目の引数として progress.set および progress.update に渡すこともできます。その場合、デフォルト値がオーバーライドされます。set メソッドと update メソッドはどちらも、tween が完了すると解決される Promise を返します。