Motion (動態效果)

Tweens

Svelte 提供了 tweened 這個函式，可以簡單的建立一個由 A 轉變至 B 的平滑動畫。

以下方的 progress bar 為例，使用點擊按鈕來改變 progress bar 的進度。可以發現進度條的變化有一個簡易的動畫效果。

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

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

<progress value={$progress}></progress>

<button on:click={() => progress.set(0.5)}> 50% </button>

<button on:click={() => progress.set(1)}> 100% </button>

還可以使用 svelte/easing 來增加其他動畫效果。

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

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

Spring

spring 功能與 tweened 類似，提供了一種 Q 彈的效果動畫，spring 更適合時常變更值的場景。

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

    let coords = spring(
        { x: 50, y: 50 },
        {
            stiffness: 0.1,
            damping: 0.25,
        },
    );

    let size = spring(10);
</script>