درک انتقال و انیمیشن در Svelte

با ادغام انتقال ها و انیمیشن های جذاب، به برنامه های Svelte خود زندگی بیافزایید.

وقتی انیمیشن به خوبی انجام شود، می‌تواند تجربه کاربر را بهبود بخشد و می‌تواند راهی عالی برای ارسال بازخورد به کاربر باشد. Svelte با نیاز بسیار کمی به کتابخانه های جاوا اسکریپت شخص ثالث، به راحتی می توانید انیمیشن ها و انتقال ها را در برنامه خود بگنجانید.

راه اندازی یک پروژه Svelte

به منظور راه اندازی و اجرا با Svelte، باید مطمئن شوید که زمان اجرا Node.js و Node Package Manager (NPM) به درستی بر روی رایانه شما نصب شده است. ترمینال خود را باز کنید و دستور زیر را اجرا کنید:

npm create vite

این یک پروژه جدید Vite.js را داربست می کند. نام پروژه خود را نامگذاری کنید، Svelte را به عنوان فریمورک انتخاب کنید و نوع آن را به جاوا اسکریپت تنظیم کنید. سپس به دایرکتوری پروژه بروید و دستور زیر را برای نصب وابستگی های لازم اجرا کنید:

npm install

با حذف دارایی‌ها و پوشه‌های lib و پاک کردن محتوای فایل‌های App.svelte و App.css، کد boilerplate را حذف کنید.

نحوه استفاده از Tweening در Svelte

Tweening تکنیکی در انیمیشن و گرافیک کامپیوتری است که فریم‌های میانی را بین فریم‌های کلیدی ایجاد می‌کند تا حرکت یا انتقالی صاف و واقعی ایجاد کند. Svelte یک ابزار توئین شده ارائه می دهد که به شما امکان می دهد عناصر را با استفاده از مقادیر عددی متحرک کنید، و ایجاد انتقال های سیال و انیمیشن در برنامه های کاربردی وب خود را ساده می کند.

ابزار tweened بخشی از ماژول svelte/motion است. برای استفاده از tweened در کامپوننت خود، باید آن را به صورت زیر وارد کنید:

import { tweened } from 'svelte/motion'

زیر کاپوت، ابزار tweened فقط یک فروشگاه Svelte قابل نوشتن است. فروشگاه Svelte اساساً یک شی جاوا اسکریپت است که می توانید از آن برای مدیریت وضعیت استفاده کنید. فروشگاه tweened دارای دو روش است: تنظیم و به روز رسانی. در سطح پایه، نحو برای یک فروشگاه tweened چیزی شبیه به این است:

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

بلوک کد بالا یک متغیر y را تعریف می کند و آن را به یک فروشگاه tweened متصل می کند. در فروشگاه، دو پارامتر وجود دارد. پارامتر اول نشان دهنده مقدار پیش فرضی است که binding y باید داشته باشد. پارامتر بعدی یک شی با دو کلید مدت زمان و easing است. مدت زمان تعیین می کند که توئین چقدر باید بر حسب میلی ثانیه دوام بیاورد در حالی که easing تابع easing را مشخص می کند.

توابع تسهیل در Svelte رفتار یک توئین را تعریف می کنند. این توابع بخشی از ماژول svelte/easing هستند، به این معنی که شما باید یک تابع خاص را از ماژول وارد کنید تا بتوانید آن را به فروشگاه tweened منتقل کنید. Svelte یک تجسم‌کننده آسان‌کننده دارد که می‌توانید از آن برای بررسی رفتار عملکردهای مختلف آسان‌کننده استفاده کنید.

برای اینکه به طور کامل نشان دهید که چگونه می توانید از ابزار tweened استفاده کنید، در اینجا مثالی از استفاده از فروشگاه tweened برای افزایش اندازه یک عنصر در 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>

بلوک کد بالا دو عملکرد را وارد می کند: tweened و bounceOut از ماژول های svelte/motion و svelte/easing. بعد، یک متغیر ثابت وجود دارد که به فروشگاه tweened محدود شده است. این فروشگاه دارای مقدار پیش فرض 0 است. این مقدار پیش فرض (مقدار فروشگاه) با نماد $ قابل دسترسی است. پارامتر بعدی در تابع tweened یک شی با یک کلید easing است که به تابع easing bounceOut اشاره می کند.

در بخش نشانه گذاری، عنصر دکمه دارای یک دستورالعمل on:click است که روش به روز رسانی در اندازه binding را فراخوانی می کند. این روش هر زمان که روی دکمه کلیک می کنید، مقدار ذخیره $size را 3 افزایش می دهد. عنصر div یک استایل درون خطی دارد که به مقدار ذخیره $size بستگی دارد. وقتی این کد را در مرورگر اجرا می کنید، این چیزی است که باید ببینید:

از طریق GIPHY

انتقال در Svelte

برای انتقال عناصر به داخل و خارج از Document Object Model (DOM)، Svelte دارای یک دستورالعمل انتقال و یک ماژول به نام svelte/transition است که توابع مفیدی را صادر می کند که می توانید با دستورالعمل انتقال استفاده کنید. برای مثال، برای محو کردن یک عنصر در داخل و خارج از یک DOM، ابتدا تابع blur را از svelte/transition وارد کنید:

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

سپس قابلیت را برای mount و unmount یک عنصر از DOM اضافه کنید. در تگ اسکریپت، یک متغیر قابل مشاهده ایجاد کنید و آن را روی false قرار دهید.

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

سپس از بلوک if برای ارائه یک div به صورت شرطی استفاده کنید. مطمئن شوید که یک دستورالعمل انتقال روی div اضافه کرده اید و آن را تار کنید

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

سپس یک دکمه برای نمایش یا مخفی کردن div اضافه کنید.

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

وقتی کد را در مرورگر اجرا می کنید، این چیزی است که باید ببینید:

از طریق GIPHY

ماژول Svelte/Transition هفت عملکرد را صادر می کند: محو شدن، محو کردن، پرواز کردن، اسلاید، مقیاس، ترسیم و متقاطع. انتقال در Svelte می تواند پارامترها را بپذیرد. به عنوان مثال، تابع blur از مثال قبلی می تواند پارامترهای زیر را بپذیرد: تاخیر، مدت زمان، کاهش (تابع کاهش)، کدورت، و مقدار (اندازه تاری).

Svelte علاوه بر پارامترهای مربوط به انتقال، ترانزیشن های درون و بیرون را نیز ارائه می دهد که به شما کنترل دقیق تری بر انتقال یک عنصر می دهد. مثال آخر را در نظر بگیرید، اگر بخواهید انتقال ورودی عنصر تار و انتقال خروجی آن اسلاید باشد، چه؟ در اینجا نحوه انجام آن آمده است:

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

در بلوک کد بالا، توجه کنید که چگونه هیچ دستورالعمل انتقالی در عنصر div وجود ندارد. در عوض، دستورالعمل انتقال با دستورالعمل های داخل و خارج جایگزین شده است که به ترتیب به محو کردن و اسلاید اشاره می کنند.

از طریق GIPHY

متحرک سازی عناصر شیک

راحت ترین راه برای متحرک سازی عناصر در Svelte استفاده از تابع flip از svelte/animate است. flip مخفف عبارت “First, Last, Invert, Play” است. سه پارامتر به نام های تاخیر، مدت زمان و کاهش را می پذیرد. به کد زیر دقت کنید:

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

بلوک کد نشان می دهد که چگونه می توانید از دستورالعمل متحرک در Svelte استفاده کنید. در تگ اسکریپت، خط اول تابع flip را وارد می کند. دو آرایه وجود دارد، originalList و shoppingList. در بخش “container”، هر بلوک کلیددار، مسئول رندر کردن هر عنصر در آرایه shoppingList است.

div فرزند از div “container” یک دستورالعمل متحرک دارد که به تابع flip اشاره می کند. با فشار دادن دکمه اول، لیست بر اساس حروف الفبا مرتب می شود، در حالی که با فشار دادن دکمه دوم، لیست مجدداً تنظیم می شود. وقتی کد را در مرورگر اجرا می کنید، این چیزی است که باید ببینید:

از طریق GIPHY

چرا انیمیشن در هر برنامه وب مهم است؟

اهمیت انیمیشن ها فراتر از جذابیت بصری صرف است. آنها جوهر افزایش تجربه کاربر و ارتباط موثر را در بر می گیرند. انیمیشن با ترکیب یکپارچه زیبایی شناسی با عملکرد، جانی به برنامه های وب می بخشد و آنها را نه تنها جذاب، بلکه بصری می کند.

منبع مقاله