הכל התחיל כשחשבתי על גיף לאתר שלי.

אחרי שאיירתי כמה אייקונים ורציתי גם להזיז אותם קצת. (אחרי הכל, על אחד מהם כתוב “אנימציה” קצת מצחיק להציג אייקון של מיקימאוס ולסגור עניין).

אוקיי אז בוא נעשה מזה גיף.
-אנחה-🤔
אוף שוב פעם לאנמץ באפטר, ואז להעביר לפוטושופ רק בשביל שבסוף זה יהיה מפוקסל. אין דרך אחרת?

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

מה היתרונות של SVG?

כמו כל דבר אחר, SVG לא מתאים להכל, ויש לו גם לא מעט חסרונות, אבל היתרונות שלו די ברורים. קודם כל אם הוא מוטמע בתוך המסמך, זה אומר שזה לוקח פחות “בקשות” לקרוא אותו – וזה אומר שיעלה יותר מהר.
הוא ווקטורי – היתרון בעיקר באיורים שטוחים ונקיים.
יתרון נוסף הוא כמובן, שאפשר לשנות את הגודל שלו וזה לא ממש משנה. כלומר SVG בגודל של 1920PX ישקול אותו דבר גם ב20PX וכו.

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

אופציה ראשונה – בודימובין

בערך באותו זמן שחשבתי על זה, Airbnb הכריזו על כלי שמספק בדיוק את זה.
לוטי – (שמבוסס על bodymovin) הזכיר לי את ימיו העליזים של swiffy שכמעשה קסם, נותן לי אופציה לאנמץ בתוכנה גרפית ומייצא את זה לקוד.
אוקיי, שיחקתי איתו קצת באפטר והתוצאה לא רעה בכלל, רק שבשביל 4 אנימציות קטנות באתר שלי היה נראה לי קצת בלאגן, במיוחד שניסיתי להבין מה לעזאזל הולך שם בjson. ואיך אני משלב את זה באתר.

זה מה שראיתי כשיצא הקוד מbodymovin


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

לצייר בקוד

הרעיון מאחורי בודימובין הוא לעזור להפוך אנימציות מורכבות לקוד, אבל יכול להיות שהקוד עצמו יהיה פשוט יותר?
בדקתי וחיפשתי חומר ואז הבנתי שבעבור מפתחים אנימציה של svg היא הרבה יותר פשוטה.
כריס גנון אפילו יצר גרסא של קוד “טהור” של אותה אנימציה ממש שעשו בairbnb בקוד טהור כדי להדגים שזהאפשרי גם לגבי אנימציות יותר מורכבות.
אז כן, יש המון חומר על זה ברשת, וכל מה שאני עומד לכתוב ניתן ללמוד מאפס בדיוק משם.
המדריך הכי מקיף עם כל המידע שאי פעם תרצו נמצא כאן
יש עוד כמה למטיבי לכת כאן

.מה זה בכלל SVG

אז התחלתי מחדש וראיתי שאחרי שאני מייצא מillustrator את הSVG אני יכול לראות הקוד שלו בכרום.
ובעצם הוא לא כל כך מסובך.
יש <path>, יש <fill>, יש קבוצות(<g>), יש אפילו דוגמאות(pattern)… סה”כ די הגיוני.
מה שכן הקוד עדיין היה ענק ומפחיד יחסית לתוצאה.
לפתרון לכך קוראים SVG-Optimize. ובדיוק בשביל פחדנים כמוני שלא רוצים להתעסק בקוד המציאו את הגרסא הויזואלית svgomg. פתרון שיכול לעזור לכל מי שמתעסק עם SVG באתר בכל צורה.

אוקיי, עכשיו כשהקוד נקי אני באמת יותר בקלות יכול להבין מה זה מה.
וכן, אני גם יכול לשלוט בקלות על הצבע, המילוי או הקו של האיור בקוד עצמו. ע”י שינוי של “fill”, “stroke”, width וכו’
נחמד.

הדרך הקלה – animate.css

אז מה הדרך הכי קלה להזיז את זה? טוב, באתר שלי אני משתמש גם בספריית האנימציה animate.css
ציירתי לב, ואני רוצה להוסיף את האנימציה”pulse“. נוסיף את הclass המתאים לpath מסויים

 path class="animated pulse infinate" 

וזהו בעצם. כמו שכתבו באתר “רק להוסיף CSS”.
יש עוד כל מיני ספריות ועזרים למתחילים שלא רוצים להתעסק בקוד למשל אנימיסטה.
עוד כלי חמוד שמציג ממשק גרפי הוא svg circus.


See the Pen Svg animations by Boaz(@Aniboazsign) on CodePen
0

למתקדמים – css animation

העקרון של animate.css היא ספריית אנימציות מוכנות מראש שבכל אחד מוגדרים קי פריימים. הנה חלק מתוך הספרייה:

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

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

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

כאן מתוארים 3 קיפריימים(keyframes) שמתנגנים בלופ. הראשון והאחרון האובייקט בגודל רגיל, וב50% מהמשך (במקרה של שניה אחת זה חצי שניה) הגודל של האובייקט גדל.
זה ע לרגל אחת כל העסק של אנימצית CSS. זה לא רק קל להבנה, אם נצייר את זה על טיימליין נגלה שכל אנימטור מכיר את זה וזה לא כזה מפחיד.
הנה למשל דוגמא מכרום,  למי שרוצה ממשק ויזואלי לתזמון מומלץ בהחלט להעזר בו
מה שהפיל לי את האסימון, בניגוד ל from-to היה השימוש באחוזים. מה שאומר שגם אם נשנה את המשך של משהו הוא עדיין יקבל את אותה אנימציה. זה אומר למשל שאני יכול להנפיש שתי אובייקטים על המסך באותה צורה בשני תזמונים שונים.
נקודה שנייה היא שאני יכול לעשות משהו קצת יותר מתוחכם. משניים שלוש קיפריימים. למשל הנה הקוד הרגיל לאנימציה של עין נפקחת ונסגרת שיצרתי:

@keyframes eye {
 0% { transform: scale(1, 1);
 stroke-width: 2px;
 }
 100%{ transform: scale(1, 0);
 stroke-width: 20px;
 }
 }

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


 @keyframes eye {
 5%,
 20% {
 transform: scale(1, 1);
 stroke-width: 2px;
 }
 10%,
 15% {
 transform: scale(1, 0);
 stroke-width: 20px;
 }
 }

על אותו עקרון אני יכול לתת קיפריימים יותר מורכבים ולהגיד לעין ללכת ימינה ושמאלה לכמה שניות ועוד ועוד

@keyframes pupil {  100%, 30% { transform: scale(1, 1); } 2%, 20% { transform: scale(1.2, 1.2); } 9%, 16% { transform: scale(0, 0); } 75%, 50%, 35% { transform: translate(20px, -4px); } 55%, 65% { transform: translate(-20px, 5px);  }  }

הנה האנימציה הסופית


See the Pen Svg animations by Boaz(@Aniboazsign) on CodePen
1

למתקדמים מאד – JS וספריות קוד אחרות

ספריות אנימציה כמו SVGsnap וanime.js יתאימו ליצירת דברים מורכבים יותר (וגם אינטראקטיביים יותר..)

לקריאה נוספת:

this article in english
להכניס svg בוורדפרס
איך לאנמץ SVG

  • Shanya

    אם אתה פוחד לאנמץ, מה יגידו אזובי הקיר?

  • animatron.com
    מומלץ – קל ומצליח לייצר קוד טוב

    • תודה על השיתוף, נבדוק גם אותו