תוֹכֶן
הנימוק מאחורי אב טיפוס עיצובי אינו חדש - זהה לכל הבאזז בעיצוב בדפדפן. כשאתה רואה עיצוב בהקשר האמיתי שלו, זה שונה לגמרי. אתה מקבל החלטות טובות יותר כאשר אינך צריך להניח הנחות לגבי האופן שבו ממשק יתפקד וירגיש. זה אולי נשמע כמו עבודה נוספת, אך התובנות שאתה יכול להשיג על ידי כך שאתה רואה את העיצוב שלך עובד לא יסולא בפז.
פרמר הוא כלי חדש מבוסס קוד אבות-טיפוס. אתה יכול ליצור דגימה ב- Sketch (או ב- Photoshop) בדיוק כפי שהיית עושה בדרך כלל, ולייבא אותם ל- Framer. לאחר מכן, כתוב מעט CoffeeScript ותוכל להשיג הרבה.
אני אלמד אותך את היסודות של אבות טיפוס ב- Framer, תוך שימוש בדוגמה של אב-טיפוס של אפליקציית iOS עם שתי תצוגות: תצוגת פרופיל ותצוגה מוגדלת של תמונת האוואטר של המשתמש. אנו אב טיפוס לאופן בו תצוגת התמונה המורחבת תיפתח ותיסגר, וגם ננפיש אותה. צפה בהדגמה המקוונת כאן (כדי לראות את קוד המקור, פשוט לחץ על הסמל בפינה השמאלית העליונה). תזדקק גם לתקופת הניסיון בחינם של Framer, שתוכל להשיג באתר framerjs.com.
ייבא מסקיצה
השלב הראשון הוא ייבוא שכבות מ- Sketch ל- Framer. כל שעליך לעשות הוא ללחוץ על כפתור הייבוא ב- Framer בזמן שהעיצוב פתוח ב- Sketch ובחר את הקובץ הנכון בתיבת הדו-שיח הבאה. Framer יבוא אוטומטית תמונות מכל שכבה ויהפוך אותן לנגישות באמצעות קוד כזה:
סקיצה = Framer.Importer.load "מיובא / פרופיל"
השתמש במשתנה זה כדי לגשת לשכבות המיובאות. לדוגמה, כדי להפנות את השכבה בשם 'תוכן' בקובץ Sketch, תקליד sketch.content ב- Framer.
צור שכבות מסכה ואוואטר
הפונקציה המרכזית של אב-טיפוס זה היא להרחיב את תמונת האוואטר בעת הקשתה, ולאחר מכן לסגור אותה כאשר הקשה עליה שוב. ראשית, ניצור שתי שכבות מסכה - מסכה מקוננת, או מסכה בתוך מסכה אחרת. אנו מנפישים את שתי המסכות בבת אחת כדי ליצור אפקט פתיחה וסגירה נחמד ועדין. שכבת headderMask תחתוך את תמונת האוואטר למלבן כאשר היא תורחב, ושכבת המסכה תחתוך אותה במעגל קטן בתצוגת הפרופיל.
צור את שכבת המסך header כך:
headerMask = רוחב שכבה חדש: Screen.width, גובה: 800 רקע צבע: "שקוף"
שורת הקוד הראשונה יוצרת ושמה של השכבה החדשה. לאחר מכן, באמצעות תחביר הכניסה של CoffeeScript, הגדרנו את מאפייני הרוחב, הגובה והרקע. נשתמש ברקע שקוף כך שהשכבות שמתחת יופיעו כאשר תמונה האוואטר תורחב.
לאחר מכן, צור את שכבת המסכה:
מסכה = רוחב שכבה חדש: 1000, גובה: 1000 רקע צבע: "שקוף", גבול רדיוס: 500 y: sketch.header.height - 100 שכבת-על: כותרת סולם מסכה: 0.2, מקור Y: 0
אנו יוצרים שכבה חדשה וקובעים מאפיינים באותו אופן. הגבול הגדול רדיוס הופך את השכבה הזו למעגל. אנו ממקמים את שכבת המסכה כך שהיא חופפת לשכבת הכותרת, שיובאה מ- Sketch. נרד גם ל -20 אחוז, או 0.2. מקור Y של אפס מגדיר את נקודת העיגון או הרישום של התמונה לקצה העליון.
המאפיין הנותר, SuperLayer, מגדיר את שכבת headerMask שיצרנו כהורה של השכבה החדשה הזו. כך המסכה עובדת בפראמר. כל שעליך לעשות הוא להגדיר את המאפיין SuperLayer, ושכבת האב תסווה את הילד.
לאחר מכן, עלינו ליצור את הגרפיקה של האוואטר ולהציב אותה בתוך המסכות החדשות האלה. כדי להתקרב ולהנפיש את גבולות החיתוך, ניצור ידנית את שכבת האוואטר. העתק תמונה לתיקיית המשנה 'תמונות' של תיקיית הפרויקט. לאחר מכן צור שכבה באמצעות תמונה זו:
avatar = תמונת שכבה חדשה: "images / avatar.png" רוחב: mask.width, height: mask.height superLayer: mask, force2d: true
שימו לב שהגדרנו את שכבת העל של האווטאר להיות שכבת המסכה. שניהם מקוננים כעת ב- headerMask. הגדרנו גם את הרוחב והגובה כך שהתמונה תמלא את אזור המסכה לחלוטין.
אחרון, ניצור משתנה לאחסון מיקום Y של המסכה בה נשתמש לאנימציה. אנו מרכזים אותו אופקית, מכיוון שהוא גדול מהמסך.
maskY = mask.y mask.centerX ()
הגדר מצבים
השלב הראשון ביצירת אנימציה הוא הגדרת מצבי ההתחלה והסיום. ב- Framer, מדינות הן כמו מסגרות מפתח שרשומות בקוד. מדינה היא רק אוסף של נכסים. לכל שכבה יש מצב ברירת מחדל. עבור אב טיפוס זה, ברירת מחדל זו תשמש כנקודת ההתחלה של האנימציה, לכן עלינו להגדיר רק מצב שני לכל שכבה.
התחביר למדינות הוא פשוט מאוד. הפנה לשכבה, השתמש בשיטת layer.states.add () ואז רשום את המאפיינים שייכללו.
sketch.content.states.add (הסתר: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
המצב השני של שכבת התוכן, שיובא מ- Sketch ומכיל את כל שאר רכיבי מסך הפרופיל, צריך להיות שקוף לחלוטין. בדרך זו, כאשר האווטאר יורחב, יהיה לנו רקע שחור ושאר הסמלים והאלמנטים המיובאים יופיעו.
שורת הקוד השנייה יוצרת מצב עבור headerMask, אשר פשוט יעביר אותו למטה ל- Y של 120. זה יאפשר לכותרת ולחצן הסגירה להופיע בחלק העליון של המסך כאשר תמונה האווטאר מוגדלת. זה גם ינפיש את גבולות החיתוך של תמונת האוואטר.
לבסוף, מצב חדש לשכבת המסכה גם יגדיל אותה וגם יעלה אותה באמצעות המשתנה maskY שיצרנו קודם. מכיוון שמקור ה- Y (או נקודת העיגון) של שכבת המסכה הוא הקצה העליון שלה, עלינו להזיז אותה למעלה ב -420 פיקסלים כך שמרכז התמונה יהיה גלוי.
הנפשה בין מדינות
כדי להנפיש בין מצבי ברירת המחדל לבין החדשים שיצרנו זה עתה, אנו זקוקים רק לארבע שורות קוד נוספות. נגדיר מטפל בקליק בשכבת האוואטר. כאשר משתמש מקיש עליו על מסך הפרופיל, נעבור לתצוגה המורחבת על ידי מצבי אופניים. כאשר מקישים עליו שוב, נחזור למצב ברירת המחדל כך שהוא יחזור למעגל קטן. אותן שורות קוד מטפלות בשתי האינטראקציות:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
השורה הראשונה של החסימה הזו מגדירה את מטפל הקליקים בשכבת האוואטר. בכל פעם שמקישים עליו, לא משנה איך חותכים אותו או איזה גודל זה, ההצהרות הבאות יפעלו.
לאחר מכן אנו פשוט מתייחסים לכל שכבה ומשתמשים בשיטת layer.states.next () כדי להחליף מצבים. כאשר אתה משתמש ב- layer.states.next (), Framer ישתמש בהגדרות האנימציה המוגדרות כברירת מחדל. זה מאוד נוח, אבל אתה יכול ליצור אנימציות טובות עוד יותר על ידי גימור עקומות האנימציה.
בעת שימוש במצבים כמו שאנחנו כאן, תוכלו לשנות בקלות כל עקומת אנימציה בנפרד באמצעות המאפיין layer.states.animationOptions. עם שלוש התאמות קלות בלבד, האנימציה מרגישה אחרת לגמרי:
sketch.content.states.animationOptions = עקומה: "קלות", זמן: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
עבור שכבת התוכן שנמוגה ונכנסת פנימה, אנו בוחרים קביעה קבועה מראש של עקומה, מקלים ומגדילים את משך האנימציה ל 0.3 כך שהיא מהירה מאוד.
עבור שכבות הכותרת מסכה ומסכה, השתמש בעקומת קפיץ. לענייננו, אתה רק צריך לדעת שערכי עקומת הקפיץ משנים את המהירות והקפיצה של האנימציה. הערכים עבור שכבת המסכה יהפכו את האנימציה שלה להרבה יותר מהירה מ- headerMask ותוכן. לפרטים נוספים על הגדרות עקומת הקפיץ, עיין בתיעוד Framer בכתובת framerjs.com/docs.
נסה זאת במכשיר נייד אמיתי
לראות את העיצוב במכשיר אמיתי כל כך הרבה יותר יעיל מאשר להשתמש באמולטורים, ותוכל לראות את היתרונות בעבודה שלך. Framer כולל תכונת מראה, שהיא שרת מובנה המציע כתובת אתר לאב הטיפוס שלך ברשת המקומית שלך. פשוט היכנס לכתובת האתר באמצעות המכשיר שלך.
למדת את כל מה שאתה צריך לדעת כדי ליצור אב טיפוס של העיצובים שלך ב- Framer. למה אתה מחכה?
מילים: ג'רוד דרייסדייל
ג'רוד דרייסדייל הוא סופר, יועץ עיצוב, יצרן מוצרים דיגיטליים. מאמר זה פורסם במקור בגיליון 270 של המגזין נט.
אהבתי את זה? תקרא את זה!
- צור אבות טיפוס חיים הניתנים ללחיצה ב- Sketch
- איך לפתוח בלוג
- עורכי התמונות הטובים ביותר
