כיצד ליצור אנימציות ומעברים עם Motion UI

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

אנו יכולים ליצור אנימציות ומעברים מאפס או באמצעות ספריות או מסגרות. חדשות טובות עבורנו, אנשי Frontend, הוא ש- Zurb, היוצר של הקרן, פתח באוקטובר האחרון את Motion UI, את האנימציה ואת ספריית המעבר שלו על בסיס Sass.

זה היה במקור bundled עם קרן עבור Apps, ועכשיו, עבור העצמאי לשחרר אותו יש revamp, כולל מערכת תורים להנפשה ו תבניות CSS גמישות. Motion UI גם סמכויות כמה רכיבים של מסגרת הקרן, כגון המחוון אורביט, Switcher טוגלר, ואת מודאלית לחשוף, אז זה כלי חזק למדי.

מתחילים

למרות Motion UI היא ספריית Sass, אתה לא בהכרח צריך להשתמש בו עם Sass, כמו Zurb מספק למפתחים עם ערכת Starter שימושי המכיל רק את CSS הידור. ניתן להוריד אותו מ Motion UI של דף הבית, ולהתחיל במהירות אב טיפוס באמצעות אנימציה CSS מוגדרת מראש ושיעורי המעבר.

ערכת המתנע אינה כוללת רק את Motion UI, אלא גם את מסגרת הקרן, כלומר, ניתן להשתמש ברשת הקרן ובכל שאר הפונקציות של הקרן עבור אתרים, אם תרצה.

ערכת המתנע נשלחת גם עם index.html קובץ המאפשר לך לבדוק במהירות את המסגרת.

אם אתה צריך התאמות מתוחכמות יותר רוצה לקחת מינוף של Motion UI עוצמה mixs Sass, אתה יכול להתקין את הגירסה המלאה המכילה את המקור .scss קבצים עם npm או באואר.

תיעוד של Motion UI הוא עדיין חצי אפוי עדיין. אתה יכול למצוא אותו כאן על Github, או לתרום את זה אם אתה רוצה.

אב טיפוס מהיר

כדי להתחיל באב-טיפוס, ניתן לערוך את index.html קובץ של ערכת המתנע, או ליצור קובץ HTML משלך. אתה יכול לבנות את הפריסה באמצעות רשת הקרן, אבל Motion ממשק משתמש גם יכול לשמש ספרייה עצמאית ללא מסגרת הקרן.

ישנם 3 סוגים עיקריים של מחלקות CSS מוגדרות מראש ב- Motion UI:

1. חוגי מעבר - מאפשרים להוסיף מעברים, כגון הזזה, דהייה, ואת ההשפעות על אלמנט HTML.
2. שיעורים אנימציה - מאפשרים לך להשתמש רעידות שונות, מתפתל ו ספינינג אפקטים
3. כיתות משנה - עבודה יחד עם שיעורי המעבר וההנפשה, והן מאפשרות לך להתאים את המהירות, התזמון והעיכוב של תנועה.

בניית HTML

הדבר הגדול על שיעורי CSS מוגדרים מראש הוא שהם לא יכולים לשמש רק כיתות אלא גם תכונות HTML אחרות. לדוגמה אתה יכול להוסיף אותם ערך תכונה של תג, או שאתה יכול להשתמש בהם אישית שלך נתונים-* תכונה גם כן.

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

 
 לחץ עלי  

משחק אנימציות ומעברים עם jQuery

Motion UI כולל ספריית JavaScript קטנה כמו גם שיכול לשחק מעברים ואנימציות כאשר אירוע מסוים קורה.

הספרייה עצמה ניתן למצוא בערכה המתנע ב תנועה- ui-Starter> js> ספק> תנועה- ui.js נתיב.

זה יוצר Motion אובייקט שיש לו שתי שיטות: animateIn () ו animateOut (). המעבר או אנימציה הקשורים אלמנט HTML מסוים ( התג בדוגמה שלנו) ניתן להפעיל עם jQuery באופן הבא:

 $ (("boom") נתונים ("הנפשה"), MotionUI.animateIn ($ ("# boom"). , $ animation);););

בקטע הקוד שלמעלה, הגענו אל אנימציה נתונים תכונה באמצעות jQuery מובנה נתונים() שיטה, ולאחר מכן נקרא animateIn () השיטה של Motion אובייקט.

הנה הקוד המלא והתוצאה. השתמשתי של מסגרות קרן מובנית לחצני כפתור עבור לחץ עלי כפתור, והוסיף גם CSS בסיסי.

כמו Motion UI הוא די גמיש, אתה יכול גם להוסיף ולהפעיל מעברים ואנימציות בדרכים רבות אחרות.

לדוגמה בדוגמה לעיל אנחנו לא בהכרח צריכים להשתמש אנימציה נתונים תכונה מותאמת אישית, אבל יכול פשוט להוסיף את המעמד התנהגות עם AddClass () שיטת jQuery אל רכיב באופן הבא:

 $ ('# בום').

התאמה אישית עם Sass

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

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

כדי להתאים אישית מעבר או אנימציה, בהתחלה אתה צריך למצוא את mixin בנושא. ה _classes.scss הקובץ מכיל את השמות של כיתות CSS הידור עם mixins בהתאמה.

בדוגמה שלנו השתמשנו .בקנה מידה למעלה תכונה, וכן על ידי התבוננות _classes.scss, אנו יכולים לגלות במהירות כי הוא עושה שימוש mui-zoom mix you

 / / מעברים @mixin תנועה UI- מעברים ... / / קנה מידה. Scale-in-up @ include mui-zoom (ב, 0.5, 1);  ...

Motion משתמש בממשק המשתמש mui- קידומת mixins, וכל mixin יש קובץ משלה. Motion UI יש די מוסכמות למתן שמות, כך שנוכל למצוא במהירות את mui-zoom mixin ב _zoom.scss you

 @ $ mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ Duration: null, $ $ time: null, $ delay: null) ...

באמצעות אותה טכניקה אתה יכול בקלות לשלוט בכל תכונה של אנימציה או מעבר על ידי שינוי הערכים של משתני SAS בהתאמה.

הגדרת מחלקות משנה

כיתות משנה ששולטות בהתנהגות (מהירות, תזמון ועכבות) של הנפשות ומעברים ניתנות להגדרה גם באמצעות Sass על-ידי שינוי הערכים של המשתנים המתאימים _settings.scss קובץ.

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