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

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

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

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

還有一點(diǎn)需要注意：本文中穿插的一些演示可能看起來(lái)很奇怪，因?yàn)槲覍椈膳渲脼椤皬椥浴备?，以產(chǎn)生更明顯的效果。如果您使用了任何演示的代碼，請(qǐng)務(wù)必找到適合您的彈簧配置。

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

Svelte 存儲(chǔ)的快速入門

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

要?jiǎng)?chuàng)建存儲(chǔ)的實(shí)例，我們可以導(dǎo)入writable 類型，並像這樣創(chuàng)建它：

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

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

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

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

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

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

彈簧速成課程

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

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