8 ספריות. להנפיש

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

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

עוד על Hongkiat.com:

• . כדי ליצור אנימציה בקלות
• בקלות להנפיש טקסט עם Textillate.js
• כיצד להמיר טקסט Photoshop לתוך SVG
• הנפשת כדי להסתיר ולהחליק תוכן עם jQuery

1. ויווס

Vivus היא ספריית JavaScript נותן SVG שלך את המראה של להיות נמשך. Vivus פועלת מחוץ לקופסה ללא צורך בתלות כלשהי (למשל jQuery). כל שעליך לעשות הוא לכלול את .י קובץ ב- HTML שלך, ואת לייעד את רכיב SVG אתה רוצה הנפשת, יחד עם כמה אפשרויות מראש כדי להתחיל את האנימציה מיד.

לדוגמה:

 חדש Vivus ('svg-element', type: 'oneByOne', משך: 200); 

האמור לעיל יהיה הנפש שלי SVG אלמנט שיש לו את svg-element מזהה ב 200 אלפיות השנייה. כל רכיב של SVG זה ימשוך אחד אחרי השני בתוך מסגרת זמן זו.

2. בונסאי

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

3. מהירות

מהירות היא ספריית JavaScript שנבנתה עבור אנימציות מהירות. מהירות של מהירות כאשר טיוח אנימציה הוא מהיר מאוד. זה outperforms jQuery, ואפילו CSS, לעומת זאת. מהירות של ה- API עובד בדומה להנפשה ב- jQuery, אלא שהוא משתמש בכינוי מילת המפתח $ .velocity () במקום $ .animate (). זה בצד, אתה יכול להשתמש באותן מילות מפתח בדיוק אנימציה כגון דועך ו דהייה.

4. רפאל

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

5. הצמד

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

6. צייר קו עצלן

Lazy Line Painter הוא תוסף jQuery להנפשת נתיבי SVG כדי להנפיש את רצף הציור, בדומה ל- Vivus. החדשות הרעות הוא תוסף זה רק עושה את זה דבר ספציפי מאוד. לפיכך, כאשר אתה מייבא SVG מאפליקציות כמו Illustrator או Inkscape, ודא שלא נשאר צבע מילוי ב- SVG שלך, רק את הנתיבים.

7. SVG.js

SVG.js היא ספרייה קל משקל עבור מניפולציה ו animating SVG. באמצעות ספריה זו, תוכל להנפיש את הגודל, המיקום או הצבע בתוך אלמנט SVG. זה לא רק animates אם כי; אתה יכול גם להחיל תוספים נוספים כדי להוסיף פונקציות נוספות. דוגמה זו משתמשת plugin svg.filter.js ליישם מסננים כמו טשטוש gaussian, desaturate, בניגוד, ספיה וכו 'לתמונה.

8. מסלול

המסלול תומך שלושה סוגים של אלמנטים, נתיב, קו, ו polyline נהג לצייר קווי SVG. הנה דוגמה של מצולע המציג את קו קונסולת PlayStation 4 קו אנימציה.