iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 26

DAY26- 過場動畫 (三)

  • 分享至 

  • xImage
  •  

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動畫,待後續有機會再跟大家介紹。


上一篇
DAY25- 過場動畫 (二)
下一篇
DAY27- 過場動畫 (四)
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言