لقد قمت مؤخرًا بتحديث الرسومات المتحركة على موقع الويب الخاص بي بموضوع جديد ومجموعة من الشخصيات الرائدة، مع تطبيق الكثير من التقنيات التي شاركتها في هذه السلسلة. يتغير مظهر عدد قليل من الرسوم المتحركة الخاصة بي عندما يتفاعل معها شخص ما أو في أوقات مختلفة من اليوم.
تتغير الألوان الموجودة في الرسم أعلى صفحات مدونتي من الصباح حتى الليل كل يوم. ثم، هناك وضع الثلج، الذي يضيف ألوانًا باردة وموضوعًا شتويًا، بفضل طبقة التراكب ووضع المزج.
أثناء العمل على هذا، بدأت أتساءل عما إذا كانت قيم الألوان النسبية لـ CSS يمكن أن تمنحني المزيد من التحكم مع تبسيط العملية أيضًا. ملاحظة: في هذا البرنامج التعليمي، سأركز على قيم الألوان النسبية ومساحة الألوان OKLCH لتصميم الرسومات والرسوم المتحركة. إذا كنت تريد التعمق في الألوان النسبية، فقد أنشأ أحمد شديد دليلاً تفاعليًا رائعًا. أما بالنسبة للمساحات اللونية، والتدرج اللوني، وOKLCH، فقد كتب عنها جيف جراهام.
كان الاستخدام المتكرر للعناصر أمرًا أساسيًا. تم إعادة استخدام الخلفيات كلما أمكن ذلك، مع مساعدة التكبير/التصغير والتراكبات في إنشاء مشاهد جديدة من نفس العمل الفني. لقد وُلدت من الضرورة، لكنها شجعت أيضًا على التفكير من حيث المسلسلات بدلاً من المشاهد الفردية. مشكلة تحديث لوحات الألوان يدويًا دعونا ننتقل مباشرة إلى التحدي الذي أواجهه. في عناوين Toon مثل هذه - استنادًا إلى حلقة Yogi Bear Show لعام 1959 "Lullabye-Bye Bear" - وعملي عمومًا، تقتصر اللوحات على عدد قليل من الألوان المختارة.
أقوم بإنشاء ظلال وصبغات مما أسميه اللون "الأساسي" الخاص بي لتوسيع اللوحة دون إضافة المزيد من الأشكال.
في Sketch، أعمل في مساحة الألوان HSL، لذا تتضمن هذه العملية زيادة أو تقليل قيمة الإضاءة للون الأساسي الخاص بي. بصراحة، إنها ليست مهمة شاقة - ولكن اختيار لون أساس مختلف يتطلب إنشاء مجموعة جديدة كاملة من الظلال والصبغات. القيام بذلك يدويًا، مرارًا وتكرارًا، سرعان ما يصبح أمرًا شاقًا.
لقد ذكرت مساحة اللون HSL — H (تدرج اللون)، وS (التشبع)، وL (السطوع)، ولكن هذه مجرد واحدة من عدة طرق لوصف اللون. ربما يكون RGB - R (أحمر)، G (أخضر)، B (أزرق) - هو الأكثر شيوعًا، على الأقل في شكله السداسي. هناك أيضًا LAB - L (الخفة)، A (الأخضر - الأحمر)، B (الأزرق - الأصفر) - والنموذج الأحدث، ولكن الآن مدعوم على نطاق واسع LCH - L (الخفة)، C (الصفاء)، H (تدرج اللون) - في شكل OKLCH الخاص به. باستخدام LCH - وتحديدًا OKLCH في CSS - يمكنني ضبط قيمة خفة لون كريم الأساس الخاص بي.
أو يمكنني تغيير صفاء لها. يصف كل من صفاء LCH وتشبع HSL كثافة اللون أو ثراءه، لكنهما يفعلان ذلك بطرق مختلفة. يمنحني LCH نطاقًا أوسع ومزجًا أكثر قابلية للتنبؤ بين الألوان.
يمكنني أيضًا تغيير درجة اللون لإنشاء لوحة من الألوان التي تشترك في نفس قيم الإضاءة والصفاء. في كل من HSL وLCH، يبدأ طيف التدرج باللون الأحمر، ويتحرك عبر الأخضر والأزرق، ويعود إلى اللون الأحمر.
لماذا غيّرت OKLCH طريقة تفكيري في اللون؟ أصبح الآن دعم المتصفح لمساحة ألوان OKLCH منتشرًا على نطاق واسع، حتى لو لم تتمكن أدوات التصميم - بما في ذلك Sketch - من اللحاق بالركب. لحسن الحظ، هذا لا ينبغي أن يمنعك من استخدام OKLCH. ستسعد المتصفحات بتحويل قيم Hex وHSL وLAB وRGB إلى OKLCH نيابةً عنك. يمكنك تعريف خاصية CSS مخصصة بلون أساسي في أي مساحة، بما في ذلك Hex: /* لون كريم الأساس */ --الأساس: #5accd6;
سيتم تحويل أي ألوان مشتقة منه إلى OKLCH تلقائيًا: --foundation-light: oklch(from var(-foundation) [...]; } --foundation-mid: oklch(from var(-foundation) [...]; } --foundation-dark: oklch(from var(-foundation) [...]; }
اللون النسبي كنظام تصميم فكر في اللون النسبي كقولك: "خذ هذا اللون، وقم بتعديله، ثم أعطني النتيجة". هناك طريقتان لضبط اللون: التغييرات المطلقة والتغييرات المتناسبة. تبدو متشابهة في التعليمات البرمجية، ولكنها تتصرف بشكل مختلف تمامًا بمجرد البدء في تبديل الألوان الأساسية. إن فهم هذا الاختلاف هو ما يمكن أن يحول استخدام اللون النسبي إلى نظام. /* لون كريم الأساس */ --الأساس: #5accd6;
على سبيل المثال، قيمة فاتحة اللون الأساسي الخاص بي هي 0.7837، بينما تبلغ قيمة النسخة الأغمق 0.5837. لحساب الفرق، أقوم بطرح القيمة الأقل من القيمة الأعلى وتطبيق النتيجة باستخدام دالة calc(): --الأساس-الظلام: oklch(من فار(-الأساس) احسب (ل - 0.20) ج ح)؛
للحصول على لون أفتح، أقوم بإضافة الفرق بدلاً من ذلك: --أساس الضوء: oklch(من فار(-الأساس) احسب (ل + 0.10) ج ح)؛
صفاءالتعديلات تتبع نفس العملية. لتقليل كثافة لون كريم الأساس الخاص بي من 0.1035 إلى 0.0035، أقوم بطرح قيمة واحدة من الأخرى: oklch(من فار(-الأساس) ل احسب (ج - 0.10) ح)؛
لإنشاء لوحة من الأشكال، أقوم بحساب الفرق بين قيمة تدرج لون الأساس (200) وتدرج اللون الجديد (260): oklch(من فار(-الأساس) ل ج احسب (ح + 60))؛
هذه الحسابات مطلقة. عندما أطرح مبلغًا ثابتًا، أقول فعليًا: "اطرح هذا القدر دائمًا". وينطبق الشيء نفسه عند إضافة قيم ثابتة: احسب (ج - 0.10) احسب (ج + 0.10)
لقد تعلمت حدود هذا النهج بالطريقة الصعبة. عندما اعتمدت على طرح قيم الصفاء الثابتة، انهارت الألوان نحو اللون الرمادي بمجرد تغيير الأساس. لقد انهارت اللوحة التي كانت تعمل مع لون واحد لصالح لون آخر. الضرب يتصرف بشكل مختلف. عندما أقوم بمضاعفة الصفاء، أقول للمتصفح: "قم بتقليل كثافة هذا اللون بنسبة معينة". تبقى العلاقة بين الألوان سليمة، حتى عندما يتغير الأساس: احسب (ج * 0.10)
قواعد تحريكها وتوسيع نطاقها وتدويرها
تحريك الخفة (إضافة أو طرح)، مقياس صفاء (مضاعف) ، تدوير اللون (إضافة أو طرح درجات).
أقوم بقياس الصفاء لأنني أريد أن تظل تغييرات الكثافة متناسبة مع اللون الأساسي. علاقات تدرج اللون هي علاقات دورانية، لذا فإن مضاعفة تدرج الألوان ليس له أي معنى. الخفة أمر إدراكي ومطلق، ومضاعفتها غالبًا ما تؤدي إلى نتائج غريبة.
من لون واحد إلى موضوع كامل يسمح لي اللون النسبي بتحديد لون الأساس وإنشاء كل الألوان الأخرى التي أحتاجها - التعبئة، والحدود، وتوقفات التدرج، والظلال - منه. عند تلك النقطة، يتوقف اللون عن كونه لوحة ألوان ويبدأ في كونه نظامًا. تميل الرسوم التوضيحية SVG إلى إعادة استخدام نفس الألوان القليلة عبر عمليات التعبئة والحدود والتدرجات. يتيح لك اللون النسبي تحديد تلك العلاقات مرة واحدة وإعادة استخدامها في كل مكان، مثلما أعاد رسامو الرسوم المتحركة استخدام الخلفيات لإنشاء مشاهد جديدة.
قم بتغيير لون الأساس مرة واحدة، وسيتم تحديث كل لون مشتق تلقائيًا، دون إعادة حساب أي شيء يدويًا. بعيدًا عن الرسومات المتحركة، يمكنني استخدام نفس الأسلوب لتحديد الألوان لحالات العناصر التفاعلية مثل الأزرار والروابط. اللون الأساسي الذي استخدمته في عنوان Toon الخاص بي "Lullabye-Bye Bear" هو لون أزرق سماوي. الخلفية عبارة عن تدرج نصف قطري بين مؤسستي ونسخة أغمق.
لإنشاء إصدارات بديلة بأمزجة مختلفة تمامًا، أحتاج فقط إلى تغيير لون الأساس: --الأساس: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(من var(--foundation) احسب (ل - 0.2357) احسب (ج * 0.833) ح)؛
لربط هذه الخصائص المخصصة بتدرج SVG الخاص بي دون تكرار قيم الألوان، قمت باستبدال قيم ألوان التوقف المشفرة بأنماط مضمّنة:
<تعريف>
بعد ذلك، كنت بحاجة إلى التأكد من أن Toon Text الخاص بي يتباين دائمًا مع أي لون أساسي أختاره. يؤدي دوران درجة اللون بمقدار 180 درجة إلى إنتاج لون تكميلي يبرز بالتأكيد - ولكن يمكن أن يهتز بشكل غير مريح: .نص الضوء { ملء: oklch(من فار(-الأساس) ل ج احسب (ح + 180))؛ }
يؤدي الإزاحة بمقدار 90 درجة إلى إنتاج لون ثانوي حيوي دون أن يكون مكملاً بالكامل: .نص الضوء { ملء: oklch(من فار(-الأساس) ل ج احسب (ح - 90))؛ }
يستخدم استعادتي لعنوان Toon لـ Quick Draw McGraw لعام 1959 "El Kabong" نفس التقنيات ولكن مع لوحة أكثر تنوعًا. على سبيل المثال، هناك تدرج شعاعي آخر بين لون الأساس والظل الغامق.
المبنى والشجرة في الخلفية هما ببساطة ظلال مختلفة من نفس لون الأساس. بالنسبة لهذه المسارات، كنت بحاجة إلى لونين إضافيين للتعبئة: .بج منتصف { ملء: oklch(من فار(-الأساس) احسب (ل - 0.04) احسب (ج * 0.91) ح)؛ }
.bg-الظلام { ملء: oklch(من فار(-الأساس) احسب (ل - 0.12) احسب (ج * 0.64) ح)؛ }
عندما تبدأ الأساسات في التحرك حتى الآن، كل ما أظهرته كان ثابتًا. حتى عندما يستخدم شخص ما منتقي الألوان لتغيير لون كريم الأساس، فإن هذا التغيير يحدث على الفور. لكن الرسومات المتحركة نادرًا ما تظل ثابتة، فالمفتاح يكمن في الاسم. لذا، إذا كان اللون جزءًا من النظام، فلا يوجد سبب يمنعه من تحريكه أيضًا. لتحريك اللون الأساسي، أحتاج أولاً إلى تقسيمه إلى قنوات OKLCH الخاصة به- الخفة واللون واللون. ولكن هناك خطوة إضافية مهمة: أحتاج إلى تسجيل هذه القيم كخصائص مخصصة مكتوبة. ولكن ماذا يعني ذلك؟ افتراضيًا، لا يعرف المتصفح ما إذا كانت قيمة خاصية CSS المخصصة تمثل لونًا أو طولًا أو رقمًا أو أي شيء آخر تمامًا. وهذا يعني غالبًا أنه لا يمكن استيفاءها بسلاسة أثناء الرسوم المتحركة، والانتقال من قيمة إلى أخرى. يؤدي تسجيل خاصية مخصصة إلى إخبار المتصفح بنوع القيمة التي تمثلها وكيف يجب أن تتصرف مع مرور الوقت. في هذه الحالة، أريد من المتصفح أن يتعامل مع قنوات الألوان الخاصة بي كأرقام بحيث يمكن تحريكها بسلاسة. @الخاصية --f-l { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 0.40؛ }
@الملكية --f-c { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 0.11؛ }
@الخاصية --f-h { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 305؛ }
بمجرد التسجيل، تتصرف هذه الخصائص المخصصة مثل CSS الأصلي. يمكن للمتصفح استيفاءها إطارًا تلو الآخر. ثم أقوم بإعادة بناء اللون الأساسي من تلك القنوات: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
وهذا يجعل اللون الأساسي يصبح متحركًا، تمامًا مثل أي قيمة رقمية أخرى. فيما يلي رسم متحرك بسيط "للتنفس" يغير الإضاءة بلطف بمرور الوقت: @keyframes تتنفس { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.تون-العنوان { الرسوم المتحركة: تنفس 10 ثوانٍ بسهولة لا نهائية؛ }
نظرًا لأن كل الألوان الأخرى في التعبئة والتدرجات والحدود مشتقة من --foundation، فإنها تتحرك جميعًا معًا، ولا يلزم تحديث أي شيء يدويًا. لون واحد متحرك، العديد من التأثيرات في بداية هذه العملية، تساءلت عما إذا كانت قيم الألوان النسبية لـ CSS يمكن أن توفر المزيد من الاحتمالات مع تسهيل تنفيذها أيضًا. لقد أضفت مؤخرًا خلفية جديدة لمنجم ذهب إلى صفحة الاتصال الخاصة بموقعي على الويب، وتضمنت النسخة الأولى مصابيح زيتية تتوهج وتتأرجح.
كنت أرغب في استكشاف كيف يمكن لألوان CSS المتحركة أن تجعل التصميم الداخلي للمنجم أكثر واقعية من خلال تلوينه بألوان من المصابيح. أردت منهم أن يؤثروا على العالم من حولهم، بنفس الطريقة التي يؤثر بها الضوء الحقيقي. لذا، بدلاً من تحريك ألوان متعددة، قمت ببناء نظام إضاءة صغير يحرك لونًا واحدًا فقط.
كانت مهمتي الأولى هي وضع طبقة تراكب بين الخلفية ومصابيحي: <المسار معرف = "تراكب" ملء = "فار (-تراكب-تينت)" [...] النمط = "وضع المزج: اللون" />
لقد استخدمت وضع مزيج المزج: اللون لأن ذلك يؤدي إلى تلوين ما تحته مع الحفاظ على النصوع الأساسي. نظرًا لأنني أريد فقط أن يكون التراكب مرئيًا عند تشغيل الرسوم المتحركة، فقد قمت بتمكين التراكب: .svg-mine #تراكب { العرض: لا شيء؛ }
@media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { .svg-mine[data-animations=on] #overlay { عرض: كتلة؛ العتامة: 0.5؛ } }
كان التراكب في مكانه، ولكن لم يتم توصيله بعد بالمصابيح. كنت بحاجة إلى مصدر الضوء. مصابيحي بسيطة، وكل واحدة منها تحتوي على عنصر دائري قمت بطمسه باستخدام مرشح. يُنتج الفلتر تمويهًا ناعمًا جدًا على الدائرة بأكملها.
<معرف المرشح = "lamp-glow-1" x = "-120٪" y = "-120٪" العرض = "340٪" الارتفاع = "340٪">
بدلاً من تحريك التراكب والمصابيح بشكل منفصل، أقوم بتحريك رمز لون "لهب" واحد واشتق كل شيء آخر من ذلك. أولاً، أقوم بتسجيل ثلاث خصائص مخصصة مكتوبة لقنوات OKLCH: @الملكية --fl-l { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 0.86؛ } @العقار --fl-c { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 0.12؛ } @العقار --fl-h { بناء الجملة: "<رقم>"؛ يرث: صحيح؛ القيمة الأولية: 95؛ }
لقد قمت بتحريك هذه القنوات، ودفعت عمدًا بعض الإطارات نحو اللون البرتقالي حتى يظهر الوميض بوضوح كضوء نار:
@keyframes لهب { 0%, 100% { --fl-l: 0.86; --فل-ج: 0.12؛ --فل-ح: 95؛ } 6% { --fl-l: 0.91; --فل-ج: 0.10؛ --فل-ح: 92؛ } 12% { --fl-l: 0.83; --فل-ج: 0.14؛ --فل-ح: 100؛ } 18% { --fl-l: 0.88; --فل-ج: 0.11؛ --فل-ح: 94؛ } 24% { --fl-l: 0.82; --فل-ج: 0.16؛ --فل-ح: 82؛ } 30% { --fl-l: 0.90; --فل-ج: 0.12؛ --فل-ح: 90؛ } 36% { --fl-l: 0.79; --فل-ج: 0.17؛ --فل-ح: 76؛ } 44% { --fl-l: 0.87; --فل-ج: 0.12؛ --فل-ح: 96؛ } 52% { --fl-l: 0.81; --فلور-ج: 0.15؛ --فل-ح: 102؛ } 60% { --fl-l: 0.89; --فل-ج: 0.11؛ --فل-ح: 93؛ } 68% { --fl-l: 0.83; --فل-ج: 0.16؛ --فل-ح: 85؛ } 76% { --fl-l: 0.91; --فل-ج: 0.10؛ --فل-ح: 91؛ } 84% { --fl-l: 0.85; --فل-ج: 0.14؛ --فل-ح: 98؛ } 92% {--فلور-ل: 0.80؛ --فل-ج: 0.17؛ --فل-ح: 74؛ } }
ثم قمت بتحديد نطاق تلك الرسوم المتحركة إلى SVG، بحيث تكون المتغيرات المشتركة متاحة لكل من المصابيح والتراكب الخاص بي:
@media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { .svg-mine[data-animations=on] { الرسوم المتحركة: Flame 3.6s خطي لانهائي؛ عزلة: عزلة؛
/* إنشاء لون لهب من القنوات المتحركة */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* لون المصباح مشتق من اللهب */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* صبغة التراكب مشتقة من نفس اللهب */ --تراكب الصبغة: oklch(من var(--flame) احسب (ل + 0.06) احسب (ج * 0.65) احسب (ح - 10))؛ } }
أخيرًا، قمت بتطبيق تلك الألوان المشتقة على المصابيح المتوهجة والتراكب الذي تؤثر عليه: @media (يفضل الحركة المنخفضة: لا يوجد تفضيل) { .svg-mine[data-animations=on] #mine-lamp-1 > دائرة، .svg-mine[data-animations=on] #mine-lamp-2 > الدائرة { ملء: فار(-مصباح النواة); }
.svg-mine[data-animations=on] #overlay { عرض: كتلة؛ ملء: فار(--تراكب-تينت); العتامة: 0.5؛ } }
عندما يتحول اللهب نحو اللون البرتقالي، تسخن المصابيح، ويسخن معها المشهد. عندما يبرد اللهب، يستقر كل شيء معًا. أفضل جزء هو أنه لا يوجد شيء مكتوب يدويًا. إذا قمت بتغيير اللون الأساسي أو تعديل نطاقات الرسوم المتحركة للهب، فسيتم تحديث نظام الإضاءة بالكامل في وقت واحد. يمكنك رؤية النتيجة النهائية على موقع الويب الخاص بي. إعادة الاستخدام، إعادة الاستخدام، إعادة النظر اضطر رسامو الرسوم المتحركة في Hanna-Barbera إلى إعادة توظيف العناصر بدافع الضرورة، لكنني أعيد استخدام الألوان لأنها تجعل عملي أكثر اتساقًا وأسهل في الصيانة. تسمح لي قيم الألوان النسبية لـ CSS بما يلي:
تحديد لون أساس واحد، وصف كيفية ارتباط الألوان الأخرى به، أعد استخدام تلك العلاقات في كل مكان، و تحريك النظام عن طريق تغيير قيمة واحدة.
اللون النسبي لا يجعل التصميم أسهل فحسب. إنه يشجع طريقة تفكير يكون فيها اللون، مثل الحركة، مقصودًا - وحيث يمكن لتغيير قيمة واحدة أن يحول المشهد بأكمله دون إعادة كتابة العمل تحته.
