הוסף חיים לאפליקציות Svelte שלך ​​על ידי שילוב מעברים ואנימציות שובות לב.

כאשר עושים זאת היטב, אנימציה יכולה לשפר את חווית המשתמש ויכולה להיות דרך מצוינת לשלוח משוב למשתמש. Svelte מקל עליך לשלב אנימציות ומעברים ביישום שלך עם מעט מאוד צורך בספריות JavaScript של צד שלישי.

הקמת פרויקט Svelte

כדי להתחיל לעבוד עם Svelte, עליך לוודא זאת זמן הריצה של Node.js ו מנהל חבילות צומת (NPM) מותקנים כהלכה במחשב שלך. פתח את הטרמינל שלך והפעל את הפקודה הבאה:

npm create vite

זה יהיה פיגום א פרויקט Vite.js חדש. תן שם לפרויקט שלך, בחר תָמִיר כמסגרת, והגדר את הגרסה ל JavaScript. לאחר מכן עבור לספריית הפרויקט והפעל את הפקודה הבאה כדי להתקין את התלות הנדרשת:

npm install

הסר את קוד הלוח על ידי מחיקת ה- נכסים ו lib תיקיות, וניקוי התוכן של App.svelte ו App.css קבצים.

כיצד להשתמש בטווינינג ב-Svelte

טווינינג היא טכניקה באנימציה וגרפיקה ממוחשבת שיוצרת פריימים ביניים בין פריימים מפתח ליצירת תנועה או מעברים חלקים ומציאותיים. Svelte מציעה א טווינד כלי עזר המאפשר לך להנפיש אלמנטים באמצעות ערכים מספריים, מה שמקל על יצירת מעברים והנפשות זורמים ביישומי האינטרנט שלך.

instagram viewer

כלי השירות tweened הוא חלק מה- svelte/תנועה מודול. כדי להשתמש בטווינד ברכיב שלך, עליך לייבא אותו כך:

import { tweened } from'svelte/motion'

מתחת למכסה המנוע, כלי השירות הטווינד הוא רק חנות Svelte הניתנת לכתיבה. חנות Svelte היא בעצם אובייקט JavaScript שבו אתה יכול להשתמש כדי לטפל בניהול מצב. לחנות הטווינד יש שתי שיטות, כלומר: מַעֲרֶכֶת ו עדכון. ברמה הבסיסית, התחביר עבור חנות טווינדת נראה בערך כך:

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

בלוק הקוד למעלה מגדיר משתנה y וקושר אותו לחנות טווינד. בחנות יש שני פרמטרים. הפרמטר הראשון מייצג את ערך ברירת המחדל the y מחייב צריך להיות. הפרמטר הבא הוא אובייקט עם שני מפתחות מֶשֶׁך ו הֲפָגָה. ה מֶשֶׁך מגדיר כמה זמן ה-tween אמור להימשך באלפיות שניות תוך כדי הֲפָגָה מגדיר את פונקציית ההקלה.

פונקציות הקלה ב-Svelte מגדירות את ההתנהגות של tween. פונקציות אלו הן חלק מה- סמיך/הקלה מודול מה שאומר שעליך לייבא פונקציה ספציפית מהמודול לפני שתוכל להעביר אותה לחנות הטווינד. ל-Svelte יש חזותי הקלה שתוכל להשתמש בו כדי לחקור את ההתנהגות של פונקציות הקלות שונות.

כדי להמחיש באופן מלא איך אתה יכול להשתמש בכלי השירות tweened, הנה דוגמה לשימוש בחנות tweened כדי להגדיל את הגודל של אלמנט ב-Svelte.