Pochopení přechodů a animací ve Svelte

Obsah

Správně provedené animace mohou výrazně zlepšit uživatelský zážitek a efektivně poskytovat zpětnou vazbu. Svelte usnadňuje implementaci animací a přechodů do vaší aplikace s minimální potřebou externích knihoven JavaScriptu.

Nastavení projektu Svelte

Pro zahájení práce se Svelte se ujistěte, že máte na svém počítači nainstalované prostředí Node.js a správce balíčků Node Package Manager (NPM). Otevřete terminál a zadejte následující příkaz:

npm create vite

Tím se vytvoří nový projekt Vite.js. Pojmenujte svůj projekt, vyberte Svelte jako framework a jako variantu nastavte JavaScript. Poté přejděte do adresáře projektu a spusťte následující příkaz pro instalaci všech potřebných závislostí:

npm install

Odstraňte výchozí kód tím, že odstraníte složky assets a lib a vymažete obsah souborů App.svelte a App.css.

Použití Tweeningu v Svelte

Tweening je technika používaná v animaci a počítačové grafice, která vytváří mezilehlé snímky mezi klíčovými snímky. Cílem je docílit plynulého a realistického pohybu nebo přechodů. Svelte nabízí pokročilý nástroj, který umožňuje animovat elementy pomocí číselných hodnot, a tím zjednodušuje vytváření plynulých přechodů a animací ve vašich webových aplikacích.

Tento nástroj je součástí modulu svelte/motion. Pro použití tweened ve vaší komponentě je potřeba jej importovat následujícím způsobem:

import { tweened } from 'svelte/motion'

Tweened je v podstatě zapisovatelné úložiště Svelte. Úložiště Svelte je objekt JavaScriptu, který slouží ke správě stavu. Tweened úložiště má dvě hlavní metody: `set` a `update`. Základní syntaxe pro tweened úložiště vypadá takto:

const y = tweened(defaultValue, {
    duration: [čas-v-milisekundách],
    easing: [funkce-usnadnění],
})

Výše uvedený kód definuje proměnnou `y` a váže ji na tweened úložiště. První parametr úložiště představuje výchozí hodnotu, kterou proměnná `y` bude mít. Druhým parametrem je objekt se dvěma klíči: `duration` a `easing`. `duration` určuje, jak dlouho má tweening trvat v milisekundách, zatímco `easing` definuje funkci usnadnění.

Funkce usnadnění v Svelte určují chování tweeningu. Tyto funkce jsou součástí modulu `svelte/easing`, což znamená, že je potřeba importovat specifickou funkci z modulu, než ji lze předat do tweened úložiště. Svelte nabízí vizualizér usnadnění, který slouží k prozkoumání různých funkcí usnadnění.

Pro plnou ilustraci použití tweened nástroje, zde je příklad, jak pomocí tweened úložiště zvětšit velikost elementu v 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>

Tento kód importuje dvě funkce: `tweened` a `bounceOut` z modulů `svelte/motion` a `svelte/easing`. Dále je zde konstantní proměnná `size`, která je vázána na tweened úložiště. Toto úložiště má výchozí hodnotu 0. K této hodnotě (hodnotě úložiště) je přístup pomocí symbolu `$`. Druhým parametrem v tweened funkci je objekt s klíčem `easing`, který odkazuje na funkci usnadnění `bounceOut`.

V sekci značek má element tlačítka direktivu `on:click`, která volá metodu `update` na vazbě `size`. Tato metoda zvyšuje hodnotu úložiště `$size` o 3 při každém kliknutí na tlačítko. Element `div` má vložený styl, který závisí na hodnotě úložiště `$size`. Když tento kód spustíte v prohlížeči, měli byste vidět následující:

Přechody v Svelte

Pro přechody elementů do a z DOM (Document Object Model) má Svelte direktivu přechodu a modul s názvem `svelte/transition`, který exportuje užitečné funkce pro použití s direktivou přechodu. Chcete-li například rozmazat element při jeho zobrazení a skrytí, nejprve importujte funkci `blur` z `svelte/transition`:

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

Poté přidejte funkci pro připojení a odpojení elementu z DOM. V tagu script vytvořte proměnnou `visible` a nastavte ji na `false`:

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

Nyní použijte blok `if` pro podmíněné vykreslení `div`. Nezapomeňte přidat direktivu `transition` k div a nastavit ji na `blur`:

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

Nakonec přidejte tlačítko pro zobrazení nebo skrytí divu:

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

Když tento kód spustíte v prohlížeči, měli byste vidět následující:

Modul `svelte/transition` exportuje sedm funkcí: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` a `crossfade`. Přechody v Svelte mohou přijímat parametry. Například funkce `blur` z předchozího příkladu může přijmout parametry jako: `delay`, `duration`, `easing` (funkce usnadnění), `opacity` a `amount` (velikost rozostření).

Kromě parametrů u přechodů nabízí Svelte také přechody dovnitř a ven, které umožňují jemnější kontrolu nad přechodem elementu. Vezměme si poslední příklad. Co kdybychom chtěli, aby vstupní přechod elementu byl `blur` a výstupní přechod byl `slide`? Postup je následující:

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

V tomto kódu si všimněte, že element `div` již nemá direktivu `transition`. Místo toho byla direktiva `transition` nahrazena direktivami `in` a `out`, které odkazují na `blur` a `slide`.

Animace prvků Svelte

Nejpohodlnější způsob, jak animovat prvky v Svelte, je pomocí funkce `flip` z modulu `svelte/animate`. `flip` znamená „First, Last, Invert, Play“. Tato funkce přijímá tři parametry: `delay`, `duration` a `easing`. Podívejte se na následující kód:

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

Tento kód ukazuje, jak lze použít direktivu `animate` v Svelte. V tagu `script` se importuje funkce `flip`. Dále jsou definovány dvě pole: `originalList` a `shoppingList`. V divu s třídou „container“ se pomocí bloku `each` vykreslují elementy z pole `shoppingList`.

Podřízený div divu s třídou „container“ má direktivu `animate` odkazující na funkci `flip`. Po stisknutí prvního tlačítka se seznam seřadí podle abecedy a stisknutím druhého tlačítka se seznam vrátí do výchozího stavu. Při spuštění kódu v prohlížeči byste měli vidět následující:

Proč jsou animace důležité v každé webové aplikaci?

Význam animací přesahuje pouhou vizuální přitažlivost. Zlepšují uživatelský zážitek a umožňují efektivní komunikaci. Animace oživují webové aplikace, spojují estetiku s funkčností, a tím je činí nejen poutavé, ale také intuitivní.