在 Svelte 中如何处理动画？

在Svelte中处理动画是一个非常直观和强大的过程，它提供了几种不同的方法来实现动画效果，以增强用户界面的交互体验。这些方法包括使用CSS动画、过渡（transitions）及动画（animations）库。

1. CSS动画

Svelte允许开发者直接在组件的<style>标签中使用标准的CSS动画和@keyframes规则。这种方法的优点是简单易懂，且利用了浏览器原生的支持，能够确保良好的性能。

示例代码:

svelte
<style>
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .spinner {
    animation: spin 1s linear infinite;
  }
</style>

<div class="spinner">Loading...</div>

2. 过渡（Transitions）

Svelte内置了transition模块，提供了多种过渡效果如fade、slide、fly等，这些可以直接应用于元素的进入和退出动画。使用时只需要在对应元素上添加transition:fade等指令。

示例代码:

svelte
<script>
  import { fade, slide } from 'svelte/transition';
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <div transition:slide={{ duration: 300 }}>
    Slide Transition
  </div>
{/if}

3. 动画（Animations）

对于更复杂的动画需求，Svelte也提供了animation模块。与transition类似，你可以利用例如tweened和spring这样的函数来创建更细腻和控制更丰富的动画效果。

示例代码:

svelte
<script>
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  const number = tweened(0, {
    duration: 1000,
    easing: cubicOut
  });
</script>

{#await number}
  <p>Loading...</p>
{:then num}
  <p>{num.toFixed(2)}</p>
{/await}

<button on:click={() => number.set(Math.random() * 100)}>Animate</button>

通过这些方法，Svelte使得在Web应用中实现动画变得非常简单而高效。它的动画处理不仅支持丰富的视觉效果，还优化了性能和开发体验。