draw

在昨天跟大家分享slider scale這兩個過場動畫，接下來今天介紹比不一樣的內容，就是透過畫出svg來呈現過場動畫。

draw 是甚麼

就如同字面意思draw就是繪圖的意思，在svelte指的是在svg上面作畫，至於svg怎麼話可以看一下W3Schools SVG，這裡面有很多svg相關的知識。

draw 怎麼用

這時又要複習一下關於 svelte 的過場動畫的基本知識了，簡單講就是下列三個步驟。

• import svelte/transition
• 設定條件
• 設定條件成立是要出現的過場動畫

簡單用例子來呈現如下列程式碼。

<script>
    import { draw } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';
    let isVisable = true;
</script>
<input type="checkbox" bind:checked={isVisable} />
<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">

    {#if isVisable}
        <path transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"
                    d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
                    fill="none"
                    stroke="cornflowerblue"
                    stroke-width="0.1px"
                    stroke-linejoin="round"
        />
      <polyline transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}" points="1,1 1.5,1.5 1.8,2.0 2.2,3.0 3.1,4.5 1.5,4.5"
  style="fill:none;stroke:black;stroke-width:0.1px" />
    {/if}
</svg>

這邊說明一下，因為是繪圖所以這裡能夠用的是path跟polyline，然後可以參考W3Schools SVG來操作svg的path跟polyline，接下來使用transition:draw這個svelte屬性，最後給予控制draw的參數，duration繪畫的期間多少毫秒，delay延遲多少毫秒，easing是消失的動畫怎麼呈現。

小結

今天跟大家分享draw過場動畫的用法，這部分還有很多沒有說明的例如easing動畫，待後續有機會再跟大家介紹。