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方式的運動，希望大家會喜歡