الرسوم المتحركة CSS

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

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

ما هي الرسوم المتحركة؟

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

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

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

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

أنواع الرسوم المتحركة

هناك أنواع مختلفة من الرسوم المتحركة:

الرسوم المتحركة أو الرسوم المتحركة التقليدية

يتكون هذا النمط من إعطاء الحركة للبطل إطارًا تلو الآخر. في البداية ، عندما لم يكن هناك ما يكفي من الوسائل السمعية والبصرية ، تم تنفيذها من خلال الرسم والتلوين لكل إطار (بما في ذلك الخلفية أو المسرح أو الخلفية للرسوم المتحركة) ، ليتم تصويرها لاحقًا على ما نعرفه على أنه شريط فيلم.

وقف الحركة

Stop Motion هي تقنية رسوم متحركة لا علاقة لها بالرسوم المتحركة. علاوة على ذلك ، فإن هدفه الرئيسي هو محاكاة حركات الأشياء التي هي في الواقع ثابتة تمامًا وتنقسم إلى مرحلتين: الرسوم المتحركة للطين أو الطين وتحريك الأجسام الصلبة.

البيكسل

Pixelation هي تقنية تأتي من Stop Motion وتتكون من العمل مع أشياء ليست دمى أو نماذج ، ولكنها أشياء شائعة أو أشخاص. يتم تصوير الأشياء عدة مرات وتتحول قليلاً مع كل إطار.

تنظير روتيني

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

الرسوم المتحركة عن طريق القواطع أو الرسوم المتحركة المقطوعة

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

الرسوم المتحركة 3D

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

يوجد حاليًا أيضًا تقنيات أخرى مثل: الرسم على الزجاج ، الرسوم المتحركة للرمل ، شاشة الغوجاس والرسم على السليلويد. 

ما هو CSS؟

الآن بعد أن عرفت المزيد عن عالم الرسوم المتحركة ، حان الوقت لنقدم لك عالم مختصرات CSS.

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

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

ما هو CSS؟

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

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

تحريك في CSS

حسنًا ، الآن بعد أن عرفت القليل عن عالم الرسوم المتحركة و CSS. حان الوقت لبدء البرنامج التعليمي.

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

كل من هذه الرسوم المتحركة لها سلسلة من المزايا:

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

إعدادات الرسوم المتحركة

لبدء رسم متحرك ، سيتعين علينا أولاً تكوينه. للقيام بذلك ، سوف نذهب إلى الممتلكات الرسوم المتحركة وخصائصه الفرعية. ستسمح لنا هذه الأداة بتهيئة كل من إيقاع ومدة الرسوم المتحركة ولا حتى تسلسلها.

الخصائص الفرعية هي:

الرسوم المتحركة - تأخير

وقت التأخير بين لحظة تحميل العنصر وبداية تسلسل الرسوم المتحركة.

الرسوم المتحركة - الاتجاه

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

مدة الرسوم المتحركة

يشير إلى مقدار الوقت الذي يستغرقه الرسم المتحرك لإكمال دورته (المدة)

الرسوم المتحركة - التكرار - العد

عدد مرات تكراره. يمكننا أن نشير لا نهاية لتكرار الرسوم المتحركة إلى أجل غير مسمى.

الرسوم المتحركة - الاسم

يتم استخدامه لتحديد الاسم الذي يصف كل إطار من إطارات الرسوم المتحركة.

الرسوم المتحركة - اللعب - الحالة

يتيح لك إمكانية إيقاف تسلسل الرسوم المتحركة مؤقتًا واستئنافه.

الرسوم المتحركة - التوقيت - الوظيفة

يشير إلى إيقاع الرسوم المتحركة ، أي كيفية عرض إطارات الرسوم المتحركة ، ولهذا يتم إنشاء منحنيات التسريع.

الرسوم المتحركة - ملء - الوضع

يحدد القيم التي ستكون للخصائص بعد انتهاء الرسم المتحرك.

قم بإعداد التسلسل مع الإطارات

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

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

للإشارة إلى الوقت والإيقاعيستخدم الإطار نسبة مئوية و من وإلىبفضل هذا ، يمكننا تحديد وقت البداية بنسبة 0٪ والنهاية بنسبة 100٪.

الرسوم المتحركة للإطار والنص

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

75٪ خط - الحجم: 300٪ ؛ مارجن - يسار: 25٪ ؛ العرض: 150٪؛

باستخدام هذا الرمز ، نقترح للمتصفح أنه في 75٪ من التسلسل ، يكون للرأس هامش أيسر بنسبة 25٪ وحجم 200٪ وعرض 150٪.

تكرار الرسوم المتحركة

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

اختتام

كما رأيت ، في CSS يمكنك إنشاء مشاريع متحركة ويمكنك إدخالها باتباع الخطوات التي قدمناها لك. إذا واصلت الاستفسار وأبلغت نفسك ، فسوف تكتشف أن هناك العديد من الخيارات المتاحة لنا.

هل تجرأت بالفعل؟