Svelte 补间动画：让你的 UI 栩栩如生

2023-10-12 23:10:31

Svelte 教程翻译（八、补间动画）

前言

Svelte 中的动画处理机制是其强大而独特的特性之一。它允许你轻松地创建流畅的动画，让你的用户界面更加富有吸引力。在本教程中，我们将探索 Svelte 的补间动画工具，从基础知识到高级技巧。

补间动画基础

Svelte 的补间动画依赖于一个名为 tweened 的指令。该指令允许你指定一个值，并让 Svelte 平滑地从当前值过渡到该值。

例如，以下代码将 progress 值从 0 过渡到 1：

<script>
  let progress = 0;
</script>

<div style="width: 100px; height: 100px; background: blue;">
  <progress value={progress} max={1}></progress>
</div>

这将创建一个进度条，从 0% 开始，逐渐增长到 100%。

高级技巧

持续时间和缓动函数

你可以使用 duration 和 easing 属性来控制动画的持续时间和缓动函数。

<script>
  let progress = 0;
</script>

<div style="width: 100px; height: 100px; background: blue;">
  <progress value={progress} max={1} duration={1000} easing="easeOut"></progress>
</div>

这将创建一个在 1 秒内从 0% 逐渐增长到 100% 的进度条，并使用缓动函数 easeOut 使其具有平滑的效果。

补间多个值

tweened 指令还可以同时补间多个值。

<script>
  let progress = 0;
</script>

<div style="width: 100px; height: 100px; background: blue;">
  <progress value={progress} max={1} duration={1000} easing="easeOut">
    <span style="color: white;">{progress * 100}%</span>
  </progress>
</div>

这将创建一个进度条，其中百分比值也将从 0% 逐渐增长到 100%。

使用存储值

有时，你可能希望在动画中使用存储值。Svelte 提供了 set 和 $ 符号，允许你设置和访问存储值。

<script>
  let progress = 0;
</script>

<div style="width: 100px; height: 100px; background: blue;">
  <progress value={progress} max={1} duration={1000} easing="easeOut">
    <span style="color: white;">{progress * 100}%</span>
  </progress>
  <button on:click={() => set(progress, 1)}>完成</button>
</div>