تصور هذا: تنضم إلى مشروع جديد، وتغوص في قاعدة التعليمات البرمجية، وفي غضون الساعات القليلة الأولى، تكتشف شيئًا مألوفًا بشكل محبط. منتشرة في جميع أنحاء أوراق الأنماط، تجد تعريفات @keyframes متعددة لنفس الرسوم المتحركة الأساسية. ثلاثة تأثيرات تلاشي مختلفة، واثنين أو ثلاثة أشكال مختلفة للشرائح، وحفنة من الرسوم المتحركة للتكبير/التصغير، واثنين على الأقل من الرسوم المتحركة الدورانية المختلفة، حسنًا، لماذا لا؟ @نبض الإطارات الرئيسية { من { المقياس: 1؛ } إلى { المقياس: 1.1؛ } }
@keyframes نبض أكبر { 0%، 20%، 100% { المقياس: 1؛ } 10%، 40% { المقياس: 1.2؛ } }
إذا كان هذا السيناريو يبدو مألوفا، فأنت لست وحدك. من خلال خبرتي في العديد من المشاريع، فإن إحدى المكاسب السريعة الأكثر اتساقًا التي يمكنني تحقيقها هي دمج الإطارات الرئيسية وتوحيدها. لقد أصبح هذا النمط موثوقًا به لدرجة أنني أتطلع الآن إلى عملية التنظيف هذه كواحدة من أولى مهامي على أي قاعدة تعليمات برمجية جديدة. المنطق وراء الفوضى هذا التكرار منطقي تمامًا عندما تفكر فيه. نحن جميعًا نستخدم نفس الرسوم المتحركة الأساسية في عملنا اليومي: التلاشي، والشرائح، والتكبير/التصغير، والتدوير، وغيرها من التأثيرات الشائعة. هذه الرسوم المتحركة واضحة جدًا، ومن السهل إعداد تعريف @keyframes سريع لإنجاز المهمة. بدون نظام رسوم متحركة مركزي، يقوم المطورون بشكل طبيعي بكتابة هذه الإطارات الرئيسية من الصفر، غير مدركين أن الرسوم المتحركة المماثلة موجودة بالفعل في مكان آخر في قاعدة التعليمات البرمجية. يعد هذا أمرًا شائعًا بشكل خاص عند العمل في البنى القائمة على المكونات (وهو ما يفعله معظمنا هذه الأيام)، حيث تعمل الفرق غالبًا بالتوازي عبر أجزاء مختلفة من التطبيق. النتيجة؟ فوضى الرسوم المتحركة. المشكلة الصغيرة المشكلات الأكثر وضوحًا في تكرار الإطارات الرئيسية هي إضاعة وقت التطوير وتضخم التعليمات البرمجية غير الضروري. تعني تعريفات الإطارات الرئيسية المتعددة أماكن متعددة للتحديث عند تغيير المتطلبات. هل تحتاج إلى ضبط توقيت الرسوم المتحركة الخاصة بك؟ ستحتاج إلى تعقب كل مثيل عبر قاعدة التعليمات البرمجية الخاصة بك. هل ترغب في توحيد وظائف التخفيف؟ حظا سعيدا في العثور على جميع الاختلافات. إن مضاعفة نقاط الصيانة هذه تجعل حتى تحديثات الرسوم المتحركة البسيطة مهمة تستغرق وقتًا طويلاً. المشكلة الأكبر يؤدي تكرار الإطارات الرئيسية إلى خلق مشكلة أكثر خطورة كامنة تحت السطح: فخ النطاق العالمي. حتى عند العمل مع البنى القائمة على المكونات، يتم تعريف الإطارات الرئيسية لـ CSS دائمًا في النطاق العالمي. وهذا يعني أن جميع الإطارات الرئيسية تنطبق على جميع المكونات. دائماً. نعم، لا تستخدم الرسوم المتحركة الخاصة بك بالضرورة الإطارات الرئيسية التي حددتها في المكون الخاص بك. يستخدم الإطارات الرئيسية الأخيرة التي تطابق نفس الاسم الذي تم تحميله في النطاق العام. طالما أن جميع إطاراتك الرئيسية متطابقة، فقد يبدو هذا بمثابة مشكلة بسيطة. ولكن في اللحظة التي تريد فيها تخصيص رسم متحرك لحالة استخدام معينة، فأنت في مشكلة، أو ما هو أسوأ من ذلك، ستكون أنت من يسببها. إما أن الرسوم المتحركة الخاصة بك لن تعمل بسبب تحميل مكون آخر بعد مكونك، أو الكتابة فوق إطاراتك الرئيسية، أو أن تحميلات المكونات الخاصة بك تتأخر عن غير قصد وتغيير سلوك الرسوم المتحركة لكل مكون آخر يستخدم اسم الإطار الرئيسي، وقد لا تدرك ذلك حتى. إليك مثال بسيط يوضح المشكلة: .مكون واحد { /* أنماط المكونات */ الرسوم المتحركة: نبض 1 ثانية سهل الدخول والخروج، بديل لا نهائي؛ }
/* تعريف @keyframes هذا لن يعمل */ @نبض الإطارات الرئيسية { من { المقياس: 1؛ } إلى { المقياس: 1.1؛ } }
/* لاحقًا في الكود...*/
المكون الثاني { /* أنماط المكونات */ الرسوم المتحركة: نبض 1 ثانية لسهولة الدخول والخروج إلى ما لا نهاية؛ }
/* سيتم تطبيق هذه الإطارات الرئيسية على كلا المكونين */ @نبض الإطارات الرئيسية { 0%، 20%، 100% { المقياس: 1؛ } 10%، 40% { المقياس: 1.2؛ } }
يستخدم كلا المكونين نفس اسم الحركة، لكن تعريف @keyframes الثاني يحل محل التعريف الأول. الآن سيستخدم كل من المكون الأول والمكون الثاني الإطارات الرئيسية الثانية، بغض النظر عن المكون الذي يحدد الإطارات الرئيسية. راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 1 [متشعب] بواسطة أميت شين. أسوأ جزء؟ يعمل هذا غالبًا بشكل مثالي في التطوير المحلي ولكنه ينقطع بشكل غامض في الإنتاج عندما تغير عمليات الإنشاء ترتيب تحميل أوراق الأنماط الخاصة بك. وينتهي بك الأمر برسوم متحركة تتصرف بشكل مختلف اعتمادًا على المكونات التي تم تحميلها وبأي تسلسل. الحل: الإطارات الرئيسية الموحدة الجواب على هذه الفوضى بسيط بشكل مدهش: الإطارات الرئيسية الديناميكية المحددة مسبقًا والمخزنة في ورقة أنماط مشتركة. بدلاً من السماح لكل مكون بتحديد الرسوم المتحركة الخاصة به، نقوم بإنشاء إطارات رئيسية مركزية موثقة جيدًا وسهلةللاستخدام، وقابلة للصيانة، ومصممة خصيصًا لتلبية الاحتياجات المحددة لمشروعك. فكر في الأمر كرموز للإطارات الرئيسية. تمامًا كما نستخدم الرموز المميزة للألوان والمسافات، ويستخدم الكثير منا بالفعل الرموز المميزة لخصائص الرسوم المتحركة، مثل وظائف المدة والتخفيف، فلماذا لا نستخدم الرموز المميزة للإطارات الرئيسية أيضًا؟ يمكن أن يتكامل هذا النهج بشكل طبيعي مع أي سير عمل حالي للتصميم المميز الذي تستخدمه، مع حل المشكلة الصغيرة (تكرار التعليمات البرمجية) والمشكلة الأكبر (تعارضات النطاق العالمي) دفعة واحدة. الفكرة واضحة ومباشرة: إنشاء مصدر واحد للحقيقة لجميع الرسوم المتحركة المشتركة لدينا. تحتوي ورقة الأنماط المشتركة هذه على إطارات رئيسية مصممة بعناية تغطي أنماط الرسوم المتحركة التي يستخدمها مشروعنا بالفعل. لا مزيد من التخمين ما إذا كانت الرسوم المتحركة المتلاشية موجودة بالفعل في مكان ما في قاعدة التعليمات البرمجية الخاصة بنا. لا مزيد من الكتابة فوق الرسوم المتحركة عن طريق الخطأ من المكونات الأخرى. ولكن هذا هو المفتاح: هذه ليست مجرد رسوم متحركة ثابتة للنسخ واللصق. لقد تم تصميمها لتكون ديناميكية وقابلة للتخصيص من خلال خصائص CSS المخصصة، مما يسمح لنا بالحفاظ على الاتساق مع الاستمرار في التمتع بالمرونة لتكييف الرسوم المتحركة مع حالات استخدام محددة، كما لو كنت بحاجة إلى رسوم متحركة "نبضية" أكبر قليلاً في مكان واحد. بناء أول رمز الإطارات المفتاحية واحدة من أولى الثمار الدانية التي يجب أن نتعامل معها هي الرسوم المتحركة "التلاشي". في أحد مشاريعي الأخيرة، وجدت أكثر من عشرة تعريفات منفصلة للتلاشي، ونعم، جميعها ببساطة تحرك العتامة من 0 إلى 1. لذلك، دعونا ننشئ ورقة أنماط جديدة، ونسميها kf-tokens.css، ونستوردها في مشروعنا، ونضع إطاراتنا الرئيسية مع التعليقات المناسبة بداخلها. /* الإطارات المفتاحية-tokens.css */
/* * Fade In - رسم متحرك للمدخل يتلاشى * الاستخدام: الرسوم المتحركة: kf-fade-in 0.3s easy-out؛ */ @keyframes kf-fade-in { من { العتامة: 0؛ } إلى { العتامة: 1؛ } }
يستبدل إعلان @keyframes المنفرد كل تلك الرسوم المتحركة المتناثرة عبر قاعدة التعليمات البرمجية الخاصة بنا. نظيفة وبسيطة وقابلة للتطبيق عالميًا. والآن بعد أن تم تعريف هذا الرمز المميز، يمكننا استخدامه من أي مكون خلال مشروعنا: .مشروط { الرسوم المتحركة: kf-fade-in 0.3s سهولة الخروج؛ }
.تلميح الأداة { الرسوم المتحركة: kf-fade-in 0.2s سهولة الدخول والخروج؛ }
إشعار { الرسوم المتحركة: kf-fade-in خلال 0.5 ثانية؛ }
شاهد رموز الإطارات المفتاحية للقلم - العرض التوضيحي 2 [متشعب] بواسطة أميت شين. ملحوظة: نحن نستخدم البادئة kf- في جميع أسماء @keyframes. تعمل هذه البادئة كمساحة اسم تمنع تعارض الأسماء مع الرسوم المتحركة الموجودة في المشروع وتوضح على الفور أن هذه الإطارات الرئيسية تأتي من ملف الرموز المميزة للإطارات الرئيسية. صنع شريحة ديناميكية تعمل الإطارات الرئيسية kf-fade-in بشكل رائع لأنها بسيطة ولا يوجد مجال كبير لإفساد الأمور. ومع ذلك، في الرسوم المتحركة الأخرى، نحتاج إلى أن نكون أكثر ديناميكية، وهنا يمكننا الاستفادة من القوة الهائلة لخصائص CSS المخصصة. هذا هو المكان الذي تتألق فيه الرموز المميزة للإطارات الرئيسية مقارنةً بالرسوم المتحركة الثابتة المتناثرة. لنأخذ سيناريو شائعًا: الرسوم المتحركة "الشريحة". ولكن الانزلاق من أين؟ 100 بكسل من اليمين؟ 50% من اليسار؟ هل يجب الدخول من أعلى الشاشة؟ أو ربما تطفو من الأسفل؟ هناك العديد من الاحتمالات، ولكن بدلاً من إنشاء إطارات رئيسية منفصلة لكل اتجاه وكل شكل، يمكننا إنشاء رمز مميز واحد مرن يتكيف مع جميع السيناريوهات: /* * الشريحة للداخل - الرسوم المتحركة للشرائح الاتجاهية * استخدم --kf-slide-from للتحكم في الاتجاه * الافتراضي: الشرائح من اليسار (-100%) * الاستخدام: * الرسوم المتحركة: kf-slide-in 0.3s سهولة الخروج؛ * --kf-slide-from: -100px 0; // حرك من اليسار * --kf-slide-from: 100px 0; // الشريحة من اليمين * --kf-slide-from: 0 -50px; // الشريحة من الأعلى */
@keyframes kf-الانزلاق للداخل { من { ترجمة: var(--kf-slide-from, -100% 0); } إلى { ترجمة: 0 0؛ } }
يمكننا الآن استخدام رمز @keyframes المميز لأي اتجاه شريحة ببساطة عن طريق تغيير الخاصية المخصصة --kf-slide-from : الشريط الجانبي { الرسوم المتحركة: kf-slide-in 0.3s سهولة الخروج؛ /* يستخدم القيمة الافتراضية: الشرائح من اليسار */ }
إشعار { الرسوم المتحركة: kf-slide-in 0.4s سهولة الخروج؛ --kf-slide-from: 0 -50px; /*السحب من الأعلى*/ }
.مشروط { الرسوم المتحركة: كف-تتلاشى في 0.5 ثانية، kf-slide-in 0.5s cube-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* حرك من أسفل إلى اليمين */ }
يمنحنا هذا النهج مرونة لا تصدق مع الحفاظ على الاتساق. إعلان إطار رئيسي واحد، إمكانيات لا حصر لها. راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 3 [متشعب] بواسطة أميت شين. وإذا أردنا أن نجعل الرسوم المتحركة لدينا أكثر مرونة، مع السماح بتأثيرات "الانزلاق للخارج" أيضًا، فيمكننا ذلكما عليك سوى إضافة خاصية --kf-slide-to المخصصة، على غرار ما سنراه في القسم التالي. إطارات مفتاحية للتكبير ثنائي الاتجاه الرسوم المتحركة الشائعة الأخرى التي يتم تكرارها عبر المشاريع هي تأثيرات "التكبير/التصغير". سواء أكان ذلك تكبيرًا دقيقًا للرسائل المحمصة، أو تكبيرًا دراماتيكيًا للنماذج، أو تأثيرًا لطيفًا للتصغير للعناوين، فإن الرسوم المتحركة للتكبير/التصغير موجودة في كل مكان. بدلًا من إنشاء إطارات رئيسية منفصلة لكل قيمة مقياس، دعنا نبني مجموعة مرنة واحدة من الإطارات الرئيسية kf-zoom:
/* * تكبير - حجم الرسوم المتحركة * استخدم --kf-zoom-from و --kf-zoom-to للتحكم في قيم المقياس * الافتراضي: التكبير/التصغير من 80% إلى 100% (0.8 إلى 1) * الاستخدام: * الرسوم المتحركة: kf-zoom 0.2s سهولة الخروج؛ * --kf-zoom-from: 0.5; --kf-التكبير إلى: 1; // تكبير من 50% إلى 100% * --kf-zoom-from: 1; --kf-التكبير إلى: 0; // التكبير من 100% إلى 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // تكبير من 100% إلى 110% */
@keyframes kf-التكبير { من { المقياس: فار(--kf-zoom-from, 0.8); } إلى { المقياس: فار(--kf-zoom-to, 1); } }
من خلال تعريف واحد، يمكننا تحقيق أي اختلاف في التكبير/التصغير نحتاج إليه: نخب { الرسوم المتحركة: kf-الانزلاق في 0.2 ثانية، kf-zoom 0.4s سهولة الخروج؛ --kf-slide-from: 0 100%; /*السحب من الأعلى*/ /* يستخدم التكبير/التصغير الافتراضي: يتراوح المقياس من 80% إلى 100% */ }
.مشروط { الرسوم المتحركة: kf-zoom 0.3s cube-bezier(0.34, 1.56, 0.64, 1); --kf-التكبير من: 0; /* تكبير دراماتيكي من 0% إلى 100% */ }
العنوان { الرسوم المتحركة: kf-fade-in 2s, سهولة الوصول إلى kf-zoom 2s؛ --kf-zoom-from: 1.2; --kf-التكبير إلى: 0.8; /* تصغير الحجم بلطف */ }
يعمل الإعداد الافتراضي 0.8 (80%) بشكل مثالي مع معظم عناصر واجهة المستخدم، مثل رسائل الخبز المحمص والبطاقات، مع سهولة التخصيص للحالات الخاصة. راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 4 [متشعب] بواسطة أميت شين. ربما لاحظت شيئًا مثيرًا للاهتمام في الأمثلة الأخيرة: لقد قمنا بدمج الرسوم المتحركة. إحدى المزايا الرئيسية للعمل مع الرموز المميزة @keyframes هي أنها مصممة للتكامل بسلاسة مع بعضها البعض. هذه التركيبة الناعمة مقصودة وليست عرضية. سنناقش تكوين الرسوم المتحركة بمزيد من التفاصيل لاحقًا، بما في ذلك أين يمكن أن تصبح مشكلة، ولكن معظم المجموعات واضحة وسهلة التنفيذ. ملاحظة: أثناء كتابة هذا المقال، وربما بسبب كتابته، وجدت نفسي أعيد التفكير في فكرة الرسوم المتحركة للدخول بأكملها. مع كل التطورات الحديثة في CSS، هل ما زلنا بحاجة إليها على الإطلاق؟ ولحسن الحظ، طرح آدم أرجيل نفس الأسئلة وعبّر عنها ببراعة في مدونته. هذا لا يتعارض مع ما هو مكتوب هنا، لكنه يقدم نهجا يستحق النظر فيه، خاصة إذا كانت مشاريعك تعتمد بشكل كبير على الرسوم المتحركة للدخول. الرسوم المتحركة المستمرة في حين أن الرسوم المتحركة للدخول، مثل "التلاشي" و"الشريحة" و"التكبير/التصغير" تحدث مرة واحدة ثم تتوقف، فإن الرسوم المتحركة المستمرة تتكرر إلى أجل غير مسمى لجذب الانتباه أو الإشارة إلى النشاط المستمر. الرسوم المتحركة المستمرة الأكثر شيوعًا التي أواجهها هي "التدوير" (لتحميل المؤشرات) و"النبض" (لتسليط الضوء على العناصر المهمة). تمثل هذه الرسوم المتحركة تحديات فريدة عندما يتعلق الأمر بإنشاء الرموز المميزة للإطارات الرئيسية. على عكس الرسوم المتحركة للدخول التي تنتقل عادةً من حالة إلى أخرى، يجب أن تكون الرسوم المتحركة المستمرة قابلة للتخصيص بدرجة كبيرة في أنماط سلوكها. دكتور سبين يبدو أن كل مشروع يستخدم رسومًا متحركة متعددة. بعضها يدور في اتجاه عقارب الساعة، والبعض الآخر عكس اتجاه عقارب الساعة. يقوم البعض بدوران واحد بزاوية 360 درجة، والبعض الآخر يقوم بدورات متعددة للحصول على تأثير أسرع. بدلاً من إنشاء إطارات رئيسية منفصلة لكل شكل، دعنا نبني دورة واحدة مرنة تتعامل مع جميع السيناريوهات:
/* * تدور - الرسوم المتحركة التناوب * استخدم --kf-spin-from و --kf-spin-to للتحكم في نطاق الدوران * استخدم --kf-spin-turns للتحكم في مقدار الدوران * الافتراضي: يدور من 0 درجة إلى 360 درجة (دورة واحدة كاملة) * الاستخدام: * الرسوم المتحركة: kf-spin 1s الخطي اللانهائي؛ * --kf-spin-turns: 2; // دورتان كاملتان * --kf-spin-from: 0deg; --kf-spin-to: 180 درجة؛ // نصف الدوران * --kf-spin-from: 0deg; --kf-spin-to: -360 درجة؛ // عكس اتجاه عقارب الساعة */
@keyframes kf-spin { من { تدوير: فار(--kf-spin-from, 0deg); } إلى { التدوير: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
الآن يمكننا إنشاء أي شكل من أشكال الدوران الذي نحبه:
.التحميل الدوار { الرسوم المتحركة: kf-spin 1s خطية لا نهائية؛ /* الاستخدام الافتراضي: يدور من 0 درجة إلى 360 درجة */ }
.محمل سريع { الرسوم المتحركة: بديل لا نهائي لسهولة الدخول والخروج kf-spin 1.2s؛ --kf-spin-turns: 3; /* 3 دورات كاملة لكل اتجاه في كل دورة*/ }
.خطوة عكسية { الرسوم المتحركة: خطوات kf-spin 1.5s (8) لا نهائية؛ --kf-spin-to: -360 درجة؛ /* عكس اتجاه عقارب الساعة */ }
.تذبذب دقيق { الرسوم المتحركة: بديل لا نهائي لسهولة الدخول والخروج من kf-spin 2؛ --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* تذبذب 36 درجة: بين -18 درجة و+18 درجة */ }
شاهد رموز الإطارات المفتاحية للقلم - العرض التوضيحي 5 [متشعب] بواسطة أميت شين. يكمن جمال هذا الأسلوب في أن نفس الإطارات الرئيسية تعمل على تحميل الدوارات والأيقونات الدوارة وتأثيرات الاهتزاز وحتى الرسوم المتحركة المعقدة متعددة الدورات. مفارقة النبض تعد الرسوم المتحركة النبضية أكثر تعقيدًا لأنها يمكن أن "تنبض" بخصائص مختلفة. بعضها ينبض بالمقياس، والبعض الآخر ينبض العتامة، وبعض خصائص اللون النبضية مثل السطوع أو التشبع. بدلاً من إنشاء إطارات رئيسية منفصلة لكل خاصية، يمكننا إنشاء إطارات رئيسية تعمل مع أي خاصية CSS. فيما يلي مثال للإطار الرئيسي النبضي مع خيارات الحجم والعتامة:
/* * نبض - نبض الرسوم المتحركة * استخدم --kf-pulse-scale-from و --kf-pulse-scale-to للتحكم في نطاق المقياس * استخدم --kf-pulse-opacity-from و --kf-pulse-opacity-to للتحكم في نطاق العتامة * الافتراضي: لا يوجد نبض (جميع القيم 1) * الاستخدام: * الرسوم المتحركة: بديل لا نهائي لسهولة الدخول والخروج من kf-Pulse 2s؛ * --kf-pulse-scale-from: 0.95; --kf-مقياس النبض إلى: 1.05; // مقياس النبض * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // نبض العتامة */
@keyframes kf-نبض { من { المقياس: فار(--kf-pulse-scale-from, 1); العتامة: var(--kf-pulse-opacity-from, 1); } إلى { المقياس: فار(--kf-pulse-scale-to, 1); العتامة: var(--kf-pulse-opacity-to, 1); } }
يؤدي هذا إلى إنشاء نبضة مرنة يمكنها تحريك خصائص متعددة: .دعوة للعمل { الرسوم المتحركة: kf-pulse 0.6s البديل اللانهائي؛ --kf-pulse-opacity-from: 0.5; /* نبض العتامة */ }
.نقطة الإخطار { الرسوم المتحركة: kf-pulse 0.6s بديل لا نهائي لسهولة الدخول والخروج؛ --kf-مقياس النبض-من: 0.9; --kf-pulse-scale-to: 1.1; /* مقياس النبض */ }
.تسليط الضوء على النص { الرسوم المتحركة: kf-pulse 1.5s سهولة الخروج اللانهائية؛ --kf-مقياس النبض-من: 0.8; --kf-pulse-opacity-from: 0.2; /* نبض الحجم والعتامة */ }
شاهد رموز الإطارات المفتاحية للقلم - العرض التوضيحي 6 [متشعب] بواسطة أميت شين. يمكن للإطار الرئيسي ذو kf-pulse الفردي التعامل مع كل شيء بدءًا من العناصر التي تجذب الانتباه بشكل دقيق وحتى النقاط البارزة الدرامية، كل ذلك مع سهولة التخصيص. التيسير المتقدم أحد الأشياء الرائعة في استخدام الرموز المميزة للإطارات الرئيسية هو مدى سهولة توسيع مكتبة الرسوم المتحركة الخاصة بنا وتوفير التأثيرات التي لن يهتم معظم المطورين بكتابتها من الصفر، مثل المرونة أو الارتداد. فيما يلي مثال على رمز الإطارات الرئيسية "الارتداد" البسيط الذي يستخدم خاصية --kf-bounce-from المخصصة للتحكم في ارتفاع القفزة. /* * ترتد - الرسوم المتحركة للدخول المرتد * استخدم --kf-bounce-from للتحكم في ارتفاع القفزة * الافتراضي: يقفز من 100vh (خارج الشاشة) * الاستخدام: * الرسوم المتحركة: سهولة الوصول إلى kf-bounce 3s؛ * --kf-bounce-from: 200px; // القفز من ارتفاع 200 بكسل */
@keyframes kf-ترتد { 0% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { ترجمة: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%، 45%، 64%، 79%، 90%، 97%، 100% { ترجمة: 0 0؛ وظيفة توقيت الرسوم المتحركة: سهولة الخروج؛ } }
تعد الرسوم المتحركة مثل "المرنة" أكثر تعقيدًا بعض الشيء بسبب الحسابات الموجودة داخل الإطارات الرئيسية. نحن بحاجة إلى تعريف --kf-elastic-from-X و --kf-elastic-from-Y بشكل منفصل (كلاهما اختياريان)، ويتيحان لنا معًا إنشاء مدخل مرن من أي نقطة على الشاشة.
/* * مرونة في - الرسوم المتحركة مدخل مرن * استخدم --kf-elastic-from-X و --kf-elastic-from-Y للتحكم في موضع البداية * الافتراضي: يدخل من أعلى المركز (0، -100vh) * الاستخدام: * الرسوم المتحركة: kf-elastic-in 2s لسهولة الدخول والخروج على حد سواء؛ * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // أدخل من (-50 بكسل، -200 بكسل) */
@keyframes kf-elastic-in { 0% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ترجمة: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ترجمة: 0 0؛ } }
يسهل هذا الأسلوب إعادة استخدام الإطارات الرئيسية المتقدمة وتخصيصها عبر مشروعنا، فقط عن طريق تغيير خاصية مخصصة واحدة.
.الارتداد والتكبير { الرسوم المتحركة: kf-bounce 3s سهولة الدخول, kf-zoom 3s خطي؛ --kf-التكبير من: 0; }
.ترتد والشريحة { تكوين الرسوم المتحركة: إضافة؛ /* كلا الرسوم المتحركة تستخدم الترجمة */ الرسوم المتحركة: kf-bounce 3s سهولة الدخول, kf-slide-in 3s سهولة الخروج؛ --kf-slide-from: -200px; }
.مرن في { الرسوم المتحركة: kf-elastic-in 2s لسهولة الدخول والخروج على حد سواء؛ }
راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 7 [متشعب] بواسطة أميت شين. حتى هذه اللحظة، رأينا كيف يمكننا دمج الإطارات الرئيسية بطريقة ذكية وفعالة. بالطبع، قد ترغب في تعديل الأشياء لتناسب احتياجات مشروعك بشكل أفضل، لكننا قمنا بتغطية أمثلة للعديد من الرسوم المتحركة الشائعة وحالات الاستخدام اليومي. ومع وجود هذه الرموز المميزة للإطارات الرئيسية، أصبح لدينا الآن وحدات بناء قوية لإنشاء رسوم متحركة متسقة وقابلة للصيانة عبر المشروع بأكمله. لا مزيد من الإطارات الرئيسية المكررة، ولا مزيد من التعارضات على النطاق العالمي. مجرد وسيلة نظيفة ومريحة للتعامل مع جميع احتياجات الرسوم المتحركة لدينا. لكن السؤال الحقيقي هو: كيف نجمع هذه العناصر الأساسية معًا؟ وضع كل ذلك معا لقد رأينا أن الجمع بين الرموز المميزة للإطارات الرئيسية أمر بسيط. لا نحتاج إلى أي شيء خاص سوى تحديد الرسوم المتحركة الأولى، وتحديد الرسوم المتحركة الثانية، وتعيين المتغيرات حسب الحاجة، وهذا كل شيء. /* تلاشي للداخل + تمرير للداخل */ نخب { الرسوم المتحركة: كف-تتلاشى في 0.4 ثانية، kf-slide-in 0.4s cube-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* تكبير + تلاشي */ .مشروط { الرسوم المتحركة: كف-تتلاشى في 0.3 ثانية، kf-zoom 0.3s cube-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-التكبير إلى: 1; }
/* الانزلاق + النبض */ إشعار { الرسوم المتحركة: kf-الانزلاق في 0.5 ثانية، بديل لا نهائي لسهولة الدخول والخروج kf-pulse 1.2s؛ --kf-slide-from: -100px 0; --kf-مقياس النبض-من: 0.95; --kf-مقياس النبض إلى: 1.05; }
تعمل هذه المجموعات بشكل جميل لأن كل رسم متحرك يستهدف خاصية مختلفة: العتامة، والتحويل (الترجمة/القياس)، وما إلى ذلك. ولكن في بعض الأحيان تكون هناك تعارضات، ونحن بحاجة إلى معرفة السبب وكيفية التعامل معها. عندما يحاول رسمان متحركان تحريك نفس الخاصية - على سبيل المثال، تحريك المقياس أو كليهما تحريك العتامة - فإن النتيجة لن تكون كما تتوقع. افتراضيًا، يتم تطبيق حركة واحدة فقط على تلك الخاصية، وهي الأخيرة في قائمة الرسوم المتحركة. يعد هذا تقييدًا لكيفية تعامل CSS مع الرسوم المتحركة المتعددة على نفس الخاصية. على سبيل المثال، لن يعمل هذا على النحو المنشود لأنه سيتم تطبيق الرسوم المتحركة لـ kf-pulse فقط. مجموعة سيئة { الرسوم المتحركة: kf-زوم 0.5 ثانية إلى الأمام، kf-pulse 1.2s البديل اللانهائي؛ --kf-zoom-from: 0.5; --kf-التكبير إلى: 1.2; --kf-مقياس النبض-من: 0.8; --kf-pulse-scale-to: 1.1; }
إضافة الرسوم المتحركة الطريقة الأبسط والأكثر مباشرة للتعامل مع الرسوم المتحركة المتعددة التي تؤثر على نفس الخاصية هي استخدام خاصية تكوين الرسوم المتحركة. في المثال الأخير أعلاه، تحل الرسوم المتحركة kf-pulse محل الرسوم المتحركة kf-zoom، لذلك لن نرى التكبير الأولي ولن نحصل على المقياس المتوقع إلى 1.2. من خلال تعيين تركيبة الرسوم المتحركة المراد إضافتها، نطلب من المتصفح أن يجمع بين كلا الرسوم المتحركة. وهذا يعطينا النتيجة التي نريدها. المكون الثاني { تكوين الرسوم المتحركة: إضافة؛ }
شاهد رموز الإطارات المفتاحية للقلم - العرض التوضيحي 8 [متشعب] بواسطة أميت شين. يعمل هذا الأسلوب جيدًا في معظم الحالات التي نريد فيها دمج التأثيرات على نفس الخاصية. وهو مفيد أيضًا عندما نحتاج إلى دمج الرسوم المتحركة مع قيم الخصائص الثابتة. على سبيل المثال، إذا كان لدينا عنصر يستخدم خاصية الترجمة لوضعه في المكان الذي نريده بالضبط، ثم أردنا تحريكه باستخدام الإطارات الرئيسية kf-slide-in، فسنحصل على قفزة مرئية سيئة بدون تكوين الرسوم المتحركة. راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 9 [متشعب] بواسطة أميت شين. مع تعيين تكوين الرسوم المتحركة للإضافة، يتم دمج الرسوم المتحركة بسلاسة مع الموجودةتحويل، لذلك يبقى العنصر في مكانه ويتحرك كما هو متوقع. الرسوم المتحركة Stagger هناك طريقة أخرى للتعامل مع الرسوم المتحركة المتعددة وهي "ترتيبها" - أي بدء الرسم المتحرك الثاني قليلاً بعد انتهاء الرسم الأول. إنه ليس حلاً مناسبًا لكل حالة، ولكنه مفيد عندما يكون لدينا رسم متحرك للمدخل يتبعه رسم متحرك مستمر. /* التلاشي + نبض العتامة */ إشعار { الرسوم المتحركة: kf-fade-in 2s سهولة الخروج، kf-pulse 0.5s 2s بديل لا نهائي لسهولة الدخول؛ --kf-pulse-opacity-to: 0.5; }
راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 10 [متشعب] بواسطة أميت شين. مسائل النظام يستخدم جزء كبير من الرسوم المتحركة التي نعمل بها خاصية التحويل. في معظم الحالات، يكون هذا ببساطة أكثر ملاءمة. كما أن لديها ميزة الأداء حيث يمكن تسريع الرسوم المتحركة التحويلية بواسطة GPU. لكن إذا استخدمنا التحويلات، فعلينا أن نقبل أن الترتيب الذي نجري به التحويلات مهم. كثيراً. في إطاراتنا الرئيسية حتى الآن، استخدمنا تحويلات فردية. وفقًا للمواصفات، يتم تطبيقها دائمًا بترتيب ثابت: أولاً، تتم ترجمة العنصر، ثم تدويره، ثم تغيير حجمه. هذا منطقي وهو ما يتوقعه معظمنا. ومع ذلك، إذا استخدمنا خاصية التحويل، فإن الترتيب الذي تتم به كتابة الوظائف هو الترتيب الذي يتم تطبيقها به. في هذه الحالة، إذا قمنا بتحريك شيء بمقدار 100 بكسل على المحور السيني ثم قمنا بتدويره بمقدار 45 درجة، فلن يكون الأمر مثل تدويره أولاً بمقدار 45 درجة ثم تحريكه بمقدار 100 بكسل. /* المربع الوردي: قم بالترجمة أولاً، ثم قم بالتدوير */ .مثال واحد { تحويل: ترجمة X (100 بكسل) تدوير (45 درجة)؛ }
/* المربع الأخضر: قم بالتدوير أولاً، ثم قم بالترجمة */ .مثال-اثنين { تحويل: تدوير (45 درجة) ترجمة X (100 بكسل)؛ }
راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 11 [متشعب] بواسطة أميت شين. ولكن وفقًا لترتيب التحويل، فإن جميع التحويلات الفردية - كل ما استخدمناه للرموز المميزة للإطارات الرئيسية - تحدث قبل وظائف التحويل. وهذا يعني أن أي شيء تقوم بتعيينه في خاصية التحويل سيحدث بعد الرسوم المتحركة. لكن إذا قمت، على سبيل المثال، بتعيين الترجمة مع الإطارات الرئيسية kf-spin، فستحدث الترجمة قبل الرسوم المتحركة. محتار بعد؟! يؤدي هذا إلى مواقف يمكن أن تؤدي فيها القيم الثابتة إلى نتائج مختلفة لنفس الرسوم المتحركة، كما في الحالة التالية:
/* رسوم متحركة مشتركة لكلا القرصين */ سبينر { الرسوم المتحركة: kf-spin 1s خطية لا نهائية؛ }
/* الدوار الوردي: الترجمة قبل التدوير (تحويل فردي) */ .الدوار الوردي { ترجمة: 100% 50%؛ }
/* الدوار الأخضر: قم بالتدوير ثم الترجمة (ترتيب الوظائف) */ .الدوار الأخضر { تحويل: ترجمة (100%، 50%)؛ }
راجع رموز الإطارات المفتاحية للقلم - العرض التوضيحي 12 [متشعب] بواسطة أميت شين. يمكنك أن ترى أن القرص الدوار الأول (الوردي) يحصل على ترجمة تحدث قبل تدوير kf-spin، لذلك يتحرك أولاً إلى مكانه ثم يدور. يحصل الدوار الثاني (الأخضر) على وظيفة ترجمة () التي تحدث بعد التحويل الفردي، لذلك يدور العنصر أولاً، ثم يتحرك بالنسبة إلى زاويته الحالية، ونحصل على تأثير المدار الواسع. لا، هذا ليس خطأ. إنها مجرد واحدة من تلك الأشياء التي نحتاج إلى معرفتها حول CSS ونضعها في الاعتبار عند العمل مع رسوم متحركة متعددة أو تحويلات متعددة. إذا لزم الأمر، يمكنك أيضًا إنشاء مجموعة إضافية من الإطارات الرئيسية kf-spin-alt التي تقوم بتدوير العناصر باستخدام وظيفة التدوير (). انخفاض الحركة وبينما نتحدث عن الإطارات الرئيسية البديلة، لا يمكننا تجاهل خيار "عدم وجود رسوم متحركة". واحدة من أكبر مزايا استخدام الرموز المميزة للإطارات الرئيسية هي أنه يمكن دمج إمكانية الوصول، وهو في الواقع أمر سهل للغاية. من خلال تصميم إطاراتنا الرئيسية مع وضع إمكانية الوصول في الاعتبار، يمكننا ضمان حصول المستخدمين الذين يفضلون الحركة المنخفضة على تجربة أكثر سلاسة وأقل تشتيتًا، دون الحاجة إلى عمل إضافي أو تكرار التعليمات البرمجية. يمكن أن يتغير المعنى الدقيق لـ "Reduced Motion" قليلاً من رسم متحرك إلى آخر، ومن مشروع إلى آخر، ولكن إليك بعض النقاط المهمة التي يجب وضعها في الاعتبار: كتم الإطارات الرئيسية في حين أنه يمكن تخفيف بعض الرسوم المتحركة أو إبطائها، إلا أن هناك رسومًا أخرى يجب أن تختفي تمامًا عند طلب تقليل الحركة. الرسوم المتحركة النبضية هي مثال جيد. للتأكد من أن هذه الرسوم المتحركة لا تعمل في وضع الحركة المنخفضة، يمكننا ببساطة تغليفها في استعلام الوسائط المناسب.
@media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { @keyfrmaes kf-نبض { من { المقياس: فار(--kf-pulse-scale-from, 1); العتامة: var(--kf-pulse-opacity-from, 1); } إلى { المقياس: فار(--kf-pulse-scale-to, 1); العتامة:var(--kf-pulse-opacity-to, 1); } } }
وهذا يضمن أن المستخدمين الذين قاموا بتعيين تفضيلات الحركة المخفضة للتقليل لن يشاهدوا الرسوم المتحركة وسيحصلون على تجربة تتوافق مع تفضيلاتهم. لحظة في هناك بعض الإطارات الرئيسية التي لا يمكننا إزالتها ببساطة، مثل الرسوم المتحركة للدخول. يجب أن تتغير القيمة، يجب أن تتحرك؛ وإلا فإن العنصر لن يحتوي على القيم الصحيحة. ولكن في الحركة المنخفضة، يجب أن يكون هذا الانتقال من القيمة الأولية فوريًا. ولتحقيق ذلك، سنحدد مجموعة إضافية من الإطارات الرئيسية حيث تنتقل القيمة فورًا إلى الحالة النهائية. تصبح هذه الإطارات الرئيسية الافتراضية لدينا. بعد ذلك، سنضيف الإطارات الرئيسية العادية داخل استعلام الوسائط لتعيين وضع "تفضيلات-تخفيض-حركة" على "لا تفضيل"، تمامًا كما في المثال السابق. /* أدخل على الفور لتقليل الحركة */ @keyframes kf-التكبير { من، إلى { المقياس: فار(--kf-zoom-to, 1); } }
@media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { /* الإطارات الرئيسية للتكبير/التصغير الأصلية */ @keyframes kf-التكبير { من { المقياس: فار(--kf-zoom-from, 0.8); } إلى { المقياس: فار(--kf-zoom-to, 1); } } }
بهذه الطريقة، سيرى المستخدمون الذين يفضلون الحركة المنخفضة العنصر يظهر على الفور في حالته النهائية، بينما يحصل أي شخص آخر على الانتقال المتحرك. النهج الناعم هناك حالات نريد فيها الاحتفاظ ببعض الحركة، ولكن بشكل أكثر ليونة وهدوءًا من الرسوم المتحركة الأصلية. على سبيل المثال، يمكننا استبدال المدخل المرتد بتلاشي لطيف.
@keyframes kf-ترتد { /* تلاشي ناعم لتقليل الحركة */ }
@media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { @keyframes kf-ترتد { /* الإطارات الرئيسية المرتدة الأصلية */ } }
الآن، لا يزال المستخدمون الذين تم تمكين الحركة المنخفضة يشعرون بالمظهر، ولكن بدون الحركة المكثفة للارتداد أو الرسوم المتحركة المرنة. ومع وضع العناصر الأساسية في مكانها الصحيح، فإن السؤال التالي هو كيفية جعلها جزءًا من سير العمل الفعلي. تعد كتابة الإطارات الرئيسية المرنة أمرًا واحدًا، ولكن جعلها موثوقة عبر مشروع كبير يتطلب بعض الاستراتيجيات التي كان علي أن أتعلمها بالطريقة الصعبة. استراتيجيات التنفيذ وأفضل الممارسات بمجرد أن يكون لدينا مكتبة قوية من الرموز المميزة للإطارات الرئيسية، فإن التحدي الحقيقي هو كيفية دمجها في العمل اليومي.
هناك إغراء يتمثل في إسقاط جميع الإطارات الرئيسية مرة واحدة والإعلان عن حل المشكلة، ولكن عمليًا وجدت أن أفضل النتائج تأتي من التبني التدريجي. ابدأ بالرسوم المتحركة الأكثر شيوعًا، مثل التلاشي أو الانزلاق. هذه هي المكاسب السهلة التي تظهر قيمة فورية دون الحاجة إلى عمليات إعادة كتابة كبيرة. التسمية هي نقطة أخرى تستحق الاهتمام. توضح البادئة أو مساحة الاسم المتسقة الرسوم المتحركة التي تعتبر رموزًا وأيها تكون محلية لمرة واحدة. كما أنه يمنع التصادمات العرضية ويساعد أعضاء الفريق الجدد على التعرف على النظام المشترك في لمحة واحدة. التوثيق لا يقل أهمية عن الكود نفسه. حتى التعليق القصير فوق كل رمز مميز للإطارات الرئيسية يمكن أن يوفر ساعات من التخمين لاحقًا. يجب أن يكون المطور قادرًا على فتح ملف الرموز المميزة، والمسح بحثًا عن التأثير الذي يحتاجه، ونسخ نمط الاستخدام مباشرة إلى المكون الخاص به. المرونة هي ما يجعل هذا النهج يستحق كل هذا الجهد. من خلال الكشف عن الخصائص المخصصة المعقولة، فإننا نمنح الفرق مساحة لتكييف الرسوم المتحركة دون خرق النظام. وفي الوقت نفسه، حاول ألا تبالغ في التعقيد. قم بتوفير المقابض التي تهمك واحتفظ بالباقي حسب رأيه. وأخيرا، تذكر إمكانية الوصول. لا تحتاج كل الرسوم المتحركة إلى بديل منخفض الحركة، لكن الكثير منها يحتاج إلى ذلك. إن إجراء هذه التعديلات في وقت مبكر يعني أننا لن نضطر أبدًا إلى تحديثها لاحقًا، كما يظهر مستوى من الاهتمام سيلاحظه المستخدمون لدينا حتى لو لم يذكروا ذلك مطلقًا.
من خلال تجربتي، فإن التعامل مع الرموز المميزة للإطارات الرئيسية كجزء من سير عمل الرموز المميزة للتصميم لدينا هو ما يجعلها ثابتة. وبمجرد وضعها في مكانها الصحيح، فإنها تتوقف عن الشعور بأنها مؤثرات خاصة وتصبح جزءًا من لغة التصميم، وهو امتداد طبيعي لكيفية تحرك المنتج واستجابته. التفاف يمكن أن تكون الرسوم المتحركة واحدة من أكثر الأجزاء المبهجة في واجهات البناء، ولكن بدون هيكل، يمكن أن تصبح أيضًا واحدة من أكبر مصادر الإحباط. من خلال التعامل مع الإطارات الرئيسية كرموز مميزة، فإنك تأخذ شيئًا عادةً ما يكون فوضويًا ويصعب إدارته وتحوله إلى نظام واضح يمكن التنبؤ به. القيمة الحقيقية ليست فقط في حفظ بضعة أسطر من التعليمات البرمجية. ومن المؤكد أنه عند استخدام التلاشي أو الانزلاق أو التكبير/التصغير أو الدوران، فإنك تعرف بالضبط كيف سيتصرف عبر المشروع. إنه في المرونة التي تأتي من الخصائص المخصصة دون فوضى الاختلافات التي لا نهاية لها. وهو في إمكانية الوصول مدمج في الأساس وليس مضافًا إليهفكرة لاحقة. لقد رأيت هذه الأفكار تعمل في فرق مختلفة وقواعد تعليمات برمجية مختلفة، والنمط هو نفسه دائمًا. بمجرد وضع الرموز المميزة في مكانها الصحيح، تتوقف الإطارات الرئيسية عن كونها مجموعة متفرقة من الحيل وتصبح جزءًا من لغة التصميم. إنها تجعل المنتج يبدو أكثر قصدًا وأكثر اتساقًا وحيوية. إذا أخذت شيئًا واحدًا من هذه المقالة، فليكن هذا: الرسوم المتحركة تستحق نفس الاهتمام والبنية التي نمنحها بالفعل للألوان والطباعة والمسافات. إن الاستثمار الصغير في الرموز المميزة للإطارات الرئيسية يؤتي ثماره في كل مرة تتحرك فيها الواجهة.
