苗條和春季動畫

Spring 動畫是讓UI 交互栩栩如生的絕佳方式。 Spring 動畫並非以恆定速率在一段時間內更改屬性，而是使用彈簧物理學來移動事物，從而給人以真實物體移動的印象，並能為用戶提供更自然的體驗。

我之前寫過關於Spring 動畫的文章。那篇文章基於React，使用react-spring 進行動畫處理。本文將探討在Svelte 中類似的思想。

CSS 開發人員！在控制動畫效果時，通常會想到緩動。您可以將“彈簧”動畫視為基於現實世界物理學的緩動子類別。

Svelte 實際上在框架中內置了彈簧，無需任何外部庫。我們將回顧之前關於react-spring 的文章前半部分的內容。但之後，我們將深入探討Svelte 中彈簧的所有使用方法，並將實際的實現留到以後的文章中。雖然這可能看起來令人失望，但Svelte 有一些React 中沒有的獨特功能，可以有效地與這些動畫基元集成。我們將花一些時間討論它們。

還有一點需要注意：本文中穿插的一些演示可能看起來很奇怪，因為我將彈簧配置為“彈性”更大，以產生更明顯的效果。如果您使用了任何演示的代碼，請務必找到適合您的彈簧配置。

這是Rich Harris 製作的一個很棒的REPL，用於展示各種彈簧配置及其行為。

Svelte 存儲的快速入門

在開始之前，讓我們快速瀏覽一下Svelte 存儲。雖然Svelte 的組件完全能夠存儲和更新狀態，但Svelte 也具有存儲的概念，允許您在組件外部存儲狀態。由於Svelte 的Spring API 使用存儲，因此我們將在此快速介紹其重要部分。

要創建存儲的實例，我們可以導入writable 類型，並像這樣創建它：

 import { writable } from "svelte/store";
const clicks = writable(0);

clicks 變量是一個值為0 的存儲。有兩種方法可以設置存儲的新值：set 和update 方法。前者接收要設置為存儲的值，而後者接收一個回調函數，接受當前值並返回新值。

 function increment() {
  clicks.update(val => val 1);
}
function setTo5() {
  clicks.set(5);
}

如果您無法實際使用狀態，那麼狀態就沒有用。為此，存儲提供了subscribe 方法，允許您收到新值的通知——但在組件內使用它時，您可以在存儲名稱前加上$ 字符，這告訴Svelte 不僅要顯示存儲的當前值，還要在它更改時更新。例如：

<h1 id="Value-clicks"> Value {$clicks}</h1>
Increment
Set to 5

這是一個完整的、可工作的代碼示例。存儲提供了許多其他功能，例如派生存儲（允許您將存儲鏈接在一起）、可讀存儲，甚至能夠在首次觀察存儲和不再有觀察者時收到通知。但是對於本文的目的，上面顯示的代碼是我們需要關注的全部內容。請參閱Svelte 文檔或交互式教程以了解更多信息。

彈簧速成課程

讓我們快速介紹一下彈簧及其作用。我們將查看一個簡單的UI，它更改某些元素的呈現方面（不透明度和轉換），然後查看動畫更改。

這是一個最小的Svelte 組件，它切換一個<div>的不透明度，並切換另一個<code><div>的x 軸轉換（沒有任何動畫）。<pre class="brush:php;toolbar:false">&lt;div style=&quot;opacity: {shown ? 1 : 0}&quot;&gt; Content to toggle&lt;/div&gt; &lt;br&gt;Toggle &lt;hr&gt;&lt;div style=&quot;transform: translateX({moved}px)&quot;&gt;I'm a box.&lt;/div&gt; &lt;br&gt;Move it!</pre> <p>這些更改會立即應用，因此讓我們看看如何對其進行動畫處理。這就是彈簧的用武之地。在Svelte 中，彈簧是一個存儲，我們可以在其上設置所需的值，但它不會立即更改，而是存儲內部使用彈簧物理學逐漸更改值。然後，我們可以將我們的UI 綁定到這個變化的值，以獲得不錯的動畫效果。讓我們看看它的實際效果。</p> <pre class="brush:php;toolbar:false"> import { spring } from &quot;svelte/motion&quot;; const fadeSpring = spring(1, { stiffness: 0.1, damping: 0.5 }); const transformSpring = spring(0, { stiffness: 0.2, damping: 0.1 }); const toggleFade = () =&gt; fadeSpring.update(val =&gt; (val ? 0 : 1)); const toggleTransform = () =&gt; transformSpring.update(val =&gt; (val ? 0 : 500)); const snapTransform = () =&gt; transformSpring.update(val =&gt; val, { hard: true }); &lt;div style=&quot;opacity: {$fadeSpring}&quot;&gt;Content to fade&lt;/div&gt; &lt;br&gt;Fade Toggle &lt;hr&gt;&lt;div style=&quot;transform: translateX({$transformSpring}px)&quot;&gt;I'm a box.&lt;/div&gt; &lt;br&gt;Move it! Snap into place</pre> <p>我們從Svelte 獲取spring 函數，並為不透明度和轉換動畫設置不同的spring 實例。轉換彈簧配置被故意設置為<em>非常有彈性</em>，以幫助稍後展示如何臨時關閉彈簧動畫並立即應用所需更改（這將在以後派上用場）。腳本塊的末尾是用於設置所需屬性的點擊處理程序。然後，在HTML 中，我們將變化的值直接綁定到我們的元素……就是這樣！這就是Svelte 中基本彈簧動畫的全部內容。</p> <p>唯一剩下的項目是snapTransform 函數，我們將其轉換彈簧設置為其當前值，但還將一個對像作為第二個參數傳遞，其中hard: true。這具有立即應用所需值而無需任何動畫的效果。</p> <p>此演示以及我們將在本文中看到的其餘基本示例都位於此處：[此處應插入演示鏈接]</p> <p> ...(文章其餘部分的偽原創，保持原文意思不變，並保持圖片位置和格式)</p> </div>