كيفية إنشاء SVG الرسوم المتحركة باستخدام CSS
يمكن أن يتم تنشيط SVG من خلال عناصر أصلية مثل
يمكن أن يكون CSS Animation أيضًا طريقة بديلة لاستخدام مكتبة JavaScript مثل SnapSVG. في هذا المنشور ، سنرى ما يمكننا تقديمه باستخدام CSS Animation في SVG.
1. إنشاء الأشكال
بادئ ذي بدء ، سنحتاج إلى رسم الأشكال والكائنات التي نريد تحريكها. يمكنك استخدام تطبيقات مثل رسم, أدوبي المصور, أو إنكسكيب لإنشاء واحد.
على سبيل المثال ، قمت برسم سماء ملبدة بالغيوم كخلفية ، وسفينة صواريخ تطلق صعودًا ، شملت النيران:
بمجرد الانتهاء من الرسم ، نحتاج إلى تصدير كل كائن أنشأناه إلى SVG.
سأستخدم Sketch كمثال لهذه الخطوة. حدد الكائن الذي تريد تحويله إلى تنسيق SVG. في أسفل يمين نافذتك ، انقر فوق جعل للتصدير. اختر تنسيق SVG ، ثم انقر فوق تصدير object-name. تحتاج إلى القيام بهذا الكائن واحد في وقت واحد.
2. أدخل SVG في HTML
عندما تفتح ملف SVG في محرر الأكواد ، ستجد أن رموز SVG غير واضحة إلى حد كبير. وبالتالي ، قبل نشر ملف SVG ، دعونا ننظم الكود ونحسنه باستخدام أداة سطر الأوامر هذه المسماة SVGO.
إطلاق طرفية أو موجه الأمر, وتثبيت SVGO مع سطر الأوامر هذا:
[sudo] npm install -g svgo
ضبط الأمر, svgo, على ملف SVG باستخدام --جميلة لإنتاج رمز SVG قابل للقراءة:
svgo rocket.svg - تفسير
إذا كان لديك عدة ملفات SVG في دليل ، فيمكنك تحسينها جميعًا معًا ، مرة واحدة. بافتراض أن الدليل يدعى / صور, ثم من الدليل الأصل استخدم هذا الأمر:
svgo -f الصور - جميل
دعونا نرى الفرق قبل وبعد استخدام SVGO.
انسخ الرمز داخل ملف SVG والصقه في ملف HTML. سنعمل على مساحة عمل تبلغ 800 بكسل × 600 بكسل ، لذلك دعونا لا ننسى تحديد عرض على عنصر SVG.
يتم تعيين SVG في ملف HTML. سنحتاج إلى تحديد معرف لكل كائن ، حتى نتمكن من تحديده في CSS لاحقًا.
في هذا البرنامج التعليمي ، نحتاج إلى تحديد هوية الصاروخ واللهب ، وبعض السحب. لكي تتمكن الكائنات من التعامل مع مرحلة الرسوم المتحركة لاحقًا ، نحتاج إلى الإضافة هوية شخصية - تستطيع ايضا استخذام صف دراسي - لكل كائن. في هذه المرحلة ، سيبدو الرمز كما يلي:
3. تحريك باستخدام CSS
الآن دعنا نستمتع ببعض المرح. وتتمثل الخطة في تعزيز الصاروخ في الفضاء. الصاروخ منقسم إلى مجموعتين. الصاروخ نفسه واللهب.
بادئ ذي بدء ، نحن نضع الصاروخ في منتصف مساحة العمل ، على النحو التالي:
#rocket convert: translate (260 بكسل ، 200 بكسل) ؛
ما تراه هو هذا:
الآن لجعل الصاروخ يبدو وكأنه يتجه للأعلى ، نحتاج إلى خلق وهم السحب المتساقطة. CSS التي نستخدمها لهذا:
# cloud1 animation: fall 1s linear لانهائي؛ @ keyframes fall from convert: translateY (-100px)؛ إلى convert: translateY (1000px)
لجعلها تبدو أكثر واقعية ، دعونا الرسوم المتحركة أربعة السحب ، وجعلها “خريف” بسرعات مختلفة. سنضعهم أيضًا بشكل مختلف عن المحور السيني.
السحابة الثانية سيكون لها كود مثل هذا:
# cloud2 animation: fall-2 2s linear لانهائي؛ @ keyframes fall-2 from convert: translate (200px، -100px)؛ إلى convert: translate (200px، 1000px)
لاحظ أننا قمنا بنقل السحابة # 2 قليلاً إلى اليمين ، من خلال 200px مع ترجمه. في هذه المرحلة ، يجب أن تبدو النتيجة هكذا.
بعد ذلك ، دعونا نجعل الصاروخ ينبض بالحياة. سنخصص إطارًا رئيسيًا للرسوم المتحركة ، على النحو التالي:
#rocket animation: المنبثقة 1s سهولة لانهائية؛ keyframes popup 0٪ convert: translate (260 بكسل ، 200 بكسل) ؛ 50٪ convert: translate (260px، 240px)؛ 100٪ convert: translate (260px، 200px)؛
وإضافة الرسوم المتحركة إلى لهب الصواريخ كذلك:
#flame animation: shake .2s linear لانهائي؛ @ keyframes shake 0٪ convert: translate (55px، 135px) rotate (7deg)؛ 20٪ convert: translate (55px، 135px) rotate (0deg)؛ 40٪ convert: translate (55px، 135px) rotate (-7deg)؛ 60٪ convert: translate (55px، 135px) rotate (0deg)؛ 100٪ convert: translate (55px، 135px) rotate (0deg)؛
حق! الآن وبعد أن تم تعيين جميع الرموز لدينا ، يجب أن تعمل الرسوم المتحركة على SVG لدينا.
ألقِ نظرة على صاروخنا الذي ينفجر في الفضاء.
الفكر النهائي
الرسوم المتحركة ليست أسهل ميزة في CSS لفهمها. ولكن نأمل أن تجد هذا البرنامج التعليمي كنقطة انطلاق جيدة لاستكشاف CSS Animation على SVG بشكل أكبر ؛ ستندهش من معرفة ما يمكن تحقيقه باستخدام CSS Animation في متناول اليد.
إذا كنت تريد أن تبدأ بالأساسيات ذاتها ، فيمكنك البدء من خلال هذا المنشور: A Look Into: Scalable Vector Graphics (SVG) Animation أو متابعة بقية سلسلة SVG.
- عرض تجريبي
- تحميل المصدر
