了解 Svelte 中的过渡和动画

作者
Tweet
Share
Share
Pin
0 Shares

优秀的动画能够显著提升用户体验，并为用户提供有效的反馈机制。Svelte 框架让在应用程序中集成动画和过渡变得非常简单，几乎无需依赖任何第三方 JavaScript 库。

创建 Svelte 项目

为了开始使用 Svelte，请确保您的计算机上已正确安装 Node.js 运行时环境和 Node Package Manager (NPM)。 打开终端并执行以下指令：

 npm create vite

这条命令将创建一个全新的 Vite.js 项目。 为您的项目命名，选择 Svelte 作为您使用的框架，并将变体设置为 JavaScript。 然后，切换到项目目录并执行以下命令以安装必要的依赖项：

 npm install

通过删除 “asset” 和 “lib” 文件夹，并清空 “App.svelte” 和 “App.css” 文件的内容，移除默认的样板代码。

在 Svelte 中应用补间动画

补间动画是一种动画和计算机图形技术，通过在关键帧之间生成中间帧来实现平滑、逼真的运动或过渡效果。Svelte 提供了补间实用程序，允许您对元素的数值属性进行动画处理，从而轻松在 Web 应用程序中创建流畅的过渡和动画。

补间实用程序是 “svelte/motion” 模块的一部分。要在组件中使用补间，必须像这样导入：

 import { tweened } from 'svelte/motion'

本质上，补间实用程序是一个可写的 Svelte 存储。 Svelte 存储基本上是一个 JavaScript 对象，用于管理状态。 补间存储具有两个主要的方法：”设置” 和 “更新”。 补间存储的基本语法如下：

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

上面的代码片段定义了一个名为 “y” 的变量，并将其绑定到补间存储。 在此存储中，有两个参数。 第一个参数代表 “y” 绑定应该具有的默认值。 第二个参数是一个对象，包含 “duration” 和 “easing” 两个键。 “duration” 定义补间动画应该持续的时间（以毫秒为单位），而 “easing” 定义缓动函数。

Svelte 中的缓动函数定义补间动画的行为。 这些函数位于 “svelte/easing” 模块中，这意味着您需要从该模块导入特定的函数，然后才能将其传递给补间存储。 Svelte 提供了一个缓动可视化工具，您可以使用它来探索不同缓动函数的行为。

为了充分展示如何使用补间实用程序，以下示例演示了如何使用补间存储来改变 Svelte 中元素的大小。

 <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>

上面的代码片段分别从 “svelte/motion” 和 “svelte/easing” 模块导入了 “tweened” 和 “bounceOut” 两个函数。 接着，声明了一个常量 “size”，它绑定到补间存储。 该存储的默认值为 0。 可以使用 “$” 符号访问该默认值（即存储值）。补间函数的第二个参数是一个带有 “easing” 键的对象，该键指向 “bounceOut” 缓动函数。

在标记部分，按钮元素有一个 “on:click” 指令，它会调用绑定到 “size” 的更新方法。 每次单击按钮时，此方法将 “$size” 存储值增加 3。 div 元素的内联样式取决于 “$size” 存储值。 当您在浏览器中运行此代码时，您会看到以下效果：

Svelte 中的过渡

为了将元素加入和移除文档对象模型 (DOM)，Svelte 提供了 “transition” 指令和一个名为 “svelte/transition” 的模块，该模块导出了可与 “transition” 指令一起使用的实用函数。 例如，要模糊 DOM 内外的元素，首先从 “svelte/transition” 导入 “blur” 函数：

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

然后，添加从 DOM 中挂载和卸载元素的功能。 在脚本标签中，创建一个名为 “visible” 的变量并将其设置为 “false”。

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

接着，使用 “if” 块有条件地渲染 “div”。 务必在 “div” 上添加 “transition” 指令并将其设置为 “blur”。

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

然后添加一个按钮以显示或隐藏 div。

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

当您在浏览器中运行此代码时，您应该看到以下效果：

“svelte/transition” 模块导出了七个函数，即：”fade”（淡入淡出）、”blur”（模糊）、”fly”（飞行）、”slide”（滑动）、”scale”（缩放）、”draw”（绘制）和 “crossfade”（交叉淡化）。Svelte 中的过渡可以接受参数。 例如，前面示例中的 “blur” 函数可以接受以下参数： “delay”（延迟）、”duration”（持续时间）、”easing”（缓动函数）、”opacity”（不透明度）和 “amount”（模糊的程度）。

除了过渡参数之外，Svelte 还提供了入口过渡和出口过渡，让您可以更好地控制元素的过渡效果。 考虑最后一个例子，如果要让元素的入口过渡是模糊的，而出口过渡是滑动的，该怎么做？ 可以这样操作：

 <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” 元素上不再有 “transition” 指令。相反，”transition” 指令已被 “in” 和 “out” 指令取代，它们分别指向 “blur” 和 “slide”。

动画 Svelte 元素

在 Svelte 中为元素设置动画最便捷的方法是使用 “svelte/animate” 中的 “flip” 功能。”Flip” 代表 “First, Last, Invert, Play”。它接受三个参数，即：”delay”（延迟）、”duration”（持续时间）和 “easing”（缓动）。请看以下代码：

 <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” div 中，keyed-each 块负责渲染 “shoppingList” 数组中的每个元素。

“container” div 的子 div 有一个指向 “flip” 功能的 “animate” 指令。 按下第一个按钮将按字母顺序对列表进行排序，而按下第二个按钮将重置列表。当您在浏览器中运行此代码时，您会看到以下效果：

为什么动画在任何 Web 应用程序中都很重要？

动画不仅仅是为了视觉上的吸引力；它们代表了用户体验增强和有效沟通的精髓。通过将美观与功能无缝融合，动画为 Web 应用程序注入了活力，使其不仅引人入胜，而且直观。