إجراء الانتقال من After Effects إلى انتقالات CSS والإطارات الرئيسية

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

بمجرد أن تعمل تطبيقات الويب مثل التطبيقات الأصلية ، ستتغير تفاعلات التصميم أيضًا لمعالجة حالة الاستخدام - أي انتشار الرسوم المتحركة في كل مكان. تدفع الرسوم المتحركة التفاعلات في جميع تطبيقاتنا المفضلة ، من Uber إلى Lyft ومن Snapchat إلى Instagram.

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

ما هو After Effects؟

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

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

الأشياء التي يمكننا القيام بها مع After Effects

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

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

الأدوات التي تحتاجها للبدء

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

انتقالات CSS

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

 transition-property: background-color; transition-duration: 3s;

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

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

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

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

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

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

كما هو الحال مع انتقالات CSS ، هناك الكثير من الخيارات للمطورين لتكوينها. يمكننا أن نجعل الرسوم المتحركة تتكرر إلى أجل غير مسمى باستخدام animation-iteration-count ، مع قيمة infinite ، أو حتى التحكم في الاتجاه الذي تتدفق فيه الرسوم المتحركة ، باستخدام خاصية animation-direction . تمنحنا الكثير من خصائص الرسوم المتحركة CSS تحكمًا دقيقًا لمطابقة الرسوم المتحركة مع التصميم.

تُعد الرسوم المتحركة لـ CSS مفيدة للرسوم المتحركة المتكررة القصيرة ، مثل التوسيع والتدوير والارتداد.

باستخدام JavaScript

تحتوي JavaScript على العديد من الاستخدامات ، بدءًا من خوادم Raspberry Pi وحتى التعليمات البرمجية من جانب العميل ، ولكن يظل أحد الاستخدامات الأساسية لها هو تغيير أسماء الفئات على العناصر. يعد تغيير اسم الفئة طريقة تافهة لكنها فعالة لإدارة حالة العنصر.

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

يمكن نسخ الجزء الأول من هذه الرسوم المتحركة باستخدام مجموعة بسيطة من HTML و CSS و JavaScript.

لغة البرمجة:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

جافا سكريبت:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

عندما تنتهي المهلة ( 500ms ) ، تتم إضافة فئة active إلى الكرة div ، والتي تغير خاصية transform ، والتي تقوم بعد ذلك بتشغيل خاصية transition ، والتي تراقب خاصية transform على عنصر الكرة. لا يساعدنا تغيير فئات CSS باستخدام JavaScript في إدارة حالة المكون فحسب ، بل يمنحنا أيضًا مزيدًا من التحكم في الرسوم المتحركة التي تتجاوز الرسوم المتحركة والتحولات في CSS.

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

من الفكرة إلى After Effects إلى CSS و JavaScript

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

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

ضع في اعتبارك التحول في المقياس أعلاه حيث تنمو الكرة أو تتقلص قبل التحرك أو التوقف. هذه ميزة صغيرة ابتكرها المصمم في After Effects وتحتاج إلى إبلاغ المطور بوضوح حتى لا تفوت التفاصيل الدقيقة.

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

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

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

يعمل ملف الفيديو هذا الذي تم تصديره من After Effects كشكل من أشكال العقد بين المصمم والمطور. مع وجود فهم مشترك في مكانه الصحيح ، يمكننا استخدام الأدوات التي تمت مناقشتها لتنفيذه - وهي فئات CSS وأحداث JavaScript وانتقالات CSS والرسوم المتحركة CSS والرسوم المتحركة لـ JavaScript.

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

ابحث عن الأنماط ولاحظ التوقيت.

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

من المعلومات أعلاه ، نقسمها على النحو التالي:

1. قم بتهيئة المكون وانتظر المشغل.
2. بمجرد التشغيل ، قم بزيادة الحجم وتوسيع الظل المسقط.
3. بعد ذلك ، تحرك في دائرة مع ease-in-out .
4. ثم ، قم بتقليص الحجم وتقليل الظل المسقط.

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

2. التفاوض مع أصحاب المصلحة

هل يمكننا تبسيط بعض المناطق؟ أي أجزاء من الرسوم المتحركة ضرورية؟ هل يمكننا مزامنة التوقيت؟

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

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

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

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

3. التخطيط للهجوم

تعرف على حالة البداية والنهاية لكل عنصر. انظر إلى المكان الذي من المفترض أن يحدث فيه كل توقيت انتقالي. الاستفادة من BEM في فئات CSS لتطبيق الرسوم المتحركة بوضوح. افهم أسباب تقييد JavaScript لصالح CSS.

دعونا نفحص الرسوم المتحركة الموصوفة سابقًا. خمس ولايات تقفز علينا:

1. الحالة الأولية ، مع الكرة الحمراء وبعض الظل المسقط ؛
2. النسخة المصغرة من الكرة ذات الظل المسقط الأطول ؛
3. حركة الكرة حول دائرة.
4. تصغير الكرة مع الظل المسقط ؛
5. العودة إلى الحالة الأولية ، في انتظار أن يتم تشغيلها.

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

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

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

يعتبر BEM CSS مثاليًا لاستراتيجية التسمية الخاصة بنا نظرًا لكيفية تمثيل حالات الرسوم المتحركة قيد التقدم باستخدام المُعدِّلات. إذا كانت الرسوم المتحركة عامة بدرجة كافية ، فإن BEM هي أيضًا منهجية جيدة للحفاظ على فئات CSS DRY ("لا تكرر نفسك") التي تعمل عبر قواعد التعليمات البرمجية. سنبدأ فقط بعلامات الكتلة والعناصر ثم نضع طبقة في المعدلات أثناء تقدمنا ​​خلال الرسوم المتحركة.

فيما يلي نموذج لرحلة فصل دراسي:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

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

4. التنفيذ المطرد

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

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

الحالة الأولية

نبدأ بكرة حمراء بسيطة ، بظل قطرة طفيفة.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

زيادة

هناك جزأين للتوسيع: حجم العنصر وظله المسقط. نحن نستخدم إطارًا رئيسيًا ، يسمى scale ، يتم مشاركته من خلال كل من التحجيم لأعلى ولأسفل لـ DRY-ness للتعامل مع هذه الرسوم المتحركة.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

الدوران (بعد تطبيق رسوم متحركة متدرجة)

نستخدم إطارًا رئيسيًا ، يسمى circular ، وكذلك نقل خاصية transform-origin لتحريك العنصر في دائرة ، بدءًا من البداية. ضع في اعتبارك أن الدوران يحدث فقط عند اكتمال حركة التكبير.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

تصغير الحجم (بعد تطبيق حركات الدوران وتوسيع النطاق)

لتقليص الحجم ، نعيد استخدام مقياس الإطار الرئيسي ، مع animation-direction: reverse للقيام بعكس ما يفعله فصل التدرج. هذا يعيدنا إلى حالتنا الأصلية.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

عرض العمل

إذا قمنا بدمج كل هذه الفئات في تسلسل ، فسنحصل على تمثيل CSS للعرض الذي تم إجراؤه في After Effects.

اضغط على الكرة للبدء.

شاهد كرة القلم المتحركة بواسطة Chris Ng (chrisrng) على CodePen.

خاتمة

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

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

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