了解 Svelte 中的過渡和動畫

Maya Patel included in Programming Web Development Javascript Computer Animation

2023-09-27 341 words 2 minutes

Contents

如果做得好，動畫可以改善用戶體驗，並且是向用戶發送回饋的好方法。 Svelte 讓您可以輕鬆地將動畫和過渡合併到應用程式中，幾乎不需要第三方 JavaScript 程式庫。

設定 Svelte 項目

要開始使用 Svelte，必須確保 Node.js 執行時間環境和 Node Package Manager (NPM)（方便 JavaScript 應用程式的套件安裝）已正確安裝在您的運算裝置上。若要啟動設定過程，請開啟終端機視窗並執行下列命令:

 npm create vite

首先，為您的專案命名，然後選擇 Svelte 作為首選框架。接下來，透過在安裝過程中選擇適當的選項將其配置為使用 JavaScript。然後，導航到專案的根資料夾並在終端機或命令提示字元上執行所需的依賴項安裝命令。

 npm install

該任務需要透過消除「assets」和「lib」目錄、清除「App.svelte」和「App.css」檔案中的內容來消除專案中的冗餘程式碼。

如何在 Svelte 中使用補間

補間是指動畫和電腦圖形學中使用的一種方法，涉及在兩個關鍵幀之間生成中間幀以產生無縫且自然的運動或變換。 Svelte 框架透過對動畫元素採用數值，提供了一種利用該技術的有效方法，從而促進在 Web 應用程式中創建平滑且響應靈敏的過渡。

Tweened 實用程式屬於 Svelte/Motion 模組，可透過遵循指定語法的 import 語句整合到元件中。

 import { tweened } from 'svelte/motion'

Svelte 中的補間實用程式可作為可自訂的可寫入存儲，可讓使用者有效管理應用程式的狀態。該實用程式由兩個主要方法組成，即“設定”和“更新”，使開發人員能夠有效地操作資料。本質上，補間儲存採用 JavaScript 物件的形式，提供了一種可存取的方法來監督和控制應用程式內動態內容的演進。

 const y = tweened(defaultValue, {
    duration: [time-in-milliseconds],
    easing: [easing-function],
})

第一個參數表示的綁定元素的初始值，作為 y 綁定的預設；以及一個包含兩個屬性的對象，即「duration」和「easing」。前者指定補間持續的時間跨度（以毫秒為單位），而後者則指定動畫過程中要套用的緩動函數。

Svelte 領域內的緩動函數建立了過渡行為，它們包含在 svelte/easing 模組中。因此，必須從該網域匯入特定函數才能將其合併到補間儲存庫中。 Svelte 框架提供了一個緩動視覺化工具，使用戶能夠研究各種緩動函數所展示的行為模式。

為了有效地演示 Svelte 環境中「tween」實用程式的功能，請考慮以下範例，其中我們利用「tween」儲存來逐步放大螢幕組件的尺寸。

 <script>
  import { tweened } from "svelte/motion";
  import { bounceOut } from "svelte/easing";

  const size = tweened(0, {
    easing:bounceOut
  })
</script>

<div class="container">
  <div style={`height: ${$size * 30}px;`}>
  </div>
</div>
<button on:click={()=>(size.update(()=>$size\+3))}>Increase size</button>

<style>
  .container{
    display: flex;
    align-items: flex-end;
    margin-top: 400px;
  }
  div{
    height:0;
    width:100px;
    background-color: red;
  }
</style>

程式碼導入兩個函數“tweened”和“bounceOut”，它們位於各自的 Svelte 模組“svelte/motion”和“svelte/easing”內。隨後，定義一個常數變數並綁定到tweened存儲，其預設值由this.$options.animate=true表示； 。可以使用“$”符號存取此預設值。最後，「tweened」函數接受一個附加參數，一個包含「easing」屬性的對象，該屬性引用「svelte/easing」模組提供的「bounceOut」緩動函數。

標記段包含一個帶有 onclick 屬性的按鈕元素，該屬性呼叫大小綁定的更新方法。點選該按鈕後，更新方法會將美元符號大小儲存變數增加 3。此外，div 元素擁有由美元符號大小儲存值控制的內聯樣式。當在網頁瀏覽器中執行時，使用者將觀察到以下視覺呈現:

透過GIPHY

Svelte 中的過渡

為了促進在 Svelte 中合併和刪除文件物件模型 (DOM) 中的元素的過程，它採用了稱為「transition」指令的指令以及名為「svelte/transition」的專用模組。此模組提供了一系列實用功能，可以與「轉換」指令一起用於各種目的。作為說明，可以使用從「svelte/transition」模組匯入的「blur」函數來在元素進入或退出 DOM 時在元素上建立淡入或淡出效果。

 <script>
import { blur } from 'svelte/transition';
</script>

為了實現從文檔物件模型 (DOM) 掛載和卸載元素的功能，首先引入一個布林標誌作為腳本屬性，該標誌最初設定為「 false 」。這將充當頁面上元素的可見性指示器。透過利用此功能，開發人員可以透過在運行時切換特定元素的可見性來有效管理程式碼與 DOM 的互動。

 <script>
import { blur } from 'svelte/transition';
let visible = false;
</script>

當然，這裡有一個如何在Vue.js 中使用v-if 指令實現此目的的範例:html export default {data() {return {isBlur: false//設定初始值僅用於演示目的};},compulated: {/** 基於 isBlur 屬性定義自訂 CSS 類別 */get BlurClass() {return isBlur ? ‘模糊’:‘’；}}}；

 {#if visible}
<div>Here I am...</div>
{/if}

將提供的程式碼片段合併到 HTML 檔案中，並將其作為網頁內容的一部分。該程式碼將顯示一個帶有按鈕的段落，該按鈕可切換包含有關產品的附加資訊的 div 元素的可見性。

 <button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>

在 Web 瀏覽器環境中執行程式碼時，預計會觀察到以下視覺呈現:

透過GIPHY

淡入淡出、模糊、飛行、滑動、縮放、繪製和交叉淡入淡出。這些過渡是高度可自訂的，並且可以配置各種參數，例如延遲、持續時間、緩動、不透明度和數量，每個參數都用於相應地增強或修改其效果。

當然！怎麼樣?除了根據 enter 或 exit 等屬性控制轉換之外，Svelte 還透過 in 和 out 轉換提供了更細粒度的方法。例如，考慮我們前面的範例，我們希望元素在進入時具有模糊效果，在離開時具有滑動效果。我們可以透過使用適當的轉換來實現這一點，如下所示:

 <script>
  import { blur, slide } from 'svelte/transition';
  let visible = false;
  </script>

{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}

<button on:click={()=>visible=!visible}>
  {visible ? "Hide" : "Show"}
  </button>

在上述程式碼片段中，值得注意的是 div 元素中缺少轉換指令。相反，使用關鍵影格技術指定了兩個過渡，即“模糊”和“幻燈片”，它們由各自 @keyframe 規則的“from”和“to”屬性指向。

透過 GIPHY

動畫苗條元素

首先、最後、反轉、播放。它包含三個關鍵參數-延遲、持續時間和緩動-這些參數對於在動畫過程中創建迷人的視覺效果至關重要。為了說明其功能，讓我們檢查以下範例程式碼。

 <script>
  import { flip } from "svelte/animate";
  let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
  let shoppingList = [...originalList];
</script>

<div class="container">
  {#each shoppingList as item (item)}
    {@const number = shoppingList.indexOf(item)}
    <div animate:flip>
      {number \+ 1}. {item}
    </div>
  {/each}
</div>

<button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>

提供的程式碼片段演示了 Svelte 應用程式中「animate」指令的實作。在``標籤內，執行flip函數的初始輸入。定義了兩個單獨的數組，即“originalList”和“shoppingList”。在包含類別屬性「container」和 ID 屬性「containerID」的封閉「div」元件中，「keyed-each」區塊用於呈現「shoppingList」陣列中的每個項目。

容器及其子元素的 HTML 結構如下:html Reset Sort AZ 當程式碼在 Web 瀏覽器中執行時，它會顯示上述三個元素。「容器」div 的子級 div 包含一個動畫指令 (data-animate)，在呼叫時會觸發 flip 函數。

透過GIPHY

為什麼動畫在任何 Web 應用程式中都很重要?

動畫所具有的深度超越了單純的視覺吸引力。它們涵蓋了使用者體驗完善和連貫表達的核心。透過形式和功能的巧妙融合，動畫為數位介面注入了活力，將其從靜態轉變為互動式和直覺式。