在昨天跟大家分享slider scale這兩個過場動畫,接下來今天介紹比不一樣的內容,就是透過畫出svg來呈現過場動畫。
本文同步放置於此
就如同字面意思draw
就是繪圖的意思,在svelte指的是在svg上面作畫,至於svg怎麼話可以看一下W3Schools SVG,這裡面有很多svg相關的知識。
這時又要複習一下關於 svelte 的過場動畫的基本知識了,簡單講就是下列三個步驟。
簡單用例子來呈現如下列程式碼。
<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
動畫,待後續有機會再跟大家介紹。