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

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

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

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

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

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

Svelte 存儲的快速入門

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

要創(chuàng)建存儲的實例，我們可以導(dǎo)入 writable 類型，并像這樣創(chuàng)建它：

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

clicks 變量是一個值為 0 的存儲。有兩種方法可以設(shè)置存儲的新值：set 和 update 方法。前者接收要設(shè)置為存儲的值，而后者接收一個回調(diào)函數(shù)，接受當(dāng)前值并返回新值。

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

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

<h1>Value {$clicks}</h1>
Increment
Set to 5

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

彈簧速成課程

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

這是一個最小的 Svelte 組件，它切換一個 <div> 的不透明度，并切換另一個 <code><div> 的 x 軸轉(zhuǎn)換（沒有任何動畫）。 <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>這些更改會立即應(yīng)用，因此讓我們看看如何對其進(jìn)行動畫處理。這就是彈簧的用武之地。在 Svelte 中，彈簧是一個存儲，我們可以在其上設(shè)置所需的值，但它不會立即更改，而是存儲內(nèi)部使用彈簧物理學(xué)逐漸更改值。然后，我們可以將我們的 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 函數(shù)，并為不透明度和轉(zhuǎn)換動畫設(shè)置不同的 spring 實例。轉(zhuǎn)換彈簧配置被故意設(shè)置為<em>非常有彈性</em>，以幫助稍后展示如何臨時關(guān)閉彈簧動畫并立即應(yīng)用所需更改（這將在以后派上用場）。腳本塊的末尾是用于設(shè)置所需屬性的點擊處理程序。然后，在 HTML 中，我們將變化的值直接綁定到我們的元素……就是這樣！這就是 Svelte 中基本彈簧動畫的全部內(nèi)容。</p> <p>唯一剩下的項目是 snapTransform 函數(shù)，我們將其轉(zhuǎn)換彈簧設(shè)置為其當(dāng)前值，但還將一個對象作為第二個參數(shù)傳遞，其中 hard: true。這具有立即應(yīng)用所需值而無需任何動畫的效果。</p> <p>此演示以及我們將在本文中看到的其余基本示例都位于此處：[此處應(yīng)插入演示鏈接]</p> <p>...(文章其余部分的偽原創(chuàng)，保持原文意思不變，并保持圖片位置和格式)</p> </div>