מבט לתוך גרפיקה וקטורית Scalable (SVG) אנימציה
היום אנחנו הולכים להמשיך את הדיון שלנו Scalable וקטור גרפי (SVG), והפעם אנחנו הולכים לעבוד אנימציה SVG. אל תפחד אף על פי, SVG אנימציה היא קלה יחסית למעשה זה פוסט נתחיל מן היסודות.
יישום בסיסי
אנימציה ב SVG ניתן לעשות זאת דרך
כפי שניתן לראות מקטע הקוד לעיל, אנו מוסיפים את
שם מאפיין: תכונה זו מציינת איזה תכונה של רכיב תושפע בהנפשה.
מ: תכונה זו היא אופציונלית, אנו יכולים לציין ערך מדויק או להשאיר אותו כדי לאפשר לו להתחיל מהמקום שבו הוא נמצא.
ל: תכונה זו מציינת את כיוון האנימציה. בהתאם לערך שצוין שם מאפיין, התוצאות עשויות להשתנות. אבל בדוגמה זו הוא יאריך את גובה.
dur: תכונה זו מציינת את משך ההנפשה. הערך של תכונה זו מתבטא בתחביר ערכי השעון. לדוגמה, 02:33 מייצג 2 דקות ו 33 שניות, בעוד 3h הוא שווה ל 3 שעות, אבל אנחנו לא צריכים את זה כל כך הרבה זמן שציינו את משך הזמן עבור פשוט 3 או 3 שניות;
אותו דבר הולך ייצור).
- הדגמת יישום בסיסי
אלמנטים נעים
במרכיבי SVG נעים, עלינו רק למקד את קואורדינטת האלמנט איקס ו y;
בדוגמה לעיל, אנחנו מעבירים את המלבן מ 0 ל 200 בתוך 3 שניות, המלבן יופיע בתנועה אופקית מימין לשמאל. כמו כן, אם אתה מסתכל בזהירות הוספנו גם תכונה נוספת למלא.
למלא תכונה כאן אין שום קשר עם צבע הרקע כמו אלמנטים SVG אחרים. תכונה זו מציינת כיצד האנימציה תפעל לאחר סיום הסיום. בדוגמה זו אנו להקפיא את הרכיב המושפע, כך שהוא נשאר במקום שבו האנימציה מסתיימת.
זה גם עובד באופן דומה cx או cy, ככה:
- הדגמת אלמנטים נעים
הנפשת תכונות מרובות
עד כה, אנחנו רק למקד תכונה אחת להיות אנימציה, אבל אפשר גם להנפיש יותר תכונה אחת בבת אחת. הדוגמה הבאה מציגה כיצד אנו עושים זאת:
כפי שאתה יכול לראות, זה עובד בצורה דומה, רק עכשיו יש לנו שני
- הדגמה של תכונות מרובות
בעקבות נתיב
בפוסט הקודם שלנו ב עבודה עם טקסט ב- SVG, הראינו לך איך לזרום את הטקסט לדרך. אפשר גם לעשות את אותו הדבר ב אנימציה SVG, אנו יכולים להנפיש אלמנט כדי לעקוב אחר נתיב. הנה דוגמה.
הנתיב מוגדר טוב יותר בתוך id עם
זהו זה, עכשיו בואו נראה את זה בפעולה;
- בעקבות הדגמה נתיב
טרנספורמציות
אנחנו יכולים גם להשתמש טרנספורמציה כמו בקנה מידה, לתרגם ו לסובב עבור אנימציה, וכדי לעשות זאת נשתמש
טרנספורמציות במניות SVG עקרונות דומים עם CSS3, ויש לנו מכוסה על זה די מקיף בהודעה הקודמת שלנו על CSS3 2D Transformation.
- הדגמת טרנספורמציה
סופי מחשבות
בהתאם המיומנות שלך על SVG אנימציה אתה יכול ליצור משהו כזה.
יתרון אחד של שימוש SVG אנימציה על פלאש אנימציה היא שזה לא להסתמך על צד שלישי plugins לעבוד וזה גם הרבה יותר מהר מאשר פלאש. לאחר Adobe עצר תמיכה Flash שלהם אנדרואיד, ייתכן שתרצה להתחיל לנסות את הגישה הזאת לשרת אנימציה באתר האינטרנט הבא שלך.
הפניות נוספות
- SVG הנפשת תיעוד
- מתקדם טכניקות SVG אנימציה
- הצג הדגמה
- הורד מקור
