בגלריה Yui 3: הרחבות עבור SVG, שנוצרו עבור SVG וואו! »ממשק המשתמש Yahoo! בלוג (YUIBlog)

בגלריה Yui 3: הרחבות עבור SVG, שנוצרו עבור SVG וואו!

18 אוקטובר 2010 בשעה 11:18 בבוקר על ידי וינסנט הררי | ב פיתוח , Yui 3 גלריה | 2 תגובות

הקדמה

SVG ( -Scalable Vector Graphics ) מספק עבור תחביר הצהרתי, גרפיקה אינטראקטיבית 2 ד אנימציה: צורות, תמונות וטקסט. תמיכה SVG היא חלק HTML 5 מפרט SVG מיושם על ידי כל הדפדפנים העיקריים, כולל את Internet Explorer של מיקרוסופט בגרסה 9 .

את SVG-wow.org אתרי אינטרנט מציגה מה אפשר לעשות עם SVG היום. הדגמות באתר זה נוצרו פתח SVG הכנס, שבו SVG וואו! המפגשים היו מסורת מספר שנים. וואו SVG! המפגשים היו נשלח על ידי דין ג'קסון, אז בשיתוף פעולה עם עצמי ואז המשיך אריק Dahlstrom . אריק ואני collorated על הפגישה עבור 2009 ו 2010 המהדורות של הכנס.

בשנתיים האחרונות, הדגמות השתמשו יותר ויותר מסגרות AJAX, יישום התכונות שלהם SVG במקום (או בנוסף) HTML. Yui היא המסגרת הנפוצה ביותר באתר האינטרנט, אשר עושה שימוש הן 2 Yui ו Yui 3 .

אני אתחיל עם סקירה מהירה SVG ואז לדון סוג של הדגמות כי Yui נתמך על הרחבות הוספתי לגלריה Yui 3 כדי לגרום לזה לעבוד עם SVG. (תוספות אלה הן כעת חופשיים להשתמש על פי תנאי רישיון BSD של Yui .)

SVG סקירה

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

התמונה הבאה היא לכידת מסך של דף סגנון חלופי למשל על SVG-wow.org ומראה כמה תכונות SVG בכל משחק: עיבוד עשיר (השפעות צל, מילויים, דפוסי) וצורות פשוטות ומורכבות.

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

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

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

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

SVG ו-HTML

עם HTML5 , SVG ניתן inlined במסמכי HTML בלי עיכובים נוספים. דפדפנים מתחילים לתמוך תכונה (למשל, אתר 4 ). לעת עתה, כל הדפדפנים העיקריים תומכים SVG inlined ב-XHTML, אשר מספקת את אותה פונקציונליות. SVG ב-XHTML פשוט דורש מרחבי שם הכריז כראוי.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> בשורה SVG </ h1>

         <SVG xmlns = "http://www.w3.org/2000/svg" גירסה = "1.1"
          xmlns: XLink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <- תוכן SVG כאן ->
         </ SVG>
     </ Body>
 </ Html>

כל דוגמאות קוד בדף זה להשתמש בדרך זו של inlining SVG ב-XHTML.

SVG ו Yui

SVG תומך אנימציה הצהרתי. לדוגמה, אתה יכול הנפש רדיוס <circle> אלמנט כזה:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ מעגל>

<animate> תג הוא לווה SMIL מפרט, יחד עם אלמנטים אנימציה אחרות, הוא מספק מנוע אנימציה חזק מאוד SVG.

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

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

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

הנפשת SVG עם Yui

הדגמות על SVG-wow להשתמש Yui ליצור פעימות תוף אלסטיים , צורות מורפינג או טקסט מסתובב וצורות למשל. שימוש Yui עם SVG נדרש כמה סיומות כמה Yui, אתאר אותם בעוד רגע.


טקסט מסתובב וצורות	מורפינג צורות

אלסטי תוף פעימות

להלן מדגים כיצד Yui שימושי פשוט הנפש ולטפל גרפיקה SVG.

Animating את SVG `transform` תכונה

כל האלמנטים הגרפיים SVG יש transform תכונה. תכונה המציינת 2D שינוי affine על אלמנטים, אשר ניתן להשתמש בהם כדי לשנות את קנה המידה, להטות, לסובב או לתרגם.

את SVG-wow.org הרחבות Yui עבור SVG לאפשר animating את transform תכונה כך:

 var ענים = חדש Y.Animate ({
     הצומת: "# circleA",
     מ: {
         המרה: {TX: 0, טאי: 0, SX: 2, סאי: 2}
     },
     ל: {
         המרה: {TX: 20, טאי: 20, SX: 1, ס: 1}
     },
     transformTemplate: "לתרגם (TX # # ty) סולם (# SX, # ס)",
     משך: 1
 });

לראות את אנימציות התמרת בדיקות.

תוכל לציין שערכי התמרת מוגדרים במונחים של "רכיבים" (כגון tx או ty ), אשר משתלבים, כדי ליצור ערך באמצעות transformTemplate למצוא אובייקט תצורה אנימציה.

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

 <circle ...>
     <AnimateTransform attributeName = "המרה" type = "תרגם"
                       מ = "0,0" ל = dur "20,20" = "1s" בגין = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "המרה" type = "קנה המידה"
                       מ = "2,2" ל = dur "1,1" = "1s" בגין = "בלתי מוגבלת" />
 </ מעגל>

שים לב איך את קטע לעיל מחייבת מספר animateTransform אלמנטים אשר צריכים להיות מסונכרנים: begin התכונה של האנימציה 1 מוגדר scaleAnim.begin לסנכרן את ההתחלה של שתי הנפשות. תכונה נחמדה של מנוע אנימציה Yui היא כי העיתוי של אנימציה (כלומר, תחילת הסוף ומשך) ניתן לשתף לחול על מאפייני מרכיבי מרובים.

הארכת Yui עבור animating SVG transforms נעשה שימוש נרחב, כמו מצלמה ו אנימציה מילים דוגמאות. לשעבר משתמשת הרחבה של Yui 3 בזמן האחרון משתמשת הרחבה של Yui 2.

ואנימציה של הגיאומטריה

בסיסי גיאומטריה

ואנימציה של הגיאומטריה SVG עם Yui היא די פשוטה. בדוגמה animates הבאים <rect> , הגובה והרוחב פינה אלמנט של רדיוס:

 var ענים = חדש Y.Animate ({
     הצומת: "# rectA",
     מ: {
         רוחב: 200,
         גובה: 100,
         RX: 5,
         ר"י: 5
     },
     ל: {
         רוחב: 300,
         גובה: 100,
         RX: 10,
         ר"י: 10;
     },
     משך הפעילות: 2,
     הקלה: Y.Easing.elasticOut
 });

לראות את אנימציות צורה בדיקות.

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

`<path>` של `d` מאפיין

תכונה אחת גיאומטריה הוא קצת מיוחד: d התכונה על <path> יסוד. <path> אלמנט משמש גיאומטריה מורכבת באופן שרירותי. <path> יכול לתאר כל צורה. שלה d התכונה מתאר הגיאומטריה שלו במונחים של מגזרים נתיב אשר יכול להיות קווים, קשתות, ריבועיות או מעוקב עקומות bezier (יש כמה פקודות נוספות, אבל כולם המפה bezier curves).

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

 var ענים = חדש Y.Animate ({
     הצומת: "# pathA",
     מ: {ד ': "ז 0 0 C 50 0 100 50 100 100 C 100 50 50 0 0 0 ת"},
     ל: {ד ': "ז 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 ת"},
     משך 1s,
     הקלה: Y.Easing.bounceBack
 });

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

ציטוטים גנדי ההדגמה משתמשת בטכניקה של animating את d התכונה לצורות morph לתוך הדמות של גנדי.

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

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

 / / קטע SVG
 <מסנן ..
     <FeGaussianBlur id = "blurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript אנימציה
 var ענים = חדש Y.Animate ({
     הצומת: "# blurFilter",
     מ: {stdDeviation: [0, 20]},
     ל: {stdDeviation: [0, 0]}
 });

לראות את אנימציות סינון בדיקות. התמונה הבאה מראה כיצד הנפשת לטשטש גאוס יכול לשמש למעבר בין מדינות כפתור.

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

ואנימציה של מאפייני CSS

כמו HTML, SVG אלמנטים יש תכונות וכן מאפייני CSS. SVG יש כמה מאפיינים ספציפיים-CSS . מאפיינים אלה יכולים להיות אנימציה, לפעמים כדי ליצור אפקטים מפתיעים. לדוגמה, stroke-dashoffset נכס יכול לשמש כדי לדמות ציור צורה.

 / / קטע SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var ענים = חדש Y.Animate ({
     הצומת: "# rectA",
     ל: {"שבץ dashoffset ': 0},
     משך: 0.25
 });

לראות את אנימציות שבץ בדיקות.

Graffitis ההדגמה משתמשת בטכניקה זו (למרות Yui ללא אנימציה) וכך גם המצלמה הדגמה (הפעם עם Yui אנימציה).

Yui ו SVG: מתחת למכסה המנוע

האתר SVG-wow.org האינטרנט משתמש גם Yui 2 ו Yui 3 ויש לו SVG ספציפיים סיומות עבור שניהם. החלק הבא של מאמר זה מתמקד 3 הרחבות Yui.

הרחבות היו זקוקים ל:

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

הטיפול החשבונאי ספציפיות SVG של DOM

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

 ממשק SVGAnimatedLength {
   לקריאה בלבד מייחסים SVGLength baseVal;
   לקריאה בלבד מייחסים animVal SVGLength;
 };

כתוצאה מכך, גם ביישומים שאינם תומכים אנימציה הצהרתי, אנחנו צריכים להגיע עד baseVal לקרוא את הערך של תכונה:

 var מעגל = document.getElementById ('# myCircle');
 var rValue = circle.getAttribute ('ר') baseVal.value.

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

 var lengthBehavior = {
     קבוצה: הפונקציה (ענים, עו"ד, מ, ל, שחלף כיף, משך,) {
         / / טיפול ספציפי SVG
     },

     להשיג: הפונקציה (ענים, attr) {
         / / טיפול ספציפי SVG
     }
 };

 / / טפל SR "<circle> מאפיין
 Y.Animate.behaviors.r = lengthBehavior;

ישנם הרחבות נוספות עבור SVG תכונות ערכים אחרים, כגון transform תכונה, תכונה ערכי צבע (כמו fill , stroke או stop-color ) ואת תכונות כגון stdDeviation שהוזכרו קודם לכן.

Tweaks דומה מעטים נדרשו, למשל Y.Node.prototype.toString שיטה, שוב כדי להסביר את SVG של baseVal (הפעם על className רכוש צומת). דוגמה נוספת היא הצומת מחדל סטר ב Node מודול.

הטיפול החשבונאי הבדלים הדפדפן

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

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

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

למרבה הצער, דפדפנים מסוימים אינם מיישמים את המפרט בצורה נכונה window.getComputedStyle לא תמיד להסביר את כל המקורות האפשריים עבור הגדרת את ה-CSS תכונות SVG: בוררי CSS, תכונות סגנון ותכונות תצוגה.

Yui הגיע בזכות ההצלה Node מודול אשר יכול להתארך להסתיר את ההבדלים האלה הדפדפן. את Y.DOM.CUSTOM_STYLES ו Y.Node.prototype.getComputedStyle ניתן יהיה להרחיב להציע דרך אחידה לקרוא מאפייני הסגנון SVG.

הרחבת `Y.DOM`

Yui עוטפת כל גישה DOM דרך Node ממשק. כתוצאה מכך, כמה שיטות ספציפיות SVG DOM, כגון getBBox (המשמש כדי לחשב את גבולות אלמנט SVG), אינם נגישים על האובייקט עטוף.

כדי להקל עליהם את תוכנית SVG, הרחבות מודול מחדל Y.DOM (אשר Node משתמש) נוספו גם לחשוף SVG תכונות שולט או להוסיף שיטות נוחות, הנדרשים בדרך כלל כאשר מניפולציה התוכן:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (SVG לא ספציפית)
getMatrix/setMatrix . מספק דרך קלה כדי לתפעל transforms על אלמנטים SVG, משהו קשה לשמצה עם תקן SVG DOM
getBBox/getViewportBBox לספק דרכים פשוטות כדי לגשת התוחמת תיבת מערכת קואורדינטות של אלמנט או בחלל viewport.

loadContent . השירות להוסיף שבר DOM תיאר באמצעות אובייקט JavaScript מילולי. לדוגמה:

 myNode.loadContent ({
     תג: "ז",
     למלא: "אדום",
     שבץ מוחי: "לא כלום",
     ילדים: [{
         תג: "rect",
         X: 10,
         y: 10,
         רוחב: 200,
         גובה: 300
     } {
         תג: "מעגל",
         מחקר: 10,
         CX: 105,
         סי: 155
     } {
         תג: "התמונה",
         "XLink: href": "התמונות / photo.png",
         רוחב: 200,
         גובה: '300px "
     }, PrevSibling);

הוא קיצור לביצוע שיחות שונות DOM (כגון createElementNS , setAttributeNS ו appendChild ) כדי ליצור g אלמנט ובניה והוספת את זה לפני prevSibling תחת myNode . השירות עוסק מרחבי שמות של תכונות ואלמנטים.

תוספות מנוע אנימציה עבור תזמון וסנכרון

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

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

 var כבול = Y.all ("מעגל כבול # '),
     firstAnim, previousAnim;

 chained.each (פונקציה (עיגול) {
     var ענים = חדש Y.Animate ({
         צומת: עיגול,
         מ: {"למלא": "לבן"},
         ל: {"למלא": "אפור"},
         משך: 0.25
     });
     אם (previousAnim! == לא מוגדר) {
         / / Synchrnoize תחילת ענים להיות 0.15 שניות אחרי שהביאו לפריצתה
         / / אנימציה המעגל הקודם (previousAnim).
         previousAnim.onBegin (ענים, 0.15);
     אחר} {
         firstAnim = ענים;
     }
     previousAnim = ענים;
 });

 / / התחלה 1s האנימציה הראשון לאחר לחיצה על כל המעגלים.
 / / הערה זו היא הרחבה של שיטת ברירת המחדל בטווח Yui שאינה
 / / קח את הזמן לאזן.
 chained.on ("קליק", function () {
     firstAnim.run (1);
 });

לראות את קיזוז זמן בדיקות.

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

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

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

 anim.beginOn (Y.one ("כפתור #"), "קליק", 0.5);

יתחיל 0.5s אנימציה אחרי האלמנט עם "כפתור" היה מזהה לחיצה. זה יד קצר על:

 Y.one ("כפתור #"). על ("קליק", function () {
     setTimeout (500 / * MS * /, function () {anim.run ();});
 });

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

 var ענים = חדש Y.Animate ({
     צומת: Y.one ("כפתור #),
     מ: {R: 30, 'אטימות מילוי': 0, צבע: "ארגמן"},
     ל: {R: 80, 'אטימות מילוי': 1, צבע: 'זהב'},
     משך: 0.25
 });

 / / הבא יהיה להגדיר את המצב הרצוי על אובייקט היעד לפני
 / / ממש מתחילה האנימציה.
 anim.applyStartFrame ();
 anim.run (2);

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

מסקנה

עבודה עם SVG ו Yui, ובמיוחד Yui 3, הייתה חוויה מהנה מאוד: הרבה פונקציונליות Yui חלה על הזכות SVG מהקופסה ואדריכלות להרחבה של Yui אפשרה לעקוף בעיות מפעם לפעם כדי להוסיף פונקציונליות הרצוי .

כמובן, עלתה התמיכה תקן SVG ב Yui יהיה מועיל, בעבודה מסוימת Yui עושה עם לעמוד לבד מסמכים SVG ולהפוך את Node ברמה לעטוף אלמנטים SVG ללא לעקיפת הבעיה.

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

הדגמות על SVG-wow.org נכתבו עבור Yui 3.1 ו ported כדי 3.2 למטרה של הבלוג הזה. ב 3.2, מעברים הוכנסו אשר עושים שימוש הילידים מעברים-CSS אם קיים בדפדפן. זה יכול להיות אפשרי עבור מנוע אנימציה Yui אנימציה דומה למנף SMIL היצע (Opera, Firefox ו-WebKit בעת כתיבת שורות אלה) אשר אמור להניב גם שיפורי ביצועים.

את הרחבות SVG באתר SVG-wow.org האינטרנט זמינים מודול Yui 3 גלריה עבור אלה שרוצים ליהנות כיף של עבודה עם Yui ו SVG.

הפניות

SVG וואו!
מפרט SVG
SVG מדריך
Adobe SVG של אזור (קצת מיושן, אבל עדיין יש דוגמאות טובות)
carto.net דוגמאות
KevLinDev

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

2 תגובות

SVG וואו באמת!
נהדר לכתוב, דוגמאות, ואת הקוד זמין לשימוש ... מאוד מגניב!
תודה.
תגובה על ידי דילן Oudyk - 19 אוקטובר 2010 #
נחמד הדואר מאמר מעניין ....
_________
הלן.
תגובה על ידי בוני מנצ'סטר - 19 יוני 2011 #

מצטערים, טופס התגובה סגורה בשלב זה.

מופעל על ידי וורדפרס על יאהו! אירוח אתרים .

ממשק המשתמש Yahoo! בלוג (YUIBlog)