Part 3 / Motion / Tweens
SvelteKit の基本を学習したので、次は Svelte の高度なテクニックを学ぶ時間です。まずは motion から始めましょう。
値を設定して DOM が自動的に更新されるのを見るのは最高です。もっと最高なのは？それらの値を トゥイーン することです。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 easing equations が含まれています、あるいはpとtの両方が 0 から 1 の間の値を取る独自のp => t関数を指定することもできます。
tweened で利用可能なオプションの一覧です。
delay— トゥイーン開始までのミリ秒duration— ミリ秒単位のトゥイーンの持続時間、または(例えば値の変化が大きい場合に、より長いトゥイーンを指定出来るようにするための）(from, to) => milliseconds関数easing—p => t関数interpolate— 任意の値の間を補間するための自前の(from, to) => t => value関数。デフォルトでは、Svelte は数値や日付、同じ形の配列やオブジェクトの間を補間します (数値や日付、その他の有効な配列やオブジェクトのみを含む場合に限ります)。(例えば) 色文字列や変換行列を補間したい場合は、自前の関数を指定してください。
これらのオプションを progress.set や progress.update に第2引数として渡すこともでき、どちらの場合もデフォルトを上書きします。set と updateメソッドは、いずれもトゥイーンが完了した時点で resolve する promise を返します。
initialising