מדריך למתחילים להנפשת SVG עם CSS

גרפיקה וקטורית ניתנת להרחבה (SVG) הן יותר מסתם קבצי תמונה. כיישום XML, קובצי SVG מכילים סימון שנראה ועובד בדומה ל-HTML. אתה יכול גם להשתמש בהם בשילוב עם קוד CSS ו-JavaScript. זה מאפשר הנפשת קבצי SVG, יצירת תמונות מורכבות שעובדות היטב עבור עיצוב אתרים וסביבות דינמיות אחרות.

אבל איך עושים אנימציית SVG? התחל עם צורת SVG, הנפש אותה באמצעות CSS, והסתמך על העקרונות האלה כדי להשתמש באנימציה בעבודה שלך.

הנפשת SVG עם HTML ו-CSS

למרות שאתה יכול להשתמש ב-JavaScript להנפשת SVG באופן פרוגרמטי, ל-CSS יש כעת תמיכה טובה גם בהנפשות. אתה יכול למצוא את כל הקוד לדוגמה על ה-CodePen עבור פרויקט זה.

בניית תמונת SVG בתוך HTML

השלב הראשון בתהליך זה הוא בניית תמונת ה-SVG שאיתה תעבדו. אתה יכול למצוא סימון SVG בחלונית HTML ב- CodePen.

מבנה SVG

בעוד ש-SVG חולקים פורמט דומה ל-HTML, התגים שבהם אתה משתמש כדי ליצור אותם שונים. ל-SVG יש תגיות פתיחה וסגירה () שיכול להכיל מגוון של מאפיינים שונים. במקרה שלנו, אנחנו משתמשים תְעוּדַת זֶהוּת ו viewBox נכסים. המאפיין id פועל כמו כל מזהה HTML אחר, ומספק לך מזהה ייחודי לשימוש ב-CSS/JS שלך. המאפיין viewBox מגדיר את גודל ה-SVG שלנו.

<!-- SVG עם גודל רספונסיבי -->
<svg id="MUOSVGAanimation" viewBox="0 0 800 600">
<!-- תוכן SVG -->
</svg>

אתה יכול להשתמש במאפייני רוחב וגובה במקום זאת, כפי שמדגימה הדוגמה הבאה. עם זאת, viewBox יוצר SVG רספונסיבי שיתאים לגודל נקודת התצוגה מבלי לשבור את יחס הגובה-רוחב שלו.

 SVG עם גודל סטטי 
<svg id="MUOSVGAanimation" רוחב="800" גובה="600">
<!-- תוכן SVG -->
</svg>

צורות SVG

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

• SVG Ellipse: זהו כלי עיגול/סגלגל. הוא מציין מאפיינים עבור רדיוס ציר y/x (rx/ry), צבע מילוי ורוחב קו. חשוב לזכור שהרדיוס שתבחרו בכלי זה יהיה מחצית מקוטר הצורה.

<זיהוי אליפסה="מעגל" rx="100" ry="100" למלא="#ffed00" רוחב שבץ="0"/>

• SVG rect: הכלי SVG rect יוצר ריבוע או מלבן. לזה יש מאפיינים של רוחב/גובה, טרנספורמציה, צבע מילוי ורוחב קו.

<rect id="כיכר" רוחב="200" גובה="200" transform="תרגם (300 200)" למלא="#05f"
 רוחב שבץ="0"/>

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

<מצולע id="משולש" נקודות="15,-97 115,102 -84,102 15,-97"
 transform="תרגם (0,0)" למלא="#f00" רוחב שבץ="0"/>

ברגע שהאנימציה מונחת, הצורות יסתדרו זו לצד זו.

שלוש צורות ה-SVG הללו הן מהנפוצות ביותר, אך יש עוד לבחירתך. אתה יכול להשתמש בצורות הבאות כאשר עבודה עם אנימציית SVG:

• מעגל SVG: צורה זו דומה לאליפסה, אך תמיד יש לה רדיוסים X ו-Y שווים.
• קו SVG: קו SVG הוא קטע קו בודד עם שתי נקודות, אחת בכל קצה.
• SVG Polyline: Polylines הם כמו קווים בסיסיים, רק שהם יכולים להכיל יותר משתי נקודות.
• מצולע SVG: מצולעי SVG הם כמו מלבנים, רק שהם יכולים להכיל יותר מארבע נקודות, מה שהופך צורות מורכבות לאפשריות.
• נתיב SVG: נתיבי SVG פועלים בדומה לכלי העט ב-Adobe Photoshop. קווים יכולים להתחבר כמו פולי-קו/מצולע, אבל הם יכולים גם להחיל עיקולים עליהם.

כיצד להנפשת SVG עם CSS

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

הזזת המעגל באמצעות Transform and Translate

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

#מעגל {
 אנימציה: circle_anim 2000ms ליניארי אינסוף נורמלי קדימה
}

המילה הראשונה בערך, מעגל_אני, הוא שם לאנימציה. זה פועל לשתי שניות (2000 אלפיות השנייה). יש לזה ליניארי עקומה ששומרת על מהירות עקבית ומוגדרת להפעלת an אֵינְסוֹף מספר פעמים ב- קדימה כיוון. אתה יכול להשתמש במסגרות מפתח כדי להגדיר שלבים בודדים של האנימציה:

@keyframes מעגל_אניים {
 0% { שינוי צורה: תרגם(155 פיקסלים, 305 פיקסלים) }
 45% { שינוי צורה: תרגם(155 פיקסלים, -123 פיקסלים) }
 50% { שינוי צורה: תרגם(-123 פיקסלים, -123 פיקסלים) }
 55% { שינוי צורה: תרגם(-123 פיקסלים, 728 פיקסלים) }
 60% { שינוי צורה: תרגם(155 פיקסלים, 728 פיקסלים) }
 100% { שינוי צורה: תרגם(155 פיקסלים, 305 פיקסלים) }
}

ישנן שש פריימים מפתח בהנפשה זו, כך שהמעגל יעבור לשישה מיקומים שונים בכל מחזור. ה להפוך: לתרגם מאפיין קובע את מיקום המעגל בכל שלב. ב-0% העיגול נמצא באמצע המסך וזז מעלה ומחוץ לעין ב-45%. ב-50% הוא זז שמאלה מהמסך לפני שהוא נע מתחת לנקודת התצוגה ב-55%. העיגול זז בחזרה למיקומו האופקי ב-60%, והאנימציה הושלמה ב-100% כשהעיגול חזרה באמצע המסך.

הנפש את נכס רדיוס הגבול של הכיכר

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

#כיכר { אנימציה: square_anim 2000 אלפיות השנייה הקלה-in-out אינסוף קדימה רגילה }

האנימציה הריבועית נקראת square_anim ויש לה זמן ריצה של שתי שניות. ה קלות-in-out עקומה הופכת את ההנפשה לאטית יותר בתחילתה ובסיומה, ויוצרת אפקט חלק.

@keyframes square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 פיקסלים; ry: 40 פיקסלים }
 55% { rx: 40 פיקסלים; ry: 40 פיקסלים }
 100% { rx: 0px; ry: 0px }
}

כפי שאתה יכול לראות, לאנימציה הזו יש ארבע פריימים מפתח. רדיוס הגבול X ו-Y משתנה מ-0px ל-40px בין 0% ל-45%, מושהה ב-40px עד 55%. לאחר מכן הוא חוזר ל-0px עבור כל רדיוס עד שהאנימציה מגיעה ל-100%.

סובב את משולש ה-SVG עם טרנספורמציה

אנימציית ה-SVG הסופית בדוגמה היא הפשוטה ביותר, כאשר המשולש מסתובב סביב נקודת המרכז שלו. הצורה משלימה מהפכה שלמה כל שתי שניות וממשיכה לרוץ בלי סוף. יש לו עקומת הקלה שמביאה להאטה של ​​האנימציה בסוף. האנימציה נקראת triangle_anim.

#משולש { אנימציה: משולש_אני 2000 אלפיות השנייה הקלה אינסוף קדימה רגילה }

לאנימציה זו יש שני פריימים מפתח, אחד ב-0% והשני ב-100%. מאפיין ה-Transform rotate הופך את המשולש מ-0 מעלות ב-0% ל-360 מעלות ב-100%, ויוצר סיבוב מלא.

@keyframes triangle_anim {
 0% { שינוי צורה: תרגם(644 פיקסלים, 297 פיקסלים) להתחלף(0 מעלות) }
 100% { שינוי צורה: תרגם(644 פיקסלים, 297 פיקסלים) להתחלף(360 מעלות) }
}

כיצד להנפשת מאפיינים אחרים

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

במקרים נדירים שבהם CSS לא יכול לעשות את העבודה, אתה יכול להשתמש בקוד JavaScript כדי להנפיש תמונות SVG. אתה יכול למצוא המון מדריכים שיעזרו לך בזה ברגע שאתה מרגיש מוכן לעשות את הצעד הבא עם ה-SVG שלך.

הכנת אנימציות SVG משלך

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

10 דפוסי רקע של CSS שאתה יכול להשתמש באתר שלך

קרא הבא