כיצד ליצור אנימציה SVG באמצעות CSS
אנימציות SVG ניתן לעשות באמצעות אלמנטים מקומיים כגון
CSS אנימציה יכול גם להיות דרך חלופית של שימוש בספריית JavaScript כמו SnapSVG. בהודעה זו נראה מה אנחנו יכולים לספק עם CSS אנימציה ב SVG.
1. יצירת הצורות
קודם כל, נצטרך לצייר את הצורות ואת האובייקטים שאנחנו רוצים הנפשת. ניתן להשתמש ביישומים כמו סקיצה, אדובי אילוסטרייטור, או אינקסקייפ כדי ליצור אחד.
בדוגמה זו, ציירתי שמים מעוננים כרקע, ואוניית טילים נורה כלפי מעלה, להבות כללו:
לאחר שנעשה עם הציור, אנחנו צריכים לייצא כל אובייקט יצרנו לתוך SVG.
אני הולך להשתמש סקיצה כדוגמה עבור שלב זה. בחר את האובייקט שברצונך להפוך לפורמט SVG. בפינה השמאלית התחתונה של החלון, לחץ על הפוך את ייצוא. בחר בפורמט SVG ולאחר מכן לחץ על ייצא object-name. אתה צריך לעשות את זה אובייקט אחד בכל פעם.
2. הכנס את SVG ל- HTML
כאשר אתה פותח את קובץ SVG בעורך קוד, תמצא כי קודי SVG הם די מבולגן. לפיכך, לפני שנפרס את קובץ SVG, ננקה את הקוד ונבצע אופטימיזציה שלו באמצעות כלי שורת פקודה זה שנקרא SVGO.
הפעלה מסוף או שורת הפקודה, והתקן את SVGO באמצעות שורת פקודה זו:
[sudo] npm להתקין -g svgo
לכוון את הפקודה, סווגו, על קובץ SVG באמצעות --יפה כדי להפיק קוד SVG קריא:
svgo rocket.svg -
אם יש לך מספר SVGs בספרייה, תוכל לייעל את כולם יחד, בו-זמנית. בהנחה שהמדריך נקרא / תמונות, ולאחר מכן מספריית האב השתמש בפקודה זו:
svgo -f תמונות -
בואו לראות את ההבדל לפני ואחרי שימוש SVGO.
העתק את הקוד בתוך קובץ SVG והדבק אותו בקובץ HTML. אנחנו נפעל על שטח עבודה של 800px על ידי 600px רחב, אז בואו לא נשכח להגדיר את רוחב על רכיב SVG.
ה- SVG מוגדר בקובץ HTML. אנו נצטרך להגדיר מזהה עבור כל אובייקט, כך שנוכל לבחור אותם ב- CSS מאוחר יותר.
עבור הדרכה זו, אנחנו צריכים להגדיר את מזהה עבור הרקטה ואת הלהבות, וכמה עננים. על מנת שהאובייקטים יטפלו בשלב ההנפשה מאוחר יותר, עלינו להוסיף id - אתה יכול גם להשתמש מעמד - לכל אובייקט. בשלב זה, הקוד ייראה כך:
3. הנפשת באמצעות CSS
עכשיו בואו נעשה קצת כיף. התוכנית היא להגביר את הרקטות לחלל. הרקטה מחולקת לשתי קבוצות; הרקטה עצמה והלהבה.
קודם כל, אנחנו ממקמים את הרקטה באמצע מרחב העבודה, כדלקמן:
#rocket transform: translate (260px, 200px);
מה שאתה רואה הוא זה:
עכשיו כדי להפוך את הרקטה נראה כאילו הוא הולך כלפי מעלה, אנחנו צריכים ליצור את האשליה של עננים נופלים. CSS שאנו משתמשים בו הוא:
# cloud1 הנפשה: ליפול 1 ליניארי ליניארי; @keyframes סתיו מתוך transform: translateY (-100px); ל transform: translateY (1000px)
כדי לגרום לזה להיראות אפילו יותר מציאותי, בואו אנימציה ארבעה עננים, ולעשות אותם “נפילה” במהירויות שונות. אנחנו גם למקם אותם אחרת מ X- ציר.
לענן השני יהיה קוד כזה:
# cloud2 הנפשה: נפילה -2 2 ליניארית ליניארית; @keyframes fall-2 מתוך transform: translate (200px, -100px); to transform: translate (200px, 1000px)
שים לב שהעברנו את הענן מס '2 לימין, על ידי 200px עם לתרגם. בשלב זה, התוצאה צריכה להיראות כך.
לאחר מכן, בואו להפוך את הרקטה מתעוררים לחיים. אנו להקצות keyframe אנימציה, כדלקמן:
#rocket הנפשה: קופץ 1s בקלות אינסופית; @ קופצים קופצים 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
ומוסיפים הנפשה לאש הרקטות גם כן:
#flame הנפשה: לנער .2 ליניארי ליניארי; @keyframes ללחוץ 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
ימין! עכשיו, כי כל הקודים שלנו מוגדרים, האנימציה צריכה לעבוד על SVG שלנו.
תסתכל על הרקטות שלנו פיצוץ לחלל.
מחשבה סופית
אנימציה היא לא התכונה הקלה ביותר ב- CSS כדי לתפוס. אבל אני מקווה שתמצא הדרכה זו כנקודת התחלה טובה לחקור CSS אנימציה על SVG נוספת; אתה תהיה מופתע לדעת מה ניתן להשיג עם CSS אנימציה בהישג יד.
אם אתה רוצה להתחיל עם יסודות מאוד, אתה יכול להתחיל כאן עם הודעה זו: מבט לתוך: Scalable וקטור גרפיקה (SVG) אנימציה או בצע את שאר סדרת SVG.
- הצג הדגמה
- הורד מקור
