نظرة على الرسوم المتحركة القابلة للتحجيم (SVG) الرسوم المتحركة
اليوم سنواصل مناقشتنا على الرسم المتجه القابل للتطوير (SVG), وهذه المرة سوف نعمل مع SVG الرسوم المتحركة. لا تخافوا ، فإن SVG Animation سهل نسبيًا وفي الواقع سنبدأ في هذا المنشور من الأساسيات.
التنفيذ الأساسي
الرسوم المتحركة في SVG يمكن القيام به من خلال
كما ترون من مقتطف الشفرة أعلاه ، نضيف
اسم السمة: تحدد هذه السمة سمة العنصر التي ستتأثر في الرسوم المتحركة.
من عند: هذه السمة اختيارية ، يمكننا تحديد قيمة محددة أو تركها للسماح لها بالبدء من حيث كانت.
إلى: تحدد هذه السمة اتجاه الحركة. اعتمادا على القيمة المحددة في اسم السمة, قد تختلف النتائج. ولكن في هذا المثال سوف يمتد ارتفاع.
الدر: تحدد هذه السمة مدة الرسوم المتحركة. يتم التعبير عن قيمة هذه السمة في بناء جملة Clock Value. فمثلا, 02:33 يمثل 2 دقيقة و 33 ثانية ، في حين 3H تساوي 3 ساعات ، لكننا لسنا بحاجة إلى هذا الوقت الطويل ، لذا حددنا المدة لمدة 3S أو 3 ثواني ؛
الشيء نفسه ينطبق على ص).
- تنفيذ التجريبي الأساسي
الانتقال العنصر
في نقل عناصر SVG ، نحتاج فقط إلى استهداف إحداثيات العنصر س و ذ.
في المثال أعلاه ، ننقل المستطيل من 0 إلى 200 في 3 ثوان ، سوف يظهر المستطيل يتحرك أفقياً من اليسار إلى اليمين. أيضًا ، إذا نظرت بعناية أضفنا سمة أخرى إلى ملء.
ملء السمة هنا لا علاقة لها بلون الخلفية كما هو الحال في عناصر SVG الأخرى. تحدد هذه السمة كيف ستعمل الرسوم المتحركة بعد انتهاء المدة. في هذا المثال نحن تجمد العنصر المتأثر لذلك يبقى حيث تنتهي الرسوم المتحركة.
وهو يعمل أيضا على غرار CX أو قبرصي, مثل ذلك:
- نقل العنصر التجريبي
تحريك سمات متعددة
حتى الآن ، نحن نستهدف سمة واحدة فقط لتكون متحركة ، لكن من الممكن أيضًا تحريك أكثر من سمة واحدة في وقت واحد. يوضح المثال التالي كيف نفعل ذلك:
كما ترى ، إنها تعمل بطريقة مماثلة ، الآن فقط لدينا اثنين
- سمات متعددة التجريبي
اتباع المسار
في نشرتنا السابقة على العمل مع النص في SVG, لقد أظهرنا لك كيفية تدفق النص إلى المسار. من الممكن أيضًا أن تفعل الشيء نفسه في SVG الرسوم المتحركة, يمكننا تحريك عنصر لاتباع المسار. هنا مثال.
يتم تعريف المسار بشكل أفضل داخل هوية شخصية مع
هذا كل شيء ، دعونا الآن نرى ذلك في الواقع ؛
- تتبع المسار التجريبي
التحولات
يمكننا أيضا استخدام التحول مثل مقياس, ترجمه و استدارة للرسوم المتحركة ، وللقيام بذلك سوف نستخدم
تشترك التحويلات في SVG في مبادئ مماثلة مع CSS3 ، وقد تناولناها بشكل شامل تمامًا في منشورنا السابق حول CSS3 2D Transformation.
- التحول التجريبي
افكار اخيرة
بناءً على كفاءتك في SVG Animation ، يمكنك إنشاء شيء مثل هذا.
تتمثل إحدى مزايا استخدام SVG Animation على Flash Animation في أنه لا يعتمد على المكونات الإضافية لجهة خارجية في العمل كما أنه أسرع بكثير من Flash. بعد أن أوقفت Adobe دعمها الفلاش في نظام أندرويد ، قد ترغب في البدء في تجربة هذا النهج لخدمة الرسوم المتحركة في موقع الويب الخاص بك المقبل.
مزيد من المراجع
- SVG تحريك الوثائق
- تقنيات الرسوم المتحركة SVG المتقدمة
- عرض تجريبي
- تحميل المصدر
