Када се уради добро, анимација може побољшати корисничко искуство и може бити одличан начин за слање повратних информација кориснику. Свелте вам олакшава да уградите анимације и прелазе у вашу апликацију уз врло мало потребе за ЈаваСцрипт библиотекама трећих страна.
Преглед садржаја
Постављање Свелте пројекта
Да бисте покренули Свелте, требало би да се уверите да су Ноде.јс рунтиме и Ноде Пацкаге Манагер (НПМ) правилно инсталирани на вашем рачунару. Отворите свој терминал и покрените следећу команду:
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>
Блок кода илуструје како можете да користите директиву за анимирање у Свелте-у. У ознаци скрипте, први ред увози функцију флип. Постоје два низа, оригиналЛист и схоппингЛист. У див „контејнеру“, блок са сваким кључем је одговоран за приказивање сваког елемента у низу схоппингЛист.
Подређени див див „контејнера“ има анимирану директиву која указује на функцију флип. Притиском на прво дугме листа ће се сортирати по абецедном реду, а притиском на друго дугме листа се ресетује. Када покренете код у претраживачу, ово би требало да видите:
Зашто је анимација важна у било којој веб апликацији?
Значај анимација превазилази пуку визуелну привлачност; они обухватају суштину побољшања корисничког искуства и ефикасне комуникације. Беспрекорним спајањем естетике са функционалношћу, анимација удахњује живот веб апликацијама, чинећи их не само привлачним већ и интуитивним.