Svelte中的基本过渡和动画

简介

在Svelte中使用动画的一个好处是，你不需要下载额外的软件包。Svelte中内置了动画和转场功能。这意味着你可以在不增加应用程序大小的情况下，为其添加强大而愉悦的互动。这对提高你的应用程序的速度和性能也有很大的帮助。

在这篇文章中，我将解释过渡和动画如何在Svelte中工作。我还会提供一些演示，让我们在实践中应用我们获得的知识。

开始学习

我们从安装sveltejs 包开始，代码如下。

npx degit sveltejs/template my-svelte-project

Svelte中的转场

Svelte提供了七个过渡函数：fade,blur,fly,slide,scale,draw, 和crossfade 。要使用这些函数中的任何一个，你必须从svelte/transition 模块中导入它们。

下面是一个我们将对图片旋转木马进行过渡的演示。

让我们来看看如何为图片旋转木马添加过渡效果。将下面的代码片段添加到你的App.svelte 文件中。

<script>
  import { fade, blur, fly, slide, scale } from "svelte/transition";
  import { quintOut } from "svelte/easing";

  let books = [
    //array of links to books
  ];

  setInterval(() => {
   //logic goes here
  }, 1000);
</script>
<section style="display:flex;justify-content:center">
  {#each books as book, i}
    {#if activeIndex === i}
      <img
        transition:scale={{ delay: 250, duration: 300, easing: quintOut }}
        style="position:absolute"
        src={book}
        width="500"
        height="300"
        alt=""
      />
    {/if}
  {/each}
</section>

在上面的代码片断中，我们导入了我们要使用的过渡函数。我们还导入了quintOut 缓和函数。Svelte提供了几个开箱即用的缓和函数。

为了给Svelte添加转场，我们使用了transition 指令。我们将transition 指令传递到img 元素中。

过渡函数可以接受参数。我们通过传入一个配置对象来定义过渡的delay,duration, 和easing 。

输入和输出过渡

在Svelte中处理转换时，我们可以为元素的in 和out 转换定义单独的转换函数。下面的gif图是我们要做的in 和out 转场的演示。

让我们在另一个演示中实现in 和out 转场。将下面的代码复制到你的App.svelte 文件中。

<script>
  import { fade, scale } from "svelte/transition";
  let show = false;
</script>

<label>
  Toggle
  <input type="checkbox" bind:checked={show} />
</label>
<hr />
{#if show}
  <h1 in:scale out:fade>My name is Nefe James</h1>
{/if}

我们把transition 指令换成in 和out 。像transition 指令一样，参数也可以传入in 和out 。

自定义转场

你可能想定义自定义过渡，你可以在Svelte中这样做。在引擎盖下，每个过渡是一个函数，获得一个节点和一个参数。

下面的gif图显示了我们将创建的自定义过渡。

让我们看看如何在Svelte中创建自定义转场。将下面的代码复制到你的App.svelte 文件中。

<script>
  import { elasticInOut } from "svelte/easing";
  let isActive = true;
  const customTransition = () => {
    return {
      css: (t) => {
        return `
        transform: scale(${t});
        `;
      },
      easing: elasticInOut,
      duration: 2000,
    };
  };
</script>

<main>
  <button on:click={() => (isActive = !isActive)}>
    {#if isActive} Hide Box {:else} Show Box{/if}
  </button>
  {#if isActive}
    <div class="box" transition:customTransition />
  {/if}
</main>

我们定义了一个名为customTransition 的函数。这个函数返回一个css属性，easing ，和duration 。css属性是一个以t 为参数的函数。

t 表示从0到1的可用过渡框架。我们使用t 的值来设置对象的比例。然后我们把customTransition 传给盒子。

Svelte中的动画

Svelte提供了一个flip 动画函数，可以从svelte/animate 模块中访问。当你想给正在重新排序的项目列表添加动画时，可以使用animate 指令。下面的GIF显示了翻转动画是如何为一个项目列表制作动画的。

让我们看看如何制作翻转动画。将下面的代码复制到你的App.svelte 文件中，以便跟着做。

<script>
  import { flip } from "svelte/animate";

  let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  const shuffle = () => {
    numbers = numbers.sort(() => 0.5 - Math.random());
  };
</script>
<main>
  <button on:click={shuffle}>shuffle numbers</button>
  <div>
    {#each numbers as number (number)}
      <p animate:flip>{number}</p>
    {/each}
  </div>
</main>

在上面的片段中，我们正在洗一个1-9的数字阵列。为了制作洗牌的动画，我们首先从svelte/animate 中导入flip 。

我们通过animate 指令将flip 传递给p 标签。每当按钮被点击时，Svelte就会跟踪数字的位置变化并制作动画。

在Svelte中控制元素运动

svelte/motion 模块导出了两个函数，tweened 和spring ，用于创建可写存储，其值在set 和update 之后随时间变化，而不是立即变化。

下面的演示展示了tweened 动画的运行情况。

让我们建立一个演示来看看动作是如何工作的。要跟上进度，请将下面的代码复制到你的App.svelte 文件中。

<script>
  import { tweened } from "svelte/motion";
  import { quartInOut } from "svelte/easing";
  let src = "./pear.jpg";
  const width = tweened(100, {
    duration: 2000,
    easing: quartInOut
  });
  function handleClick() {
    width.set(150);
  }
</script>

<button on:click={handleClick}>Animate</button>
<br />
<img {src} width={$width} alt="" />

我们从svelte/motion 中导入tweened 运动函数，以及从svelte/easing 中导入quartInOut 缓和函数。

Tweened 允许我们在动画序列中生成中间帧，以呈现平滑运动的外观。Tweened 接受一个初始值作为其第一个参数，接受一个配置对象作为第二个参数。我们为duration 和easing ，为tweened 的运动定义。

我们将图像的初始width ，设定为100px。在handleClick 函数中，我们将width 更新为150px。

然后，我们使用Svelte的on 指令将handleClick 传给按钮。

现在我们知道了tweened 动议是如何工作的，那么spring 动议呢？

下面的演示显示了spring 动画在应用于一个元素时的样子。

将下面的代码复制到你的App.svelte 文件中。

<script>
  import { spring } from "svelte/motion";
  let src = "./heart.jpg";
  const width = spring(100, {
    stiffness: 0.01,
    damping: 0.1
  });
  const zoomIn = setInterval(() => {
    width.set(200);
  }, 300);
  const zoomOut = setInterval(() => {
    width.set(100);
  }, 600);
</script>

<img {src} alt="" width={$width} />

Spring 的工作方式与tweened 类似，尽管它的配置对象接受stiffness 和damping 的属性。我们不是在点击按钮时运行这个动画，而是使用setInterval 函数在不同的间隔内改变图像的宽度。这给了我们一个跳动的心脏的外观。

SvelteKit中的转场和动画

转场和动画在SvelteKit中的工作方式与Svelte相同。让我们在SvelteKit中设置一个动画。

下面的演示展示了tweened 转场在Sveltekit中的样子。请注意，在实现和外观上没有任何区别。

将下面的代码复制到你的App.svelte 文件中，以便跟着做。

<script>
  import { tweened } from "svelte/motion";
 import { cubicOut } from "svelte/easing";
 const progress = tweened(0, {
   duration: 4000,
   easing: cubicOut,
 });
</script>

  <h1>Click a button and watch the SvelteKit transition magic happen 🌟</h1>

<progress value={$progress} />
<div class="buttons">
  <button on:click={() => progress.set(0)}> 0% </button>
  <button on:click={() => progress.set(0.25)}> 25% </button>
  <button on:click={() => progress.set(0.5)}> 50% </button>
  <button on:click={() => progress.set(0.75)}> 75% </button>    
  <button on:click={() => progress.set(1)}> 100% </button>
</div>

就像我们在Svelte中做的那样，我们从svelte/motion 中导入tweened ，同时导入一个缓和函数。我们定义一个progress 变量，并将进度条的值设置为该变量。

每当任何一个按钮被点击，进度条的值就会更新，我们会看到一个漂亮的过渡，从一个值到另一个值。

结论

添加微妙的动画和过渡效果是保持访问者参与你的内容的一个好方法。如果操作得当，动画可以使你的网站或应用程序更有吸引力，而且它们可以帮助推动用户参与。

Svelte中的过渡和动画效果非常棒。Svelte团队在将内置的动画、转场、动作和假动作打包到库中方面做得很好。

The postEssential transitions and animations in Svelteappeared first onLogRocket Blog.