اذهب إلى المحتوى

موجز الحركات


محمد بغات

لقد غطينا الكثير من التفاصيل في المقالات السابقة وأرجو أن يكون كل شيء واضحًا الآن.

عندما بدأت تعلم إنشاء الحركات في CSS، لم تكن مفاهيم التحريك والإطارات المفتاحية (keyframes) واضحة لي. إذا شعرتَ أنّ مفاهيم التحريك غير واضحة حتى الآن، فلا تقلق. استمر في الدراسة والتعلم والتجريب، وستتضح شيئًا فشيئًا حيل ومفاهيم التحريكات في HTML و CSS.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

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

تمرين: إشارات المرور

يُفترض أن يكون التمرين سهلًا. طبعًا على افتراض أنك تعرف كيف تحلّه. لقد أنشأت نسخة محدّثة من مثال إشارات المرور وفق نموذج المملكة المتحدة، إذ غيَّرت التسلسل هذه المرة لإزالة مرحلة "الأحمر + البرتقالي" ليوافق نظام إشارات المرور الأمريكية.

يمكنك الاطلاع عليه من هنا. لقد جعلت نظام الألوان يطابق شكل إشارات المرور الأمريكية.

موجز: الحركات

في هذا القسم، سنلقي نظرة على الخاصية animation، وكيف تعمل مع الإطارات المفتاحية (keyframes).

الخاصية transition

رغم أنَّ الخاصية animation تعمل بطريقة مشابهة للخاصية transition، إلا أنَّها تختلف عنها قليلًا. ففي حين أنّ الانتقال (transition) لن يحدث الا عند تغيُّر العنصر، فإنّ الحركات (animations) يمكن أن تبدأ مباشرةً.

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

افتراضيًا، تحدث الحركات من البداية إلى النهاية، ثم تقفز إلى حالتها الافتراضية. يمكننا تجميد الحركة في حالتها النهائية بإعطاء الخاصية animation-direction القيمةَ forwards.

تستخدم الحركات دوال التوقيت مثلها مثل الانتقالات. بيْد أنّ دوال التوقيت تنطبق على كل إطار رئيسي على حدة، وليس على كامل مجموعة الإطارات المفتاحية. يمكنك أيضًا تحديد قيمة animation-timing-function داخل الإطار المفتاحي لتتحكم بشكل أدق في الحركة.

أخيرًا، يمكن صياغة الحركات بشكل مختصر كما هو الحال مع الانتقالات:

animation: keyframe-name 2s forwards linear;

الإطارات المفتاحية

من الضروري أن تشير كل حركة إلى مجموعة من الإطارات المفتاحية (keyframes). هذه الإطارات هي عبارة عن سلسلة من النسب المئوية التي تصف كل "مرحلة" من مراحل الحركة. سيملأ المتصفح الفجوات تلقائيًا.

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

يمكن أن يؤدي سرد النسب المئوية بجانب بعضها بعضًا إلى "توقف" الحركة في تلك المرحلة.

أخيرًا، من الممكن حذف الإطار المفتاحي ‎0%، وسوف يفترض المتصفح حينها أنّ تنسيق العنصر هو الحالة الابتدائية. على سبيل المثال، لجعل عنصر ما يتلاشى (fade away)، لا يلزم بالضرورة أن تكون قيمة عتَامته (opacity) مساوية لـ 1 في البداية (على افتراض أنّ العنصر مرئي):

@keyframes name {
  100% {
    opacity: 0;
  }
}

تجميع الحركة

عندما نريد استخدام الحركة، سيكون لدينا دائمًا الجزءان التاليان:

.element {
  animation: keyframe-name ...
}
@keyframes keyframe-name {
  ...
}

تمرين

في هذه المرحلة، يجب أن تكون قادرًا على التفريق بين خاصيتي الحركة (animation) والانتقال (transition).

ألق نظرة على أمثلة Principles of Animation for the Web. كل تلك الأمثلة مصنوعة حصرًا باستخدام HTML و CSS، وذلك باستخدام إطارات الحركة المفتاحية. حاول أن تنسخها، وقُم بالتجريب والتعديل عليها.

المصادر

  • ترجمة وبتصرف للفصل animation recap من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...