苗条和春季动画

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 轴转换（没有任何动画）。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登录后复制</div></div> <p>这些更改会立即应用，因此让我们看看如何对其进行动画处理。这就是弹簧的用武之地。在 Svelte 中，弹簧是一个存储，我们可以在其上设置所需的值，但它不会立即更改，而是存储内部使用弹簧物理学逐渐更改值。然后，我们可以将我们的 UI 绑定到这个变化的值，以获得不错的动画效果。让我们看看它的实际效果。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登录后复制</div></div> <p>我们从 Svelte 获取 spring 函数，并为不透明度和转换动画设置不同的 spring 实例。转换弹簧配置被故意设置为<em>非常有弹性</em>，以帮助稍后展示如何临时关闭弹簧动画并立即应用所需更改（这将在以后派上用场）。脚本块的末尾是用于设置所需属性的点击处理程序。然后，在 HTML 中，我们将变化的值直接绑定到我们的元素……就是这样！这就是 Svelte 中基本弹簧动画的全部内容。</p> <p>唯一剩下的项目是 snapTransform 函数，我们将其转换弹簧设置为其当前值，但还将一个对象作为第二个参数传递，其中 hard: true。这具有立即应用所需值而无需任何动画的效果。</p> <p>此演示以及我们将在本文中看到的其余基本示例都位于此处：[此处应插入演示链接]</p> <p>...(文章其余部分的伪原创，保持原文意思不变，并保持图片位置和格式)</p> </div>