التحريك في css حرب النجوم (Star War)

سنطبق ما تعلّمناه في المقالات السابقة، وسنصنع تحريكًا متجِهيًّا (SVG) مرحًا. سنبني عنوان فيلم حرب النجوم من إعلان "The Force Awakens".

يجمع هذا المثال بين التحريك وبين بعض خاصيات CSS الأخرى، خصوصًا الخاصية transform ودوال تحويلها scale و translate و rotate.

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

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

transform: ليست من خاصيات الحركات

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

الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎

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

في هذا المثال، سنستخدم scale و translateZ معًا لخلق شعور بأنّ الكلمات تطير في الفضاء. بعد ذلك، سنستخدم rotateY لتدوير أحرف سطر الوصف. سيتطلب الدوران حول المحور Y قيام المتصفح بالرسم ثلاثي الأبعاد.

SVG و HTML و CSS

استعدادًا لهذا المثال، قمت بإنشاء ملفين من النوع SVG لأجل الجزئين Star و Wars من الشعار. لا تتردد في تحميلهما واستخدامهما.

إليك شيفرة HTML الخاصة بالمثال:

<div class="starwars-demo">
  <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
  <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

لقد استخدمنا صورة ثابتة للنجوم في الخلفية. لم أتمكن من العثور على الخط الذي استُخدِم في الإعلان الأصلي، لذلك استخدمت الخط "Lato". استخدمت التموضع المطلق (absolute positioning) لوضع المحتوى في منتصف الشاشة. سنحصل في البداية على الصورة التالية:

تحريك الكلمتين Star و Wars

نريد أن يظهر النص الكبير تدريجيًا، إذ يبدأ بحجم كبير، ثمَّ يصغر بمرور الوقت. وهذه فرصة جيدة لاستخدام الدالة scale()‎. سنستخدمها على الكلمة "Star" في الإطارات المفتاحية التالية:

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);

  20% {
    opacity: 1;

  89% {
    opacity: 1;
    transform: scale(1);

  100% {
    opacity: 0;
    transform: translateZ(-1000em);

}

هناك خاصيتان تتغيران خلال مسار هذه الحركة وهما opacity و transform. إنّ تغيير العتامة (opacity) يجعل النص يبدأ شفافًا، ثم يتلاشى في النهاية لكي نتمكن من إعادة تنفيذ التحريك.

يبدأ التحويل عن طريق تحديد الحجم عند القيمة 1.5. هذا يعني أنّ الحجم الأولي للنص سيكون أكبر بنسبة 150٪ من الحجم العادي. عند النقطة 89٪، سنعيّن الخاصية transform عند القيمة scale(1)‎. هذا يعني أنه بين اللحظتين 0٪ و 89٪، سينتقل الحجم من 150٪ إلى 100٪.

التحويل transformZ الأخير يؤدي إلى تكبير الكلمتين بسرعة.

بشكل مماثل، يمكننا تطبيق الإطارات المفتاحية على الكلمة "Star":

.star {
  animation: star 10s ease-out infinite;
}

تم استخدام مجموعة مماثلة من الإطارات المفتاحية مع الكلمة "Wars".

لنجعلها ثلاثية الأبعاد

يتطلب استخدام التحويلات ثلاثية الأبعاد في CSS، سواء كانت بالتحويل على المحور Z، أو الدوران حول المحورين Y و Z، أن نضع مرحلة ثلاثية الأبعاد. وهذا يعني، في اصطلاح HTML، إنشاء حاوية (container)، وإخبار المتصفح بالحاجة إلى إنشاء بعض التحريكات ثلاثية الأبعاد.

يمكننا فعل ذلك عن طريق إضافة الشيفرة التالية إلى العنصر div ذي الصنف ‎.starwars-demo:

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

تخبر هاتان الخاصيتان المتصفحَ بأنّ أبناء الحاوية (container`s children) ينبغي أن يتموضعوا وفق شكل ثلاثي الأبعاد، بدلًا من وضعهم في مستوى مسطح. يمكنك أن تجد المزيد من التفاصيل عن هذه الخاصية في موقع CSS Tricks.

ثانياً، تخبر الخاصية persective المتصفحَ بمدى «عمق» المشهد. في هذا المثال، جعلناها تساوي 800px. تخلق القيم الأصغر تأثيرات «متطرفة» لأنّ المشهد سيكون أقصر.

سننسق الآن سطر الوصف.

تحريك الشعار "The Force Awakens"

تدور أحرف الشعار "The Force Awakens" في مكانها. يمكننا خلق هذا التأثير باستخدام التحويل rotateY. في هذا المثال، قمنا بوضع كل حرف داخل عنصر من النوع span حتى نتمكن من تطبيق التحريك على كل حرف على حدة.

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

سنُطبِّق التحريك على كل حرف على حدة.

أولًا، الإطارات المفتاحية:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);

  30% {
    opacity: 1;

  70%, 86% {
    transform: rotateY(0);
    opacity: 1;

  95%, 100% {
    opacity: 0;

}

في البداية، تكون الحروف مُدوّرة بزاوية 90 درجة، ثم بزاوية 70٪ خلال التحريك، إذ يتم تحريكها لمواجهة المشاهد.

يمكننا تطبيق مجموعة الإطارات المفتاحية هذه على كل عناصر span على النحو التالي:

.byline span {
  animation: spin-letters 10s linear infinite;
}

والنتيجة هي أنّ كل عناصر span التي تحتوي الحروف سوف تظهر تدريجيًا وتدور ببطء في مكانها، قبل أن تتلاشى في نهاية التحريك.

بجمع كل ذلك معًا، سنحصل على المشهد التالي:

تمرين

إذا كان لديك الوقت، أشجعك على إلقاء نظرة على قسم CSS في نسخة CodePen.

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

المصادر

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

اقرأ أيضًا

• المقالة التالية: إظهار المحتوى عند التمرير
• المقالة السابقة: رواية القصص عبر الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS