SVG لديها تفاعل مستخدم جيد ، مثل:
1. يمكن أن يستجيب SVG لمعظم أحداث DOM2.
2. يمكن لـ SVG التقاط حركة ماوس المستخدم جيدًا من خلال المؤشر.
3. يمكن للمستخدمين تحقيق التحجيم والتأثيرات الأخرى بسهولة عن طريق تحديد قيمة خاصية Zoomandpan لعنصر SVG.
4. يمكن للمستخدمين الجمع بسهولة بين الرسوم المتحركة والأحداث لإكمال بعض التأثيرات المعقدة.
من خلال ربط الأحداث بعناصر SVG ، يمكننا بسهولة إكمال بعض المهام التفاعلية باستخدام لغة البرمجة النصية. تدعم SVG معظم أحداث DOM2 ، مثل onfocusin ، onfocusou ، onclick ، onmousedown ، onmouseup ، onmousemove ، onMouseout ، onload ، onresize ، onscroll وغيرها من الأحداث. بالإضافة إلى ذلك ، يوفر SVG أيضًا أحداثًا فريدة متعلقة بالرسوم المتحركة ، مثل: Onroom ، Onbegin ، Bevenend ، Onrepeat ، إلخ.
الجميع على دراية بالحادث ، لذلك لن أتحدث عنه.
كيفية الرسوم المتحركةيستخدم SVG نصًا لتحديد الرسومات ، وهذه هيكل المستند مناسب جدًا لإنشاء الرسوم المتحركة. لتغيير الموضع وحجم ولون الشكل ، تحتاج فقط إلى ضبط الخصائص المقابلة. في الواقع ، لدى SVG خصائص مصممة خصيصًا لمعالجة الأحداث المختلفة ، والعديد منها حتى مصممة خصيصًا للرسوم المتحركة. في SVG ، هناك عدة طرق لتنفيذ الرسوم المتحركة:
1. استخدم عناصر الرسوم المتحركة لـ SVG. سيتم تسليط الضوء على هذا أدناه.
2. استخدم البرنامج النصي. يعد استخدام عمليات DOM للبدء والتحكم في الرسوم المتحركة بالفعل تقنية ناضجة ، وهناك مثال صغير أدناه.
3. SMIL (لغة تكامل الوسائط المتعددة المتزامنة). إذا كنت مهتمًا ، يرجى الرجوع إلى: http://www.w3.org/tr/2008/rec-smil3-20081201/.
تتضمن الأمثلة التالية العديد من الرسوم المتحركة الأساسية في SVG :<svgViewBox = "0 0 800 300"
xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1">
<SESC> عناصر الرسوم المتحركة الأساسية </desc>
<rect x = "1" y = "1"
fill = "none" stroke = "blue" width = "2" />
<!-الرسوم المتحركة لموضع المستطيل والحجم->
<rect id = "rectlement" x = "300" y = "100"
Fill = "RGB (255،255،0)">
<inimate attributeName = "X" AttributeType = "XML"
begin = "0S" dur = "9s" fill = "freeze" من = "300" إلى = "0" />
<inimate attributeName = "y" attributeype = "xml"
begin = "0S" dur = "9s" fill = "freeze" من = "100" إلى = "0" />
<inimate attributeName = "Width" Geneftipteype = "XML"
begin = "0S" dur = "9s" fill = "freeze" من = "300" إلى = "800" />
<inimate attributeName = "height" genditiveType = "XML"
begin = "0S" dur = "9s" fill = "freeze" من = "100" إلى = "300" />
</rect>
<!-قم بإنشاء مساحة جديدة لإحداثيات المستخدم ، لذلك يبدأ النص برصيد جديد (0،0) ، والتحولات اللاحقة مخصصة لنظام الإحداثيات الجديد->
<g transform = "Translate (100،100)">
<!- الاستخدامات التالية تم تعيينها لتحريك الرؤية ، ثم يستخدم animatemotion ،
تنفيذ Animate و AnimateTransform تنفيذ أنواع أخرى من الرسوم المتحركة ->
<text id = "textelement" x = "0" y = "0"
font-family = "verdana" font-size = "35.27" prosibility = "Hidden">
إنه حي!
<set attributeName = "الرؤية" AttributeType = "CSS" إلى = "مرئي"
begin = "3s" dur = "6s" fill = "freeze" />
<animatemotion path = "M 0 0 L 100 100"
begin = "3s" dur = "6s" fill = "freeze" />
<inimate attributeName = "Fill" GendRipteType = "CSS"
من = "RGB (0،0،255)" إلى = "RGB (128،0،0)"
begin = "3s" dur = "6s" fill = "freeze" />
<IrantItRansform attributeName = "Transform" GendIbteType = "XML"
اكتب = "تدوير" من = "-30" إلى = "0"
begin = "3s" dur = "6s" fill = "freeze" />
<IrantItRansform attributeName = "Transform" GendIbteType = "XML"
اكتب = "مقياس" من = "1" إلى = "3" إضافية = "sum"
begin = "3s" dur = "6s" fill = "freeze" />
</text>
</g>
</svg>
ضع هذا الرمز في جسم مستند HTML وقم بتشغيله لمعرفة تأثير الرسوم المتحركة.
الخصائص العامة لعناصر الرسوم المتحركة الفئة 1: حدد العناصر والسمات المستهدفةXLINK: HREF
يجب أن يكون هذا مألوفًا جدًا ، مشيرًا إلى العناصر التي تنفذ الرسوم المتحركة. يجب تعريف هذا العنصر في جزء مستند SVG الحالي. إذا لم يتم تحديد هذه السمة ، فسيتم تطبيق الرسوم المتحركة على العنصر الأم.
النسب = <previtbledame>
تحدد هذه الخاصية الخصائص لتطبيق الرسوم المتحركة. إذا كانت هذه الخاصية تحتوي على مساحة اسم (لا تنسى ، فإن SVG هي في الأساس مستند XML) ، فيجب إضافة مساحة الاسم هذه أيضًا. على سبيل المثال ، في المثال التالي ، يتم إعطاء Xlink الاسم المستعار المختلفة. هنا ، عندما يحدد Amanimate السمة ، يتم تضمين مساحة الاسم:
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"
Xmlns: xlink = "http://www.w3.org/1999/xlink">
<title> العرض التوضيحي لقرار مساحات الأسماء للرسوم المتحركة </title>
<g xmlns: a = "http://www.w3.org/1999/xlink">
<inimate attributeName = "A: HREF" Xlink: href = "#foo" dur = "2s" to = "two.png" fill = "freeze"/>
</g>
<g xmlns: b = "http://www.w3.org/1999/xlink"
<Image XML: id = "foo" b: href = "one.png" x = "35" y = "50"/>
</g>
</svg>
AttributeType = CSS | XML | السيارات (القيمة الافتراضية)
تحدد هذه الخاصية مساحة الاسم حيث يتم أخذ قيم الممتلكات. معاني هذه القيم هي كما يلي:
CSS: السمة المحددة نيابة عن الاسم النبيلة هي سمة CSS.
XML: السمة المحددة بواسطة AttributeName هي السمة ضمن مساحة الاسم الافتراضية لـ XML (لاحظ أن مستند SVG هو في الأساس مستند XML).
Auto: يعني أولاً البحث عن السمة المحددة بواسطة AttributeName في سمة CSS. إذا لم يتم العثور عليها ، فسيبحث عن السمة تحت مساحة اسم XML الافتراضية.
الفئة 2: التحكم في سمات وقت الرسوم المتحركةالخصائص التالية هي سمات وقت الرسوم المتحركة. يتحكمون في الجدول الزمني لتنفيذ الرسوم المتحركة ، بما في ذلك كيفية بدء وإنهاء الرسوم المتحركة ، سواء تم تنفيذ الرسوم المتحركة بشكل متكرر ، سواء كانت الرسوم المتحركة تنتهي ، إلخ.
ابدأ = قائمة القيمة
تحدد هذه الخاصية وقت بدء الرسوم المتحركة. يمكن أن تكون سلسلة من قيم الوقت مفصولة بواسطة انتقائية. يمكن أن تكون أيضًا بعض القيمة الأخرى التي تؤدي إلى بداية الرسوم المتحركة. على سبيل المثال ، الأحداث ، مفاتيح الاختصار ، إلخ.
دور = قيمة الساعة | وسائل الإعلام | غير محدد
يحدد مدة الرسوم المتحركة. يمكن ضبطها على قيمة معروضة بتنسيق الساعة. يمكن أيضًا ضبطه على القيمتين التاليتين:
الوسائط: تحدد أن وقت الرسوم المتحركة هو مدة عنصر الوسائط المتعددة الداخلية.
غير محدد: حدد وقت الرسوم المتحركة ليكون لا حصر له.
يشير تنسيق الساعة إلى تنسيقات القيمة القانونية التالية:
: 30: 03 = 2 ساعة و 30 دقيقة و 3 ثوانٍ
: 00: 10.25 = 50 ساعة ، 10 ثوان و 250 مليون ثانية
: 33 = 2 دقيقة و 33 ثانية
: 10.5 = 10.5 ثانية = 10 ثوان و 500 مليون ثانية
.2H = 3.2 ساعة = 3 ساعات و 12 دقيقة
دقيقة = 45 دقيقة
S = 30 ثانية
MS = 5 ملايين ثانية
.467 = 12 ثانية و 467 ملايين ثانية
.5S = 500 مليون ثانية
: 00.005 = 5 ملايين ثانية
نهاية = قائمة القيمة النهائية
يحدد وقت نهاية الرسوم المتحركة. يمكن أن تكون سلسلة من القيم مفصولة من النسيكيين.
دقيقة = قيمة الساعة | وسائط
أقصى = قيمة الساعة | وسائط
يحدد القيمة القصوى والحد الأدنى لمدة الرسوم المتحركة.
إعادة التشغيل = دائما | عندما لا نوتش | أبداً
قم بإعداد الرسوم المتحركة للبدء من جديد في أي وقت. يعني دائمًا أن الرسوم المتحركة يمكن أن تبدأ في أي وقت. عندما يعني عدم النشاط أنه لا يمكنك البدء إلا عندما لا يكون هناك تشغيل ، مثل انتهاء التشغيل السابق. لا تعني أبدًا أن الرسوم المتحركة لا يمكن أن تبدأ مرة أخرى.
REPERCOUNT = قيمة رقمية | غير محدد
اضبط عدد المرات التي يتكرر فيها الرسوم المتحركة. إلى أجل غير مسمى يرمز إلى التكرار اللانهائي.
REPERDUR = قيمة الساعة | غير محدد
يحدد إجمالي وقت الرسوم المتحركة المتكررة. إلى أجل غير مسمى يرمز إلى التكرار اللانهائي.
ملء = تجميد | إزالة (افتراضي)
يحدد حالة العنصر بعد الانتهاء من الرسوم المتحركة. تجميد يعني أن العنصر يبقى في الحالة الأخيرة من الرسوم المتحركة بعد انتهاء الرسوم المتحركة. تعني إزالة أن العنصر يعود إلى الحالة قبل الرسوم المتحركة بعد نهاية الرسوم المتحركة ، وهي القيمة الافتراضية.
الفئة 3: تحديد سمات قيم الرسوم المتحركة
تحدد هذه الخصائص قيمة الخصائص التي يتم تنفيذها. في الواقع ، بعض الخوارزميات التي تحدد إطارات المفاتيح والاستيفاء.
calcmode = منفصل | خطي (افتراضي) | يسير بخطى | خدد
تحديد طريقة الاستيفاء الرسوم المتحركة: منفصل: منفصل ، لا استيفاء ؛ خطي: الاستيفاء الخطي ؛ خطوة: الاستيفاء حجم الخطوة. Spline: spline الاستيفاء. يكون الافتراضي خطيًا (الاستيفاء الخطي) ، ولكن إذا كانت السمة لا تدعم الاستيفاء الخطي ، فسيتم استخدام الاستيفاء المنفصل.
القيم = <list>
يحدد قائمة القيم لإطارات المفاتيح الرسوم المتحركة مفصولة بواسطة فاصلة منقوطة. دعم قيمة المتجه.
keytimes = <list>
يحدد قائمة الوقت بإطارات مفاتيح الرسوم المتحركة مفصولة بواسطة Semicolons. هذا يتوافق مع القيم واحدة تلو الأخرى. تتأثر هذه القيمة بخوارزمية الاستيفاء. إذا كان هذا الاستيفاء الخطي والخطية ، فيجب أن تكون القيمة الأولى لأوقات المفاتيح 0 ويجب أن تكون القيمة الأخيرة 1. من أجل عدم التفتيش المنفصل ، يجب أن تكون القيمة الأولى لأوقات المفاتيح 0. بالنسبة إلى الاستيفاء في حجم الخطوة ، فمن الواضح أن أوقات المفاتيح غير مطلوبة. وإذا تم تعيين مدة الرسوم المتحركة على غير محدد ، يتم تجاهل أوقات المفاتيح.
keysplines = <list>
تحدد هذه الخاصية نقطة التحكم عند الاستيفاء الشريطي (الاستيفاء Betzel) ، ومن الواضح أنه يعمل فقط إذا تم تحديد وضع الاستيفاء على أنه spline. تتراوح القيم في هذه القائمة من 0 إلى 1.
من = <value>
إلى = <value>
بواسطة = <value>
يحدد قيم البدء والنهاية والخطوة لسمة الرسوم المتحركة. ملاحظة هنا: إذا كانت القيم قد صاغت بالفعل القيم ذات الصلة ، فسيتم تجاهل أي من/إلى/حسب القيمة.
الفئة 4: التحكم في ما إذا كانت الرسوم المتحركة سمة تدريجيةفي بعض الأحيان ، من المفيد للغاية تعيين القيمة ذات الصلة بدلاً من القيمة المطلقة ، ولكن القيمة الإضافية ، باستخدام الخاصية الإضافية يمكن أن يحقق هذا الهدف.
Additive = استبدال (القيمة الافتراضية) | مجموع
تتحكم هذه الخاصية في ما إذا كانت الرسوم المتحركة تدريجية. SUM يعني أن الرسوم المتحركة سيكون لها قيمة سمة أكبر ذات الصلة أو غيرها من الرسوم المتحركة ذات الأولوية المنخفضة. استبدال القيمة الافتراضية ، مما يشير إلى أن الرسوم المتحركة ستكتب فوق قيمة السمة ذات الصلة أو غيرها من الرسوم المتحركة ذات الأولوية المنخفضة. انظر مثال صغير:
<rect ...>
<inimate attributeName = "width" من = "0px" إلى = "10px" dur = "10s"
Additive = "sum"/>
</rect>
يوضح هذا المثال تأثير الرسوم المتحركة لزيادة عرض المستطيل.
في بعض الأحيان ، يكون من المفيد جدًا أيضًا إذا تم فرض نتائج الرسوم المتحركة المتكررة ، ويمكن استخدام خاصية تراكم هذا الهدف.
تراكم = لا شيء (افتراضي) | مجموع
تتحكم هذه الخاصية في ما إذا كان تأثير الرسوم المتحركة تراكمية. لا شيء هو القيمة الافتراضية ، مما يشير إلى أن الرسوم المتحركة المكررة لا تتراكم. المبلغ يعني أن تأثيرات الرسوم المتحركة المتكررة تتراكم. بالنسبة للرسوم المتحركة الفردية ، ليس لها معنى. انظر مثال صغير:
<rect ...>
<inimate attributeName = "width" من = "0px" إلى = "10px" dur = "10s"
إضافي = "SUM" تراكم = "sum" REPERCOUNT = "5"/>
</rect>
يوضح هذا المثال أن طول المستطيل يزداد في كل تكرار.
ملخص عناصر الرسوم المتحركةيوفر SVG عناصر الرسوم المتحركة التالية:
1. عنصر تحريكهذا هو عنصر الرسوم المتحركة الأساسي ، والذي يمكن أن يوفر مباشرة قيم النقاط الزمنية المختلفة للسمات ذات الصلة.
2. تعيين العنصرهذا هو اختصار العنصر المتحرك ويدعم جميع أنواع السمات ، خاصةً عند السمات المناسبة (مثل الرؤية). العنصر المحدد غير متجانس ، والسمات ذات الصلة غير صالحة. يجب أن يتوافق نوع القيمة النهائية المحددة للرسوم المتحركة مع نوع قيمة السمة.
3. عنصر animatemotionلو جين عناصر الرسوم المتحركة. معظم خصائص هذا العنصر هي نفسها كما هو مذكور ، مع اختلافات مختلفة قليلاً فقط:
calcmode = منفصل | خطي | يسير بخطى | خدد
القيمة الافتراضية لهذه الخاصية مختلفة ، والقيمة الافتراضية في هذا العنصر يسير بخطى.
PATH = <PATH-DATA>
إن مسار نقل عنصر الرسوم المتحركة هو نفس تنسيق قيمة سمة عنصر المسار D.
keypoints = <list of numbers>
قيمة هذه الخاصية هي سلسلة من قيم النقاط العائمة التي تقدمها Semicolons ، ونطاق القيمة لكل قيمة هو 0 ~ 1. تمثل هذه القيم المسافة التي يتم فيها نقل النقطة الزمنية المقابلة المحددة بواسطة سمة أوقات المفاتيح. يتم تحديد المسافة المحددة هنا بواسطة المتصفح نفسه.
تدوير = <number> | السيارات | عكس تلقائي
تحدد هذه الخاصية الزاوية التي يدور فيها العنصر عندما يتحرك. القيمة الافتراضية هي 0 ، والرقم يمثل زاوية الدوران ، ويمثل تلقائي الجسم الحيواني يدور في اتجاه قوة الطريق. يشير الإرجاع التلقائي إلى الاتجاه الذي يكون فيه التوجيه مقابل اتجاه الحركة.
بالإضافة إلى ذلك ، تتكون قيم عنصر animatemotion من ، إلى ، إلى ، من الأزواج الإحداثي ؛ يتم فصل قيمة x وقيمة y عن طريق الفواصل أو المسافات ، ويتم فصل كل زوج من الإحداثيات بواسطة فاصلة فاصلة ، مثل = 33 ، 15 ، مما يعني أن إحداثيات نقطة البداية X هي 33 والإحداثي y هو 15.
هناك طريقتان لتحديد مسار الحركة: الأول هو تعيين قيمة مباشرة إلى سمة المسار ، والآخر هو تحديد مسار لاستخدام عنصر mpath كعنصر طفل في AnimateMotionde. إذا كنت تستخدم كلتا الطريقتين ، فإن عنصر MPATH له أولوية عالية. كلتا الطريقتين لها أولوية أعلى من القيم ، من ، إلى ، إلى.
انظر مثال صغير:
<؟ xml version = "1.0" standalone = "no"؟>
<! doctype svg public "-// w3c // dtd svg 1.1 // en"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<svgViewBox = "0 0 500 300"
xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1"
Xmlns: xlink = "http://www.w3.org/1999/xlink">
<rect x = "1" y = "1"
fill = "none" stroke = "blue" width = "2" />
<path id = "path1" d = "M100،250 C 100،50 400،50 400،250"
fill = "none" Stroke = "Blue" Width = "7.06"/>
<circle cx = "100" cy = "250" r = "17.64" fill = "Blue"/>
<circle cx = "250" cy = "100" r = "17.64" fill = "Blue"/>
<circle cx = "400" cy = "250" r = "17.64" fill = "Blue"/>
<path d = "M-25 ، -12.5 L25 ، -12.5 L 0 ، -87.5 Z"
Fill = "Yellow" Stroke = "Red" Width = "7.06">
<animatemotion dur = "6s" REPERTCOUNT = "غير محدد" rotate = "Auto">
<mpath xlink: href = "#path1"/>
</animatemotion>
</path>
</svg>
4. عنصر AnimateColorعناصر الرسوم المتحركة الملونة. هذا عنصر قديم ، ويمكن استبدال جميع الوظائف في الأساس بالحيوية ، لذلك لا تستخدمه.
5. عنصر AnimateTransformتحويل عناصر الرسوم المتحركة. ألقِ نظرة على بعض الخصائص الخاصة:
اكتب = ترجمة | مقياس | تدوير | Skewx | منحرفة
تحدد هذه الخاصية نوع التحول ، والترجمة هي القيمة الافتراضية.
القيم من ، بواسطة وإلى أن تتوافق مع معلمات التحول ، والتي تتوافق مع التحول المذكور أعلاه. القيم هي مجموعة من القيم المنقوشة المنقوطة.
العناصر والخصائص التي تدعم تأثيرات الرسوم المتحركة
أساسا جميع العناصر الرسومية (المسار ، المستقيم ، القطع الناقص ، النص ، الصورة ...) وعناصر الحاويات (SVG ، G ، DEFS ، الاستخدام ، التبديل ، clippath ، قناع ...) دعم الرسوم المتحركة. أساسا معظم الخصائص تدعم تأثيرات الرسوم المتحركة. للحصول على تعليمات مفصلة ، يرجى الرجوع إلى الوثائق الرسمية.
تنفيذ الرسوم المتحركة باستخدام DOMيمكن أيضًا إكمال الرسوم المتحركة SVG باستخدام البرامج النصية. سيتم تقديم المحتوى التفصيلي لـ DOM لاحقًا. هنا مثال موجز:
<؟ xml version = "1.0" standalone = "no"؟>
<! doctype svg public "-// w3c // dtd svg 1.1 // en"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<svg viewbox = "0 0 400 200"
xmlns = "http://www.w3.org/2000/svg"
onload = "startAnimation (evt)" version = "1.1">
<script type = "application/ecmascript"> <! [CDATA [
var timevalue = 0 ؛
var timer_increment = 50 ؛
var max_time = 5000 ؛
var text_element ؛
وظيفة startAnimation (evt) {
text_element = evt.target.ownerDocument.getElementById ("textelement") ؛
showandgrowelement () ؛
}
وظيفة showandgrowelement () {
TimeValue = timevalue + timer_increment ؛
if (timevalue> max_time)
يعود؛
// قم بتوسيع نطاق سلسلة النص تدريجياً حتى يصبح أكبر 20 مرة
ScaleFactor = (TimeValue * 20.) / max_time ؛
text_element.setAttribute ("Transform" ، "Scale (" + ScaleFactor + ")") ؛
// اجعل السلسلة أكثر غامضة
OpacityFactor = timevalue/max_time ؛
text_element.setAttribute ("opacity" ، opacityFactor) ؛
// call showandgrowelement مرة أخرى <timer_increment> الملايين في وقت لاحق.
setTimeout ("showandgrowelement ()" ، timer_increment)
}
window.showandgrowelement = showandgrowelement
]]> </script>
<rect x = "1" y = "1"
fill = "none" stroke = "Blue" Width = "2"/>
<g transform = "Translate (50،150)" fill = "red" font-size = "7">
<text id = "textelement"> svg </extry>
</g>
</svg>
المرجع العملي:فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
مركز التطوير: https://developer.mozilla.org/en/svg
المرجع الشعبي: http://www.chinasvg.com/
المستند الرسمي: http://www.w3.org/tr/svg11/
SVG تقنية الرسوم المتحركة: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx