في معرض 3 YUI: تمديدات للSVG، أنشاء لنجاح باهر SVG!

18 أكتوبر 2010 الساعة 11:18 صباحا من قبل هاردي فنسنت | في التنمية ، YUI معرض 3 | 2 تعليقات

مقدمة

SVG ( رسومات المتجهات قابلة للتطوير ) على بناء جملة التعريفي للرسومات المتحركة التفاعلية، 2D: الأشكال والصور والنصوص. SVG الدعم هو جزء من و HTML 5 مواصفات ويتم تنفيذه من قبل SVG جميع المتصفحات الرئيسية، بما في انترنت اكسبلورر من مايكروسوفت في الإصدار 9 .

و SVG-wow.org موقع على شبكة الإنترنت يعرض ما يمكن القيام به مع SVG اليوم. تم إنشاء العروض على هذا الموقع ل فتح SVG المؤتمر، حيث SVG نجاح باهر! وكانت جلسات تقليدا منذ عدة سنوات. نجاح باهر لSVG! وقد بدأت جلسات من قبل جاكسون دين، ثم بالتعاون مع نفسي و من ثم استمر من قبل إريك دالستروم . وقد collorated إريك وأنا في هذه الدورة ل 2009 و 2010 الطبعات للمؤتمر.

على مدى العامين الماضيين، قد استخدمت على نحو متزايد الأطر أجاكس التجريبية، وتطبيق سماتها إلى SVG بدلا من (أو بالإضافة إلى) HTML. YUI هي الإطار الأكثر استخداما على موقع على شبكة الإنترنت، والذي يستخدم على حد سواء YUI 2 و 3 YUI .

سأبدأ مع نظرة عامة على SVG سريع ومن ثم مناقشة نوع من العروض التي YUI دعمها و ملحقات لقد أضيفت إلى معرض 3 YUI لجعلها تعمل مع SVG. (هذه الملحقات هي الآن حرة في استخدام وفقا لأحكام رخصة YUI في بي إس دي .)

SVG نظرة عامة

مثل HTML، SVG هي مواصفات W3C. أنه يوفر بناء الجملة لوصف الأشكال الأساسية (المستطيلات والدوائر والخطوط والمضلعات، والحذف، polylines)، والأشكال التعسفية (وصفها من حيث القطاعات التي يمكن أن تكون مسار خطوط، من الدرجة الثانية أو بيزيير منحنيات مكعب) والنصوص والصور.

الصورة التالية هو القبض على الشاشة من أنماط بديلة على سبيل المثال SVG-wow.org ويظهر بعض الملامح SVG في اللعب: جعل الغني (تأثيرات الظل، تدرجات، وأنماط) والأشكال البسيطة والمعقدة.

لأنه يتم تعريف الصور SVG من حيث الهندسة وسمات تقديم، فمن الممكن أن تجعلها في أي قرار. ونتيجة لذلك، يمكن تحجيمها الصور SVG إلى أي حجم مع الحفاظ على تقديم نوعية عالية، وعلى سبيل المثال عند الطباعة (لا حواف خشنة أكثر).

ما يلي التكبير في رأي يظهر نفس الصورة SVG أظهرت في وقت سابق لكنها قدمت في دقة أعلى مع الحفاظ على الجودة العالية.

تماما مثل HTML، SVG يدعم التفاعل: فمن الممكن أن تضيف المستمعين الحدث على الكائنات الرسومية للتفاعل وحة المفاتيح أو الماوس. بالطبع، SVG يدعم طراز كائن المستند، مما يجعل من السهل على التعامل مع الخصائص المختلفة من الكائنات الرسومية، مثل الهندسة، أو أسلوب التقديم.

هناك الكثير لمواصفات SVG: اساليب العرض المتقدمة (التمسيد، وملء، وأنماط، التدرجات)، تأثيرات فلتر (يطمس، الظلال، مصفوفات اللون)، والتصميم المغلق، وملامح النصوص المتقدمة (مثل النص على الطريق) والرسوم المتحركة التعريفي . يمكنك التحقق من المراجع في نهاية هذا المنصب لمعرفة المزيد حول ميزات تنسيق SVG.

SVG و HTML

مع HTML5 ، ويمكن inlined SVG في مستندات HTML دون مزيد من اللغط. برامج التصفح قد بدأت لدعم هذه الميزة (على سبيل المثال، فايرفوكس 4 ). في الوقت الحاضر، وجميع المتصفحات الرئيسية دعم SVG inlined في الأقسام المختلفة، والذي يوفر الوظيفة نفسها. 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"
          العرض = "100٪" ارتفاع = "100٪" معرف = "backgroundSVG">
             <-! محتوى SVG هنا ->
         </ SVG>
     </ BODY>
 </ HTML>

جميع نماذج التعليمات البرمجية في هذه الصفحة استخدم هذه الطريقة في رمز مصدر SVG في الأقسام المختلفة.

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-WOW التجريبية. ومع ذلك، فإن العروض أيضا استخدام ميزات أخرى YUI، خاصة في محمل و عقدة وحدات.

موحية SVG مع YUI

والعروض في SVG-نجاح باهر استخدام YUI لخلق قرع الطبول مرن ، تتحول الأشكال أو النص الدورية والأشكال على سبيل المثال. باستخدام YUI مع SVG مطلوب بضعة ملحقات YUI، وأنا سوف تصف هذه في لحظة واحدة فقط.

تناوب النص والأشكال تركيب الأشكال
مرونة قرع الطبول

والتالي يوضح كيفية YUI تأتي في متناول اليدين لتحريك ببساطة والتلاعب الرسومات SVG.

موحية SVG transform السمة

جميع عناصر SVG رسومية لديها transform السمة. هذه السمة يحدد 2D تحول أفيني على العناصر، والتي يمكن استخدامها لتوسيع نطاق، الانحراف، تدوير أو ترجمة.

وSVG-wow.org ملحقات YUI لSVG تسمح موحية transform سمة مثل هذا: 

 فار أنيم = جديد Y.Animate ({
     العقدة: '# circleA'،
     من: {
         تحويل: {تكساس: 0، TY: 0، SX: 2، سي: 2}
     }،
     إلى: {
         تحويل: {تكساس: 20، البحوث السابقة: 20، SX: 1، SY: 1}
     }،
     transformTemplate: "ترجمة (# تكساس، # TY) النطاق (# SX، # سي)"،
     المدة: 1
 })؛

رؤية الرسوم المتحركة تحويل الاختبارات.

فسوف نلاحظ أن يتم تعريف القيم التحويل من حيث "المكونات" (مثل tx أو ty ) والتي يتم الجمع بين لتشكيل قيمة باستخدام transformTemplate العثور على الرسوم المتحركة وجوه التكوين.

القالب هو آلية مرنة لبناء تحول القيم في حين مكونات منفصلة تجعل من السهل على حساب القيم المتحركة. هذا هو مثال نموذجي حيث الرسوم المتحركة YUI يسمح بمزيد من المرونة (وأكثر تعبيرا عن القوة) من عنصر SVG الرسوم المتحركة SMIL ( animateTransform ). من أجل خلق الرسوم المتحركة المذكورة أعلاه، كان يمكن أن يكون إعلان أي ما يعادل SMIL: 

 <circle ...>
     <animateTransform attributeName = "تحويل" نوع = "ترجم"
                       من "0،0" = إلى = الدر "20،20" = "1S" بدء = "scaleAnim.begin" />
     <animateTransform ID = "scaleAnim" attributeName = "تحويل" نوع = "النطاق"
                       من "2،2" = إلى = الدر "1،1" = "1S" بدء = "لأجل غير مسمى" />
 </ دائرة>

لاحظ كيف أن قصاصة أعلاه يتطلب عدة animateTransform العناصر التي يجب أن تكون متزامنة: و begin من تعيين السمة للرسوم المتحركة أول من scaleAnim.begin لمزامنة بداية الرسوم المتحركة اثنين. وهناك ميزة جميلة للمحرك الرسوم المتحركة YUI هي التي يمكن أن تشارك في توقيت للرسوم المتحركة (أي، منذ البداية، ونهاية المدة) لتطبيقها على خصائص عنصر متعددة.

ويستخدم تمديد YUI لموحية التحويلات SVG على نطاق واسع، كما هو الحال في كاميرا و الرسوم المتحركة كلمات أمثلة على ذلك. في السابق يستخدم امتدادا لYUI 3 في حين أن الأخيرة يستخدم امتدادا لYUI 2.

موحية الهندسة
الهندسة الأساسية

موحية الهندسة SVG مع YUI بسيط للغاية. وينعش المثال التالي 1 <rect> العنصر العرض والارتفاع وزاوية كعبرة: 

 فار أنيم = جديد Y.Animate ({
     العقدة: '# المستقيمات،
     من: {
         عرض: 200،
         الطول: 100،
         RX: 5،
         راي: 5
     }،
     إلى: {
         عرض: 300،
         الطول: 100،
         RX: 10،
         راي: 10؛
     }،
     المدة: 2،
     التسهيل: Y.Easing.elasticOut
 })؛

انظر شكل رسوم متحركة الاختبارات.

كما نوقش في وقت لاحق، إجراء بعض التغييرات تحت غطاء محرك السيارة YUI هذا العمل. لكن من وجهة نظر المطور، هذه الرسوم المتحركة يعمل بالطريقة بالضبط نفس الحركة من أي سمة HTML أو ممتلكات أخرى CSS.

و <path> الصورة d السمة

سمة واحدة هي هندسة قليلا خاصة: d السمة على <path> عنصر. و <path> يستخدم عنصر للهندسة معقدة بشكل تعسفي. و <path> يمكن وصف أي شكل. لها d سمة يصف الهندسة من حيث القطاعات التي يمكن أن تكون مسار الخطوط، والأقواس، من الدرجة الثانية أو مكعب بيزيير منحنيات (هناك أوامر قليلة، ولكنها جميعا الخريطة لبيزيير المنحنيات).

موحية d السمة مطلوب أيضا قليلا من التمديد للمحرك الرسوم المتحركة YUI، ولكن مع هذا التمديد، و d يمكن أن تكون متحركة سمة مثل أي دولة أخرى، كما هو مبين أدناه. 

 فار أنيم = جديد Y.Animate ({
     العقدة: "# pathA"،
     من: {د: "M 0 0 C 50 0 100 50 100 100 50 100 C 0 50 0 0 Z"}،
     إلى: {د: "M 0 0 100 0 C 100 0 100 100 0 100 0 100 C 0 0 Z"}،
     مدة 1S،
     التسهيل: Y.Easing.bounceBack
 })؛

راجع المسارات المتحركة الاختبارات، والذي يظهر، من بين أمور أخرى، علامة الاختيار تتحول إلى تقاطع مع مرور الوقت، ممثلة في الصور التالية.

و نقلت غاندي تجريبي يستخدم هذا الأسلوب من موحية d السمة على الأشكال تتحول إلى شخصية غاندي.

موحية سمات SVG الأخرى

بالطبع، لا تقتصر على الرسوم المتحركة YUI إلى سمات الهندسة. ويمكن تحريك أي سمة SVG. على سبيل المثال، ينعش الحركة التالية في دائرة نصف قطرها طمس على فلتر طمس الأفقي. 

 / / مقتطف SVG
 <مرشح ..
     <feGaussianBlur ID = "blurFilter" stdDeviation = "10 10" ...  />
 </ <مرشح

 / / جافا سكريبت للرسوم المتحركة
 فار أنيم = جديد Y.Animate ({
     العقدة: '# blurFilter'،
     من: {stdDeviation: [0، 20]}،
     إلى: {stdDeviation: [0، 0]}
 })؛

راجع تصفية الرسوم المتحركة الاختبارات. الصورة التالية تبين كيف تحرك يمكن استخدام التمويه الضبابي للانتقال بين الدول زر.

ويستخدم هذا النوع من تأثير في طمس تأثير سريع التجريبي، على الرغم من أن العرض لا تستخدم YUI الرسوم المتحركة ولكن التعريفي عناصر الحركة SMIL (على حساب تشغيل فقط في برامج التصفح التي تدعم ميزة، كما هو موضح في وقت سابق).

موحية خصائص CSS

مثل HTML، SVG عناصر لها سمات وخصائص CSS أيضا. SVG لديه بعض خصائص محددة المغلق . ويمكن لهذه الخصائص أن تكون متحركة، وأحيانا لإنشاء تأثيرات مثيرة للدهشة. على سبيل المثال، stroke-dashoffset يمكن استخدام خاصية لمحاكاة رسم الشكل. 

 / / مقتطف SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 stroke-dashoffset="300" 300" />

 / / جافا سكريبت
 فار أنيم = جديد Y.Animate ({
     العقدة: "# المستقيمات"،
     إلى: {'السكتة الدماغية، dashoffset': 0}،
     المدة: 0.25
 })؛

راجع السكتة الدماغية الرسوم المتحركة الاختبارات.

و graffitis التجريبي يستخدم هذه التقنية (حتى ولو بدون YUI الرسوم المتحركة)، وكذلك الحال بالنسبة لل كاميرا عرض (هذه المرة مع الرسوم المتحركة YUI).

YUI و SVG: تحت غطاء محرك السيارة

موقع على شبكة الإنترنت SVG-wow.org يستخدم كلا YUI 2 و 3 و YUI لديه SVG محددة ملحقات على حد سواء. في القسم التالي من هذا المقال يركز على تمديدات 3 YUI.

وهناك حاجة إلى ملحقات:

  • جعل YUI العمل مع خصوصيات DOM SVG في
  • مراعاة الفروق التنفيذ
  • إضافة دعم لأنواع سمة جديدة مثل SVG يحول
  • إضافة إضافية توقيت الرسوم المتحركة وميزات مزامنة

المحاسبة عن خصوصيات DOM SVG

كما هو موضح سابقا، ويمكن أن تكون متحركة سمات SVG مع عناصر التعريفي مثل <animate> . لدعم نموذج SVG الرسوم المتحركة، والقيم السمة SVG عقد كلا من الرسوم المتحركة، والقيمة الأساسية. على سبيل المثال، r السمة على <circle> العنصر هو SVGAnimatedLength تعرف على النحو التالي: 

 واجهة SVGAnimatedLength {
   ويعزو للقراءة فقط SVGLength baseVal؛
   ويعزو للقراءة فقط animVal SVGLength؛
 }؛

ونتيجة لذلك، حتى في التطبيقات التي لا تدعم الرسوم المتحركة التعريفي، ونحن بحاجة للوصول إلى أسفل إلى baseVal لقراءة قيمة سمة في: 

 فار دائرة = document.getElementById ('myCircle #')؛
 فار rValue = circle.getAttribute ('R') baseVal.value.

هناك حاجة لتمديد السماح للمحرك الرسوم المتحركة لحساب نموذج سمات SVG 'قيمة غير عادية. لحسن الحظ، YUI 3 لديه مفهوم السلوكيات الرسوم المتحركة. السلوكيات هي في جوهرها سمة محددة السنانير، وكان من السهل نسبيا لإضافة دعم للتعامل مع قيم السمة SVG. على سبيل المثال، SVGAnimatedLength يتم التعامل مع سمات مثل ذلك: 

 فار lengthBehavior = {
     المجموعة: وظيفة (أنيم، تى تى، من، إلى، انقضت، والمرح، والمدة) {
         / / المناولة محدد SVG
     }،

     الحصول على: وظيفة (أنيم، attr) {
         / / المناولة محدد SVG
     }
 }؛

 / / مقبض <circle> 'ريال السمة
 Y.Animate.behaviors.r = lengthBehavior؛

هناك المزيد من تمديدات لغيرها من القيم سمات SVG مثل transform السمة، سمة قيم اللون (مثل fill ، stroke أو stop-color ) وسمات مثل stdDeviation المذكورة سابقا.

وطلب من بضعة تعديلات مماثلة، على سبيل المثال في Y.Node.prototype.toString الأسلوب، ومرة أخرى لحساب SVG ل baseVal (هذه المرة على className الملكية عقدة). آخر مثال على ذلك هو واضع عقدة الافتراضي في Node وحدة.

المحاسبة عن الاختلافات المتصفح

في حين يطلب من التمديدات السابقة بسبب الخلافات بين مواصفات HTML و SVG، ويلزم ما يلي بسبب الاختلافات بين المتصفحات التنفيذ.

SVG لديه فئة خاصة من سمات دعا سمات العرض . في تطبيقات تدعم أيضا التصميم المغلق (والذي دعم جميع المتصفحات)، هذه الصفات هي في الواقع عرض مجرد وسيلة أخرى لتحديد خاصية CSS مع مستوى منخفض من التحديد . من مواصفات SVG:

سمات العرض وسيشارك بالتالي في سلسلة CSS2 كما لو كانت حلت محلها قواعد المناظرة النمط المغلق وضعت في بداية المؤلف ورقة الاسلوب مع خصوصية صفر. بشكل عام، وهذا يعني أن عرض تعزو لها أولوية أقل من غيرها من قواعد النمط المغلق المحددة في أوراق الأنماط مؤلف أو سمات "نمط".

للأسف، بعض المتصفحات لا تنفذ بشكل صحيح ومواصفات 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 ملامح DOM أو إضافة أساليب الراحة، وهناك حاجة عادة عند التعامل مع المحتوى:

  • firstElement/lastElement/prevElement/nextElement/removeAllChildren (غير محدد SVG)
  • getMatrix/setMatrix . وتوفر طريقة سهلة لمعالجة التحويلات على عناصر SVG، شيء بالغ الصعوبة مع DOM SVG القياسية
  • getBBox/getViewportBBox توفير طرق بسيطة للوصول إلى المحيط مربع في نظام إحداثيات العنصر أو في منفذ العرض الفضاء.
  • loadContent . ووصف الأداة المساعدة لإدراج جزء DOM باستخدام كائن جافا سكريبت الحرفي. على سبيل المثال: 
     myNode.loadContent ({
     علامة: 'ز'،
     شغل: 'أحمر'،
     السكتة الدماغية: 'لا شيء'،
     الأطفال: [{
         علامة: "المستطيل"،
         س: 10،
         ص: 10،
         عرض: 200،
         ارتفاع: 300
     }، {
         علامة: "دائرة"،
         ص: 10،
         CX: 105،
         قبرصي: 155
     }، {
         علامة: 'صورة'،
         'xlink: HREF': 'الصور / photo.png'،
         عرض: 200،
         الطول: '300px '
     }، prevSibling)؛

    هو اختزال لصنع مختلف المكالمات DOM (مثل createElementNS ، setAttributeNS و appendChild ) لإنشاء g عنصر والأطفال، وإدراجه قبل prevSibling تحت myNode . الأداة تتعامل مع مساحات للسمات والعناصر.

إضافات على محرك الرسوم المتحركة للتوقيت وتزامن

كثير، إن لم يكن معظم الآثار التي تنطوي على الرسوم المتحركة تتطلب عدة حالات للرسوم المتحركة فشلت. عادة، يطلب من الرسوم المتحركة عدة لخلق التأثير المطلوب، وبداية أو نهاية من الرسوم المتحركة تعتمد على بعضها البعض، وأحيانا مع الوقت عوض: الرسوم المتحركة يجب أن يتم متزامنة.

على سبيل المثال، إذا كان لديك مجموعة من الأشكال التي تحتاج إلى أن تتلاشى في واحدة تلو الأخرى، وسوف تحتاج لخلق الصور المتحركة تتلاشى لكل عنصر ومن ثم سلسلة وقتهم مع بداية طفيف تعويض. 

 فار بالسلاسل = Y.all ('دائرة بالسلاسل #')،
     firstAnim، previousAnim؛

 chained.each (وظيفة (دائرة) {
     فار أنيم = جديد Y.Animate ({
         العقدة: دائرة،
         من: {'ملء': 'أبيض'}،
         إلى: {'ملء': 'رمادي'}،
         المدة: 0.25
     })؛
     إذا كان (previousAnim! == غير معروف) {
         / / Synchrnoize بداية أنيم ليكون 0،15 ثانية بعد على بداية
         / / من الرسوم المتحركة الدائرة السابقة (previousAnim).
         previousAnim.onBegin (أنيم، 0.15)؛
     } آخر {
         firstAnim = أنيم؛
     }
     previousAnim = أنيم؛
 })؛

 / / بدء 1S الرسوم المتحركة الأولى بعد النقر على أي من الدوائر.
 / / لاحظ أن هذا هو امتداد لطريقة التشغيل الافتراضي YUI التي لا
 / / قد يستغرق وقتا تعويض.
 chained.on ('فوق'، وظيفة () {
     firstAnim.run (1)؛
 })؛

انظر وقت إزاحة الاختبارات.

طريقة onBegin يجعل من السهل على تزامن بدء اثنين من الرسوم المتحركة، مع وجود وقت اختياري تعويض. في الواقع، onBegin يمكن أيضا استدعاء وظيفة مع الوقت تعويض. وبالمثل، فإن onEnd تمديد يجعل من السهل ليتزامن مع نهاية للرسوم المتحركة.

افتراضيا، والرسوم المتحركة YUI يكون الأحداث التي توفر وسيلة لمزامنة. و onBegin و onEnd أساليب التعبير عن تزامن أكثر بإيجاز (ويرد مثال مشابه من الايجاز أدناه).

وبالإضافة إلى ذلك، فإنه من الضروري في وقت ما لمزامنة للرسوم المتحركة مع هذا الحدث، مرة أخرى مع الوقت تعويض. و beginOn و endOn ملحقات تسمح لنا للتعبير عن ذلك. على سبيل المثال: 

 anim.beginOn (Y.one ('# زر')، "فوق"، 0.5)؛

سيبدأ 0.5s الرسوم المتحركة بعد تم النقر على عنصر مع 'زر' معرف. هذه هي مختزلة من أجل: 

 Y.one ('# زر'). على ('فوق'، وظيفة () {
     setTimeout (500 / * MS * /، وظيفة () {anim.run ()؛})؛
 })؛

وكان التمديد النهائي التي أجريت على فئة الرسوم المتحركة والقدرة على اتخاذ كائن الرسوم المتحركة تطبيق إطار الدولة الأولى قبل بدأ فعلا. وهناك حاجة في كثير من الأحيان هذا عند إنشاء تأثيرات الحركة التي تنطوي على العديد من الرسوم المتحركة التي تبدأ في إزاحة زمنية مختلفة. 

 فار أنيم = جديد Y.Animate ({
     العقدة: Y.one ('# زر')،
     من: {ص: 30، "ملء التعتيم ': 0، اللون:" قرمزي "}،
     إلى: {ص: 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 و استدار إلى 3.2 لهذا الغرض من هذا بلوق. في 3.2، التحولات التي أدخلت الاستفادة من الأم التحولات المغلق إذا كان متوفرا في المتصفح. قد يكون من الممكن بالنسبة للمحرك الرسوم المتحركة YUI إلى نفوذ الحركة وبالمثل SMIL حيثما كان ذلك متاحا (أوبرا، فايرفوكس، وبكت في وقت كتابة هذه السطور) والتي ينبغي أن تسفر أيضا تحسينات في الأداء.

و التمديدات SVG على موقع على شبكة الإنترنت SVG-wow.org متاحة باعتبارها معرض YUI الوحدة (3) بالنسبة لأولئك الذين يرغبون في التمتع متعة للعمل مع YUI و SVG.

المراجع

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

2 تعليقات

  1. SVG نجاح باهر في الواقع!

    عظيم حتى كتابة، والأمثلة، ومتاحة للاستخدام ... رائع جدا!

    شكرا.

    تعليق بواسطة Oudyk ديلان - 19 أكتوبر 2010 #

  2. طيف آخر، والمادة مثيرة للاهتمام ....
    _________
    هيلين.

    تعليق من قبل مانشستر بناة - 19 يونيو 2011 #

آسف، يتم إغلاق شكل تعليق في هذا الوقت.

استضاف برنامج رائع

جميع الحقوق محفوظة © 2006-2012 ياهو! جميع الحقوق محفوظة. سياسة الخصوصية - شروط الخدمة

مدعوم من وورد في ياهو! استضافة المواقع .