第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY26- 過場動畫 (三)

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>

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

小結

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *