بەم دواییە گرافیکە ئەنیمەیشنەکانی ماڵپەڕەکەمم نوێکردەوە بە تەوەرێکی نوێ و کۆمەڵێک کارەکتەری پێشەنگ، زۆرێک لەو تەکنیکانەی کە لەم زنجیرەیەدا هاوبەشم کردوون، خستە بواری جێبەجێکردنەوە. چەند ئەنیمەیشنێکم دیمەن دەگۆڕێت کاتێک کەسێک کارلێک لەگەڵیان دەکات یان لە کاتە جیاوازەکانی ڕۆژدا.
ڕەنگەکانی ناو گرافیکەکەی سەرەوەی لاپەڕەکانی بلۆگەکەم هەموو ڕۆژێک لە بەیانییەوە تا شەو دەگۆڕێت. پاشان، دۆخی بەفر هەیە، کە ڕەنگی سارد و تەوەرێکی زستانە زیاد دەکات، بە سوپاسەوە لە چینێکی سەرپۆش و دۆخی تێکەڵکردن.
لەکاتی کارکردن لەسەر ئەمەدا، دەستم کرد بە پرسیارکردن کە ئایا بەهاکانی ڕەنگی ڕێژەیی CSS دەتوانن کۆنترۆڵی زیاترم پێبدەن لە هەمان کاتدا پرۆسەکە سادە بکەنەوە. تێبینی: لەم فێرکارییەدا، من سەرنج دەخەمە سەر بەهاکانی ڕەنگی ڕێژەیی و شوێنی ڕەنگی OKLCH بۆ گرافیک و ئەنیمەیشنەکانی تەوەر. ئەگەر دەتەوێت بە قووڵی خۆت بخزێنیتە ناو ڕەنگی ڕێژەییەوە، ئەحمەد شادید ڕێبەرێکی کارلێککاری نایابی دروستکردووە. سەبارەت بە بۆشایی ڕەنگ و گامۆت و OKLCH، جۆف گراهامی خۆمان لەسەریان نووسیویەتی.
دووبارە بەکارهێنانی توخمەکان کلیلی بوو. هەرکاتێک کە دەکرا پاشبنەماکان بەکاردەهێنرانەوە، لەگەڵ زووم و سەرپۆشەکان کە یارمەتی دروستکردنی دیمەنی نوێیان دەدا لە هەمان کارە هونەرییەکان. لە پێویستییەوە لەدایک بووە، بەڵام هانی بیرکردنەوەی لەڕووی زنجیرەوە بووە نەک دیمەنی تاکەکەسی. کێشەی نوێکردنەوەی دەستی پالێتی ڕەنگەکان با ڕاستەوخۆ بچینە سەر تەحەدای من. لە فیلمی Toon Titles وەک ئەم یەکە — کە لەسەر بنەمای ئەڵقەی 1959 Yogi Bear Show "Lullabye-Bye Bear" — و کارەکانم بە گشتی، پالێتەکان سنووردار دەکرێن بە چەند ڕەنگێکی هەڵبژێردراو.
من سێبەر و ڕەنگ دروست دەکەم لەوەی کە من پێی دەڵێم ڕەنگی "بناغە"م بۆ فراوانکردنی پالێتەکە بەبێ زیادکردنی ڕەنگی زیاتر.
لە سکێچدا، من لە فەزای ڕەنگی HSL کاردەکەم، بۆیە ئەم پرۆسەیە بریتییە لە زیادکردن یان کەمکردنەوەی بەهای سووکایەتی ڕەنگی ئەساسەکەم. ڕاستگۆیانە، ئەوە ئەرکێکی قورس نییە — بەڵام هەڵبژاردنی ڕەنگێکی جیاوازی ئەساس پێویستی بە دروستکردنی کۆمەڵەیەکی تەواو نوێی سێبەر و ڕەنگ هەیە. ئەنجامدانی ئەو کارە بە دەست، دووبارە و دووبارە، بە خێرایی دەبێتە شتێکی ماندووکردن.
باسی HSLم کرد — H (ڕەنگ)، S (تێربوون)، و L (سووکیی) — فەزای ڕەنگەکان، بەڵام ئەوە تەنها یەکێکە لە چەند ڕێگەیەک بۆ وەسفکردنی ڕەنگ. RGB — R (سوور)، G (سەوز)، B (شین) — ڕەنگە ئاشناترین بێت، لانیکەم لە فۆڕمی Hex ی خۆیدا. هەروەها مۆدێلی 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: /* ڕەنگی بناغە */ --بناغە: #5acccd6؛
هەر ڕەنگێک لێی وەرگیرابێت بە شێوەیەکی ئۆتۆماتیکی دەگۆڕێت بۆ OKLCH: --بناغە-ڕووناکی: oklch(لە var(--بناغە) [...]; } --foundation-mid: oklch(لە var(--بناغە) [...]; } --بناغە-تاریک: oklch(لە var(--بناغە) [...]; }
ڕەنگی ڕێژەیی وەک سیستەمێکی دیزاین بیر لە ڕەنگی ڕێژەیی بکەرەوە وەک ئەوەی بڵێیت: “ئەم ڕەنگە وەربگرە، تویکەکەی بکە، پاشان ئەنجامەکەیم پێ بدە.” دوو ڕێگا هەیە بۆ ڕێکخستنی ڕەنگێک: گۆڕانکاری ڕەها و گۆڕانکاری ڕێژەیی. لە کۆددا لەیەک دەچن، بەڵام زۆر جیاواز ڕەفتار دەکەن کاتێک دەست دەکەیت بە گۆڕینەوەی ڕەنگی ئەساس. تێگەیشتن لەو جیاوازییە ئەوەیە کە دەتوانێت بەکارهێنانی ڕەنگی ڕێژەیی بکاتە سیستەمێک. /* ڕەنگی بناغە */ --بناغە: #5acccd6؛
بۆ نموونە بەهای سووکایەتی ڕەنگی ئەساسەکەم 0.7837 یە، لەکاتێکدا وەشانی تۆختر بەهای 0.5837 یە. بۆ حیسابی جیاوازییەکە، بەهای خوارەوە لە بەهای بەرزتر کەم دەکەمەوە و ئەنجامەکە بە بەکارهێنانی فەنکشنی calc() جێبەجێ دەکەم: --بناغە-تاریک: oklch(لە var(--دامەزراوە) calc(l - 0.20) c h);
بۆ بەدەستهێنانی ڕەنگێکی سووکتر، لەبری ئەوە جیاوازییەکە زیاد دەکەم: --بناغە-ڕووناکی: oklch(لە var(--دامەزراوە) calc(l + 0.10) c h);
کرۆماڕێکخستنەکان هەمان پرۆسە پەیڕەو دەکەن. بۆ کەمکردنەوەی چڕی ڕەنگی ئەساسەکەم لە 0.1035 بۆ 0.0035، بەهایەک لە بەهاکەی تر کەم دەکەمەوە: oklch(لە var(--دامەزراوە) l calc (c - 0.10) h);
بۆ دروستکردنی پالێتێکی ڕەنگەکان، جیاوازی نێوان بەهای ڕەنگی ڕەنگی ئەساسەکەم (٢٠٠) و ڕەنگی نوێم (٢٦٠) حیساب دەکەم: oklch(لە var(--دامەزراوە) l c calc (h + 60));
ئەو حیساباتانە ڕەهان. کاتێک بڕە پارەیەکی دیاریکراو کەم دەکەمەوە، بە شێوەیەکی کاریگەر دەڵێم، “هەمیشە ئەم بڕە کەم بکەرەوە.” هەمان شت لە کاتی زیادکردنی بەها جێگیرەکاندا دەگونجێت: calc(c - 0.10) calc(c + 0.10)
من بە ڕێگای سەخت سنووری ئەم ڕێبازەم فێر بوو. کاتێک پشتم بە کەمکردنەوەی بەها جێگیرەکانی کرۆما دەبەست، هەر کە بناغەم گۆڕی ڕەنگەکان بەرەو خۆڵەمێشی داڕما. پالێتێک کە بۆ ڕەنگێک کاردەکات بۆ ڕەنگێکی تر لەیەکتر کەوت. چەسپاندن ڕەفتارێکی جیاواز دەکات. کاتێک کرۆما چەند هێندە دەکەم، بە وێبگەڕەکە دەڵێم: “چڕی ئەم ڕەنگە بە ڕێژەیەک کەم بکەرەوە.” پەیوەندی نێوان ڕەنگەکان وەک خۆی دەمێنێتەوە، تەنانەت کاتێک بناغەکە دەگۆڕێت: calc(c * 0.10)
یاساکانی من Move It، Scale It، Rotate It
سووکایەتی بجوڵێنە (زیادکردن یان کەمکردنەوە)، کرۆمای پێوەر (چەندکردنەوە)، ڕەنگەکە بسووڕێنە (پلەکان زیاد بکە یان کەم بکەرەوە).
من کرۆما پێوانە دەکەم چونکە دەمەوێت گۆڕانکارییەکانی چڕی ڕێژەیی بمێنێتەوە لەگەڵ ڕەنگی بنەڕەتی. پەیوەندییەکانی ڕەنگ خولانەوەین، بۆیە چەسپاندنی ڕەنگ هیچ مانایەکی نییە. سووکایەتی هەستکردن و ڕەهایە — زۆرجار چەند هێندەکردنی ئەنجامە نامۆکان بەرهەم دەهێنێت.
لە یەک ڕەنگەوە بۆ تەواوی تەوەرێک ڕەنگی ڕێژەیی ڕێگەم پێدەدات ڕەنگێکی ئەساس پێناسە بکەم و هەموو ڕەنگێکی تر کە پێویستم پێیەتی - پڕکردنەوە، لێدان، وەستانی گرادێنت، سێبەر - لێیەوە دروست بکەم. لەو کاتەدا ڕەنگ واز لە پالێت دەهێنێت و دەست دەکات بە سیستەم بوون. وێناکردنی SVG مەیلیان هەیە هەمان چەند ڕەنگێک لە سەرانسەری پڕکردنەوە، لێدان و گرادێنتەکاندا بەکاربهێننەوە. ڕەنگی ڕێژەیی ڕێگەت پێدەدات جارێک ئەو پەیوەندییانە پێناسە بکەیت و لە هەموو شوێنێک بەکاریان بهێنیتەوە — زۆر وەک چۆن ئەنیمەیتەرەکان پاشبنەمایان بەکارهێنایەوە بۆ دروستکردنی دیمەنی نوێ.
جارێک ڕەنگی ئەساسەکە بگۆڕە، هەر ڕەنگێکی وەرگیراو بە شێوەیەکی ئۆتۆماتیکی نوێ دەبێتەوە، بەبێ ئەوەی هیچ شتێک بە دەست حیساب بکەیتەوە. لە دەرەوەی گرافیکی ئەنیمەیشن، دەتوانم هەمان ئەم ڕێگایە بەکاربهێنم بۆ پێناسەکردنی ڕەنگەکان بۆ دۆخی توخمە کارلێککارەکانی وەک دوگمە و بەستەر. ڕەنگی ئەساسەکە کە لە ناونیشانی تون “Lullabye-Bye Bear” ـمدا بەکاری هێناوە شینێکی سیانییە. باکگراوندەکە گرادێنتێکی تیشکییە لە نێوان ئەساسەکەم و وەشانی تاریکتر.
بۆ دروستکردنی وەشانی بەدیل بە مەزاجێکی تەواو جیاوازەوە، تەنها پێویستە ڕەنگی ئەساسەکە بگۆڕم: --بناغە: #5acccd6؛ --grad-end: var(--بناغە)؛ --grad-start: oklch(لە var(--دامەزراوە) calc (l - 0.2357) calc (c * 0.833) h);
بۆ بەستنەوەی ئەو تایبەتمەندییە تایبەتمەندانە بە SVG گرادێنتەکەمەوە بەبێ دووبارەکردنەوەی بەهاکانی ڕەنگ، بەهاکانی ڕەنگی وەستانی کۆدکراوی ڕەقم بە ستایلەکانی ناو هێڵ گۆڕی:
<ڕێگا پڕکردنەوە="url(#bg-grad)" پڕکردنەوە="#5DCDD8" d="[...]"/>
دواتر پێویستم بە دڵنیابوون بوو لەوەی کە دەقی تونەکەم هەمیشە جیاوازە لەگەڵ هەر ڕەنگێکی ئەساس کە هەڵیبژێرم. خولانەوەی ڕەنگی 180 پلە ڕەنگێکی تەواوکەر بەرهەم دەهێنێت کە بە دڵنیاییەوە پۆپ دەکات — بەڵام دەتوانێت بە ناڕەحەتی لەرزین: .دەق-ڕووناکی { پڕکردنەوە: oklch(لە var(--دامەزراوە) l c calc (h + 180)); }
گۆڕینی 90° ڕەنگێکی لاوەکی زیندوو بەرهەم دەهێنێت بەبێ ئەوەی بە تەواوی تەواوکەر بێت: .دەق-ڕووناکی { پڕکردنەوە: oklch(لە var(--دامەزراوە) l c calc (h - 90)); }
کات بەسەربردنەکەم لە Quick Draw McGraw’s 1959 Toon Title “El Kabong“ هەمان تەکنیکەکان بەکاردەهێنێت بەڵام بە پالێتێکی جۆراوجۆرتر. بۆ نموونە، گرادێنتێکی تری تیشکی لە نێوان ڕەنگی ئەساسەکە و سێبەرێکی تۆختردا هەیە.
بینا و دارەکە لە پاشبنەمادا بە سادەیی سێبەری جیاوازی هەمان ڕەنگی بناغەیە. بۆ ئەو ڕێگایانە، پێویستم بە دوو ڕەنگی پڕکردنەوەی زیادە بوو: .bg-mid { پڕکردنەوە: oklch(لە var(--دامەزراوە) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { پڕکردنەوە: oklch(لە var(--دامەزراوە) calc(l - 0.12) calc (c * 0.64) h); }
کاتێک بناغەکان دەست دەکەن بە جوڵە تا ئێستا هەموو ئەو شتانەی کە نیشانم داوە ئیستاتیک بوون. تەنانەت کاتێک کەسێک ڕەنگ هەڵگر بەکاردەهێنێت بۆ گۆڕینی ڕەنگی ئەساسەکە، ئەو گۆڕانکارییە دەستبەجێ ڕوودەدات. بەڵام گرافیکە ئەنیمەیشنەکان بە دەگمەن لە شوێنی خۆیان وەستاون — ئاماژەکە لە ناوەکەدایە. کەواتە، ئەگەر ڕەنگ بەشێک بێت لە سیستەمەکە، هیچ هۆکارێک نییە کە نەتوانێت ئەنیمەیشنی بکات، هەروەها. بۆ ئەنیمەیشنکردنی ڕەنگی ئەساسەکە، سەرەتا پێویستە دابەشی بکەم بۆ کەناڵەکانی OKLCH ی خۆی— سووکایەتی، کرۆما و ڕەنگ. بەڵام هەنگاوێکی گرنگی زیادە هەیە: پێویستە ئەو بەهایانە وەک تایبەتمەندی تایبەتمەند تۆمار بکەم. بەڵام ئەوە مانای چییە؟ بە شێوەیەکی بنەڕەتی، وێبگەڕێک نازانێت کە ئایا بەهای تایبەتمەندی تایبەتمەندی CSS نوێنەرایەتی ڕەنگ، درێژی، ژمارە، یان شتێکی تر بە تەواوی دەکات. زۆرجار ئەوە مانای ئەوەیە کە ناتوانرێت بە شێوەیەکی ڕێک و پێک لە کاتی ئەنیمەیشندا ئینتەرپۆل بکرێن، و لە بەهایەکەوە بۆ بەهایەکی تر باز بدەن. تۆمارکردنی تایبەتمەندییەکی تایبەت بە وێبگەڕەکە دەڵێت جۆری بەهاکە کە نوێنەرایەتی دەکات و چۆن دەبێت بە تێپەڕبوونی کات ڕەفتار بکات. لەم حاڵەتەدا دەمەوێت وێبگەڕەکە وەک ژمارە مامەڵە لەگەڵ کەناڵە ڕەنگاوڕەنگەکانم بکات بۆ ئەوەی بتوانرێت بە شێوەیەکی ڕێک و پێک ئەنیمەیشن بکرێن. @تایبەتمەندی --f-l { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 0.40؛ }
@تایبەتمەندی --f-c { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 0.11؛ }
@خاوەن --f-h { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 305؛ }
کاتێک تۆمار دەکرێن، ئەم تایبەتمەندییە تایبەتمەندانە وەک CSS ڕەسەن ڕەفتار دەکەن. وێبگەڕ دەتوانێت چوارچێوە بە چوارچێوە ئینتەرپۆلیان بکات. پاشان ڕەنگی بناغەکە لەو کەناڵانە دروست دەکەمەوە: --بناغە: oklch (var (--f-l) var (--f-c) var (--f-h));
ئەمەش وا دەکات ڕەنگی بناغەکە ببێتە شتێکی ئەنیمەیشن، هەروەک هەر بەهایەکی ژمارەیی تر. لێرەدا ئەنیمەیشنێکی سادەی “هەناسەدان” هەیە کە بە نەرمی سووکایەتی دەگۆڕێت بە تێپەڕبوونی کات: @keyframes هەناسە دەدەن { 0%، 100% { --f-l: 0.36؛ } 50% { --f-l: 0.46؛ } }
.toon-ناونیشانی { ئەنیمەیشن: هەناسەدان 10s ئاسانکاری-لە دەرەوە بێکۆتایی؛ }
چونکە هەموو ڕەنگێکی تر لە پڕکردنەوە و گرادێنت و زەربەدا لە --foundation وەرگیراوە، هەموویان پێکەوە ئەنیمەیشن دەبن، و هیچ شتێک پێویست ناکات بە دەستی نوێ بکرێتەوە. یەک ڕەنگی ئەنیمەیشن، کاریگەری زۆر لە سەرەتای ئەم پرۆسەیەدا، من پرسیارم کرد کە ئایا بەهاکانی ڕەنگی ڕێژەیی CSS دەتوانن ئەگەری زیاتر پێشکەش بکەن لە هەمان کاتدا جێبەجێکردنیان سادەتر بکەن. بەم دواییە باکگراوندێکی نوێی کانگای زێڕم زیاد کرد بۆ لاپەڕەی پەیوەندییەکانی ماڵپەڕەکەم، و یەکەم دووبارەکردنەوە چرای ڕۆنی لەخۆگرتبوو کە دەدرەوشێنەوە و دەسوڕێنەوە.
من ویستم لێکۆڵینەوە بکەم کە چۆن ئەنیمەیشنی ڕەنگە ڕێژەییەکانی CSS دەتوانێت ناوەوەی کانەکە واقیعیتر بکات بە ڕەنگکردنی بە ڕەنگەکانی چراکان. من ویستم کاریگەرییان لەسەر جیهانی دەوروبەریان هەبێت، بەو شێوەیەی کە ڕووناکی ڕاستەقینە دەیکات. بۆیە، لەبری ئەوەی چەندین ڕەنگ ئەنیمەیشن بکەم، سیستەمێکی بچووکی ڕووناکیم دروستکرد کە تەنها یەک ڕەنگ ئەنیمەیشن دەکات.
یەکەم ئەرکم ئەوە بوو کە چینێکی سەرپۆش لە نێوان پاشبنەما و چراکانمدا دابنێم: <ڕێگا id="سەرپۆش" fill="var(--ڕەنگی سەرپۆش)" [...] style="شێوازی تێکەڵاو-تێکەڵکردن: ڕەنگ". />
من mix-blend-modeم بەکارهێنا: ڕەنگ چونکە ئەوە ڕەنگکردنی ئەوەی لە ژێرەوەیەتی لەکاتێکدا ڕووناکی بنەڕەتی دەپارێزێت. وەک چۆن من تەنها دەمەوێت ئۆڤەرلایەکە دیار بێت کاتێک ئەنیمەیشنەکان داگیرسێنرێن، من ئۆڤەرلەی ئۆپت-ئینم کرد: .svg-mine #سەرپۆش { پیشاندانی: هیچ؛ }
@media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { .svg-mine[data-animations=on] #overlay { پیشاندانی: بلۆک؛ ناڕوونی: 0.5؛ } }
سەرپۆشەکە لە شوێنی خۆیدا بوو، بەڵام هێشتا بە چراکانەوە نەبەسترابووەوە. پێویستم بە سەرچاوەی ڕووناکی بوو. چراکانم سادەن و هەریەکەیان توخمێکی بازنەیی تێدایە کە بە فلتەرێک کاڵم کردۆتەوە. فلتەرەکە کاڵبوونەوەیەکی زۆر نەرم بەسەر تەواوی بازنەکەدا بەرهەم دەهێنێت.
لەبری ئەوەی ئۆڤەرلەی و لامپەکان بە جیا ئەنیمەیشن بکەم، یەک نیشانەی ڕەنگی “بڵقە” ئەنیمەیشن دەکەم و هەموو شتێکی تر لەوە وەردەگرم. سەرەتا سێ تایبەتمەندی تایبەتمەند تایپکراو بۆ کەناڵەکانی OKLCH تۆمار دەکەم: @تایبەتمەندی --fl-l { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 0.86؛ } @تایبەتمەندی --fl-c { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 0.12؛ } @خاوەن --fl-h { ڕستەسازی: "<ژمارە>"; میرات دەگرێت: ڕاست؛ بەهای سەرەتایی: 95؛ }
من ئەو کەناڵانەم ئەنیمەیشن کرد، بە ئەنقەست چەند چوارچێوەیەکم بەرەو پرتەقاڵی پاڵنا تا چرپاندنەکە بە ڕوونی وەک ڕووناکی ئاگر بخوێنرێتەوە:
@keyframes بڵێسەی { 0%، 100% { --fl-l: 0.86؛ --fl-c: 0.12؛ --fl-h: 95؛ } 6% { --fl-l: 0.91؛ --fl-c: 0.10؛ --fl-h: 92؛ } 12% { --fl-l: 0.83؛ --fl-c: 0.14؛ --fl-h: 100؛ } 18% { --fl-l: 0.88؛ --fl-c: 0.11؛ --fl-h: 94؛ } 24% { --fl-l: 0.82؛ --fl-c: 0.16؛ --fl-h: 82؛ } 30% { --fl-l: 0.90؛ --fl-c: 0.12؛ --fl-h: 90؛ } 36% { --fl-l: 0.79؛ --fl-c: 0.17؛ --fl-h: 76؛ } 44% { --fl-l: 0.87؛ --fl-c: 0.12؛ --fl-h: 96؛ } 52% { --fl-l: 0.81؛ --fl-c: 0.15؛ --fl-h: 102؛ } 60% { --fl-l: 0.89؛ --fl-c: 0.11؛ --fl-h: 93؛ } 68% { --fl-l: 0.83؛ --fl-c: 0.16؛ --fl-h: 85؛ } 76% { --fl-l: 0.91؛ --fl-c: 0.10؛ --fl-h: 91؛ } 84% { --fl-l: 0.85؛ --fl-c: 0.14؛ --fl-h: 98؛ } 92% {--fl-l: 0.80؛ --fl-c: 0.17؛ --fl-h: 74؛ } }
پاشان ئەو ئەنیمەیشنەم بۆ SVG سکۆپ کرد، بۆیە گۆڕاوە هاوبەشەکان بۆ هەردوو لامپەکە و ئۆڤەرلایەکەم بەردەستن:
@media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { .svg-mine[داتا-ئەنیمەیشنەکان=لەسەر] { ئەنیمەیشن: بڵێسەی 3.6s بێکۆتایی هێڵی؛ دابڕان: دابڕان؛
/* دروستکردنی ڕەنگی بڵێسە لە کەناڵە ئەنیمەیشنەکانەوە */ -- بڵێسە: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* ڕەنگی چراکە لە بڵێسەی ئاگرەوە وەرگیراوە */ --lamp-core: oklch (لە var (-- بڵێسە) calc (l + 0.05) calc (c * 0.70) h);
/* ڕەنگی سەرپۆش کە لە هەمان بڵێسەی ئاگرەوە وەرگیراوە */ --overlay-tint: oklch(لە var(-- بڵێسە) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
لە کۆتاییدا ئەو ڕەنگە وەرگیراوانەم بەکارهێنا بۆ لامپە درەوشاوەکان و ئەو سەرپۆشەی کە کاریگەرییان لەسەرە: @media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { .svg-mine[data-animations=on] #mine-lamp-1 > بازنە، .svg-mine[data-animations=on] #min-lamp-2 > بازنە { پڕکردنەوە: var(--ناوکی چرا); }
.svg-mine[data-animations=on] #overlay { پیشاندانی: بلۆک؛ پڕکردنەوە: var(--overlay-tint); ناڕوونی: 0.5؛ } }
کاتێک بڵێسەی ئاگرەکە بەرەو پرتەقاڵی دەگۆڕێت، چراکان گەرم دەبنەوە و دیمەنەکەش لەگەڵیان گەرم دەبێت. کاتێک بڵێسەی ئاگرەکە سارد دەبێتەوە، هەموو شتێک پێکەوە جێگیر دەبێت. باشترین بەش ئەوەیە کە هیچ شتێک بە دەستی نەنووسراوە. ئەگەر ڕەنگی ئەساسەکە بگۆڕم یان مەودای ئەنیمەیشنی بڵێسەی بڵێسەم تویک بکەم، ئەوا تەواوی سیستەمی ڕووناکی لە یەک کاتدا نوێ دەبێتەوە. دەتوانن ئەنجامی کۆتایی لە ماڵپەڕەکەم ببینن. دووبارە بەکارهێنانەوە، دووبارە بەکارهێنانەوە، سەردانکردنەوە ئەو ئەنیمەیتەرە هانا-باربێرایانە بەهۆی پێویستییەوە ناچار بوون توخمەکان بە مەبەستی دووبارە بەکاربهێننەوە، بەڵام من ڕەنگەکان بەکاردەهێنمەوە چونکە کارەکانم یەکگرتووتر و ئاسانتر دەکات بۆ پاراستن. بەهاکانی ڕەنگی ڕێژەیی CSS ڕێگەم پێدەدەن:
یەک ڕەنگی ئەساس پێناسە بکە، باسی ئەوە بکە کە ڕەنگەکانی تر چۆن پەیوەندییان پێوەیە، ئەو پەیوەندیانە لە هەموو شوێنێک بەکاری بهێننەوە، و... سیستەمەکە ئەنیمەیشن بکە بە گۆڕینی یەک بەها.
ڕەنگی ڕێژەیی تەنها تێمکردن ئاسانتر ناکات. هانی شێوازێکی بیرکردنەوە دەدات کە ڕەنگ وەک جووڵە بە مەبەست بێت — و گۆڕینی بەهایەک دەتوانێت تەواوی دیمەنێک بگۆڕێت بەبێ ئەوەی کارەکەی ژێرەوەی بنووسێتەوە.
