Разумевање прелаза и анимација у Свелтеу

Када се уради добро, анимација може побољшати корисничко искуство и може бити одличан начин за слање повратних информација кориснику. Свелте вам олакшава да уградите анимације и прелазе у вашу апликацију уз врло мало потребе за ЈаваСцрипт библиотекама трећих страна.

Постављање Свелте пројекта

Да бисте покренули Свелте, требало би да се уверите да су Ноде.јс рунтиме и Ноде Пацкаге Манагер (НПМ) правилно инсталирани на вашем рачунару. Отворите свој терминал и покрените следећу команду:

 npm create vite

Ово ће поставити скелу за нови пројекат Вите.јс. Именујте свој пројекат, изаберите Свелте као оквир и поставите варијанту на ЈаваСцрипт. Затим пређите на директоријум пројекта и покрените следећу команду да бисте инсталирали неопходне зависности:

 npm install

Уклоните шаблонски код брисањем фолдера имовине и либ и брисањем садржаја датотека Апп.свелте и Апп.цсс.

Како користити Твеенинг у Свелте-у

Твеенинг је техника у анимацији и компјутерској графици која генерише средње кадрове између кључних кадрова да би се створило глатко и реалистично кретање или прелазе. Свелте нуди прилагођени услужни програм који вам омогућава да анимирате елементе користећи нумеричке вредности, што олакшава креирање флуидних прелаза и анимација у вашим веб апликацијама.

Твеенед услужни програм је део модула виткост/покрет. Да бисте користили твеенед у својој компоненти, морате да је увезете овако:

 import { tweened } from 'svelte/motion'

Испод хаубе, твеенед услужни програм је само Свелте продавница на коју се може писати. Свелте продавница је у основи ЈаваСцрипт објекат који можете да користите за управљање стањем. Твеенед продавница има две методе, наиме: сет и упдате. На основном нивоу, синтакса за твеенед продавницу изгледа отприлике овако:

 const y = tweened(defaultValue, {
    duration: [time-in-milliseconds],
    easing: [easing-function],
})

Горњи блок кода дефинише променљиву и и везује је за твеенед складиште. У продавници постоје два параметра. Први параметар представља подразумевану вредност коју и везивање треба да има. Следећи параметар је објекат са два кључа за трајање и опуштање. Трајање дефинише колико дуго твеен треба да траје у милисекундама, док ублажавање дефинише функцију ублажавања.

Функције ублажавања у Свелте-у дефинишу понашање твеен-а. Ове функције су део модула свелте/еасинг што значи да морате да увезете одређену функцију из модула пре него што можете да је проследите у твеенед продавницу. Свелте има визуализатор ублажавања који можете користити да истражите понашање различитих функција ублажавања.

Да бисте у потпуности илустровали како можете да користите услужни програм твеенед, ево примера коришћења твеенед продавнице за повећање величине елемента у Свелте-у.

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

Блок кода изнад увози две функције: твеенед и боунцеОут из модула свелте/мотион односно витко/попуштање. Затим, постоји константна променљива која је везана за твеенед складиште. Ова продавница има подразумевану вредност 0. Овој подразумеваној вредности (вредности продавнице) може се приступити помоћу симбола $. Следећи параметар у твеенед функцији је објекат са тастером за ублажавање који указује на функцију боунцеОут еасинг.

У одељку за означавање, елемент дугмета има он:цлицк директиву која позива метод ажурирања на везивању величине. Овај метод повећава вредност продавнице $сизе за 3 сваки пут када кликнете на дугме. Елемент див има уграђени стил који зависи од вредности продавнице $сизе. Када покренете овај код у претраживачу, ово би требало да видите:

Прелази у Свелте

За прелазак елемената у и ван Модел објекта документа (ДОМ), Свелте има директиву о транзицији и модул који се зове свелте/транситион који извози корисне функције које можете користити са директивом о транзицији. На пример, да бисте замаглили елемент у ДОМ-у и ван њега, прво увезите функцију замућења из свелте/транситион:

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

Затим додајте функционалност за монтирање и демонтажу елемента из ДОМ-а. У ознаци скрипте направите видљиву променљиву и поставите је на нетачно.

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

Затим користите иф-блок да бисте условно приказали див. Обавезно додајте директиву о транзицији на див и подесите је на замагљивање

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

Затим додајте дугме да бисте приказали или сакрили див.

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

Када покренете код у претраживачу, ово би требало да видите:

Модул витко/прелазно извози седам функција и то: фаде, блур, фли, слиде, сцале, драв и цроссфаде. Прелази у Свелте могу прихватити параметре. На пример, функција замућења из претходног примера може да прихвати следеће параметре: кашњење, трајање, ублажавање (функција ублажавања), непрозирност и количину (величина замућења).

Поред параметара на прелазима, Свелте такође нуди улазне и излазне прелазе који вам дају бољу контролу над транзицијом елемента. Размотрите последњи пример, шта ако желите да улазни прелаз елемента буде замућен, а излазни прелаз клизећи? Ево како то радите:

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

У блоку кода изнад, приметите како нема директиве о транзицији на елементу див. Уместо тога, директива о транзицији је замењена директивама за улаз и излаз које указују на замагљивање и клизање.

Анимирање Светлих елемената

Најпогоднији начин за анимирање елемената у Свелте-у је коришћење функције флип из свелте/анимате. флип је скраћеница за „Први, последњи, обрни, пусти“. Прихвата три параметра и то: кашњење, трајање и ублажавање. Погледајте следећи код:

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

Блок кода илуструје како можете да користите директиву за анимирање у Свелте-у. У ознаци скрипте, први ред увози функцију флип. Постоје два низа, оригиналЛист и схоппингЛист. У див „контејнеру“, блок са сваким кључем је одговоран за приказивање сваког елемента у низу схоппингЛист.

Подређени див див „контејнера“ има анимирану директиву која указује на функцију флип. Притиском на прво дугме листа ће се сортирати по абецедном реду, а притиском на друго дугме листа се ресетује. Када покренете код у претраживачу, ово би требало да видите:

Зашто је анимација важна у било којој веб апликацији?

Значај анимација превазилази пуку визуелну привлачност; они обухватају суштину побољшања корисничког искуства и ефикасне комуникације. Беспрекорним спајањем естетике са функционалношћу, анимација удахњује живот веб апликацијама, чинећи их не само привлачним већ и интуитивним.