当前位置：首页 > article >正文

【前端】Svelte：动画效果

article 2024/11/13 1:14:12

在现代前端开发中，动画效果可以大大提升用户体验，使应用更生动、易用。Svelte 提供了灵活的动画 API，让开发者能够快速实现从简单过渡到复杂动画的各种效果。本文将系统性地介绍 Svelte 的动画功能，并通过多个示例演示如何创建动感十足的用户界面。

Svelte 动画功能概览

Svelte 提供的动画功能主要包括以下三种：

过渡（Transition）：控制元素在进入或离开视图时的动画效果。
动画（Animate）：用于处理 DOM 中元素位置变化时的动画。
自定义动画（Spring 和 Tweened）：使用弹簧效果或缓动控制数值或属性的动画。

每种方式各具特色，适用于不同的场景。

过渡动画（Transition）

过渡动画用于元素在视图中进入或消失时的效果，比如渐入、滑动等。Svelte 提供了多个内置的过渡效果，例如 fade、slide、scale 等。

基本用法：`fade` 和 `slide`

在 Svelte 中，我们可以使用 in: 和 out: 指令来实现动画效果。例如，in:fade 表示元素进入时的渐入效果，而 out:slide 表示元素离开时的滑动效果。

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

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

{#if visible}
  <div in:fade out:slide>
    This is a fading and sliding element.
  </div>
{/if}

在此示例中，in:fade 和 out:slide 控制元素在进入和离开时的动画。点击按钮后，元素将会逐渐淡入淡出，并伴随滑动效果。

自定义动画参数

可以通过传递参数自定义过渡效果的持续时间、延迟和 easing（缓动函数）。

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

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

{#if visible}
  <div in:fly="{{ x: 200, duration: 800, delay: 300 }}">
    This element flies in with a delay.
  </div>
{/if}

上述代码为 fly 过渡效果传递了参数：x 表示水平偏移量，duration 控制动画持续时间，delay 控制延迟。

位置动画（Animate）

Svelte 提供了 animate:flip 来自动处理 DOM 中元素位置变化时的动画。比如，当列表项顺序变化时，flip 动画会平滑地将元素移动到新的位置。

示例：排序列表中的位置动画

<script>
  import { flip } from 'svelte/animate';
  let items = ['Apple', 'Banana', 'Cherry'];

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<button on:click={shuffle}>Shuffle</button>

<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

在这个示例中，每次点击“Shuffle”按钮时，列表顺序将随机打乱，并且 flip 动画将使元素平滑过渡到新位置。

自定义动画：`Spring` 和 `Tweened`

Spring 和 Tweened 允许对数值进行平滑变化控制，是 Svelte 提供的用于创建自定义动画的工具。

`Tweened` 动画

tweened 的特点是通过缓动动画过渡到目标值。我们可以指定缓动函数和动画持续时间。

<script>
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';
  
  // 初始化 tweened 变量，并设置持续时间和缓动函数
  let count = tweened(0, { duration: 2000, easing: cubicOut });

  // 定义增加 count 的函数，使用 .set() 直接设置目标值
  function increase() {
    count.set($count + 10);
  }
</script>

<button on:click={increase}>Increase Count</button>
<p>Animated Count: {$count}</p>

在此示例中，点击按钮后 count 的值会以 cubicOut 缓动方式缓慢增加。

`Spring` 动画

spring 使用弹簧物理效果来实现更自然的动画。我们可以配置 stiffness 和 damping 来控制动画的弹性。

<script>
  import { spring } from 'svelte/motion';

  // 初始化 spring 变量，并设置弹簧参数
  let x = spring(0, { stiffness: 0.1, damping: 0.4 });

  // 定义移动函数，通过 .set() 更新位置
  function move() {
    x.set($x + 100);
  }
</script>

<button on:click={move}>Move</button>
<p style="transform: translateX({$x}px);">I move like a spring!</p>

在此示例中，每次点击按钮，x 会根据弹簧效果进行位移，使元素产生自然的弹跳移动效果。

综合示例：页面加载动画

综合以上内容，我们可以创建一个简单的页面加载动画，展示多个过渡效果和动画的组合使用。

<script>
  import { onMount } from 'svelte';
  import { fade, fly, scale } from 'svelte/transition';
  import { spring, tweened } from 'svelte/motion';
  let loading = true;
  let scaleValue = tweened(0, { duration: 1000 });
  let position = spring(0, { stiffness: 0.05, damping: 0.25 });

  // 模拟页面加载
  onMount(() => {
    setTimeout(() => {
      loading = false;
    }, 3000);

    scaleValue.set(1);
    position.set(100);
  });
</script>

{#if loading}
  <div in:fade={{ duration: 500 }} out:fly={{ x: 300 }}>
    <h2>Loading...</h2>
  </div>
{:else}
  <div style="transform: translateY({$position}px) scale({$scaleValue});" in:scale>
    <h2>Welcome to My Site!</h2>
  </div>
{/if}