இந்தத் தொடரில் நான் பகிர்ந்து கொண்ட ஏராளமான நுட்பங்களை நடைமுறைக்குக் கொண்டு, புதிய தீம் மற்றும் முன்னோடி கதாபாத்திரங்களின் குழுவுடன் எனது இணையதளத்தில் அனிமேஷன் செய்யப்பட்ட கிராபிக்ஸ்களை சமீபத்தில் புதுப்பித்துள்ளேன். எனது சில அனிமேஷன்கள் யாரோ அவர்களுடன் தொடர்பு கொள்ளும்போது அல்லது நாளின் வெவ்வேறு நேரங்களில் தோற்றத்தை மாற்றுகின்றன.
எனது வலைப்பதிவு பக்கங்களில் உள்ள கிராஃபிக் வண்ணங்கள் ஒவ்வொரு நாளும் காலை முதல் இரவு வரை மாறும். பின்னர், பனிப் பயன்முறை உள்ளது, இது குளிர்ச்சியான வண்ணங்களையும் குளிர்கால தீமையும் சேர்க்கிறது, மேலடுக்கு அடுக்கு மற்றும் கலவை பயன்முறையின் மரியாதை.
இதில் பணிபுரியும் போது, CSS தொடர்புடைய வண்ண மதிப்புகள், செயல்முறையை எளிதாக்கும் போது எனக்கு அதிக கட்டுப்பாட்டை தருமா என்று யோசிக்க ஆரம்பித்தேன். குறிப்பு: இந்த டுடோரியலில், நான் தொடர்புடைய வண்ண மதிப்புகள் மற்றும் தீமிங் கிராபிக்ஸ் மற்றும் அனிமேஷன்களுக்கான OKLCH வண்ண இடைவெளியில் கவனம் செலுத்துவேன். நீங்கள் உறவினர் நிறத்தில் ஆழமாக மூழ்க விரும்பினால், அஹ்மத் ஷதீத் ஒரு சிறந்த ஊடாடும் வழிகாட்டியை உருவாக்கினார். வண்ண இடைவெளிகள், வரம்புகள் மற்றும் OKLCH ஆகியவற்றைப் பொறுத்தவரை, எங்கள் சொந்த ஜெஃப் கிரஹாம் அவற்றைப் பற்றி எழுதினார்.
உறுப்புகளை மீண்டும் மீண்டும் பயன்படுத்துவது முக்கியமானது. முடிந்த போதெல்லாம் பின்னணிகள் மீண்டும் பயன்படுத்தப்பட்டன, அதே கலைப்படைப்பிலிருந்து புதிய காட்சிகளை உருவாக்குவதற்கு பெரிதாக்குதல் மற்றும் மேலடுக்குகள் உதவுகின்றன. இது தேவையால் பிறந்தது, ஆனால் இது தனிப்பட்ட காட்சிகளை விட தொடர் அடிப்படையில் சிந்திக்கவும் ஊக்கப்படுத்தியது. வண்ணத் தட்டுகளை கைமுறையாகப் புதுப்பிப்பதில் சிக்கல் நேராக எனது சவாலுக்கு வருவோம். இது போன்ற டூன் தலைப்புகளில் — 1959 யோகி பியர் ஷோ எபிசோட் “Lullabye-Bye Bear”-ஐ அடிப்படையாகக் கொண்டது — மற்றும் பொதுவாக எனது பணி, தட்டுகள் தேர்ந்தெடுக்கப்பட்ட சில வண்ணங்களுக்கு மட்டுமே.
மேலும் சாயல்களைச் சேர்க்காமல் தட்டுகளை விரிவுபடுத்த, எனது "அடித்தளம்" வண்ணம் என்று நான் அழைப்பதில் இருந்து நிழல்கள் மற்றும் சாயல்களை உருவாக்குகிறேன்.
ஸ்கெட்சில், நான் எச்எஸ்எல் கலர் ஸ்பேஸில் வேலை செய்கிறேன், எனவே இந்தச் செயல்பாட்டில் எனது அடித்தள நிறத்தின் லேசான மதிப்பை அதிகரிப்பது அல்லது குறைப்பது ஆகியவை அடங்கும். நேர்மையாக, இது கடினமான பணி அல்ல - ஆனால் வேறுபட்ட அடித்தள நிறத்தைத் தேர்ந்தெடுப்பதற்கு முற்றிலும் புதிய நிழல்கள் மற்றும் சாயல்களை உருவாக்க வேண்டும். அதை கைமுறையாக, மீண்டும் மீண்டும் செய்வது, விரைவில் உழைப்பாகிறது.
நான் HSL - H (சாயல்), S (நிறைவு) மற்றும் L (இளர்வு) - வண்ண இடத்தைக் குறிப்பிட்டேன், ஆனால் இது நிறத்தை விவரிக்கும் பல வழிகளில் ஒன்றாகும். RGB - R (சிவப்பு), G (பச்சை), B (நீலம்) - குறைந்தபட்சம் அதன் ஹெக்ஸ் வடிவத்தில் மிகவும் பரிச்சயமானது. LAB - L (இளர்வு), A (பச்சை-சிவப்பு), B (நீலம்-மஞ்சள்) - மற்றும் புதியது, ஆனால் இப்போது பரவலாக ஆதரிக்கப்படும் LCH - L (லேசான தன்மை), C (குரோமா), H (சாயல்) - மாதிரியும் அதன் OKLCH வடிவத்தில் உள்ளது. LCH உடன் - குறிப்பாக CSS இல் OKLCH - எனது அடித்தள நிறத்தின் லேசான மதிப்பை என்னால் சரிசெய்ய முடியும்.
அல்லது நான் அதன் நிறத்தை மாற்ற முடியும். LCH குரோமா மற்றும் HSL செறிவு இரண்டும் ஒரு நிறத்தின் தீவிரம் அல்லது செழுமையை விவரிக்கின்றன, ஆனால் அவை வெவ்வேறு வழிகளில் செய்கின்றன. LCH எனக்கு ஒரு பரந்த வரம்பையும், வண்ணங்களுக்கிடையே கணிக்கக்கூடிய கலவையையும் வழங்குகிறது.
அதே லேசான தன்மை மற்றும் குரோமா மதிப்புகளைப் பகிர்ந்து கொள்ளும் வண்ணங்களின் தட்டுகளை உருவாக்க நான் சாயலையும் மாற்ற முடியும். HSL மற்றும் LCH இரண்டிலும், சாயல் நிறமாலை சிவப்பு நிறத்தில் தொடங்கி, பச்சை மற்றும் நீலம் வழியாக நகர்ந்து, சிவப்பு நிறத்திற்குத் திரும்பும்.
ஏன் OKLCH ஆனது நான் நிறத்தைப் பற்றி நினைக்கும் விதத்தை மாற்றியது OKLCH வண்ண இடத்திற்கான உலாவி ஆதரவு இப்போது பரவலாக உள்ளது, வடிவமைப்பு கருவிகள் - ஸ்கெட்ச் உட்பட - பிடிக்காவிட்டாலும் கூட. அதிர்ஷ்டவசமாக, இது OKLCH ஐப் பயன்படுத்துவதைத் தடுக்காது. உலாவிகள் உங்களுக்காக Hex, HSL, LAB மற்றும் RGB மதிப்புகளை OKLCH ஆக மாற்றும். ஹெக்ஸ் உட்பட எந்த இடத்திலும் அடித்தள நிறத்துடன் CSS தனிப்பயன் சொத்தை நீங்கள் வரையறுக்கலாம்: /* அடித்தள நிறம் */ --அடித்தளம்: #5accd6;
அதிலிருந்து பெறப்பட்ட எந்த நிறங்களும் தானாகவே OKLCH ஆக மாற்றப்படும்: --foundation-light: oklch(var(--foundation) இலிருந்து [...]; } --Foundation-mid: oklch(var(--foundation) இலிருந்து [...]; } --foundation-dark: oklch(var(--foundation) இலிருந்து [...]; }
ஒரு வடிவமைப்பு அமைப்பாக தொடர்புடைய நிறம் "இந்த நிறத்தை எடுத்துக் கொள்ளுங்கள், அதை மாற்றியமைத்து, அதன் முடிவை எனக்குக் கொடுங்கள்" என்று கூறுவது போல் தொடர்புடைய நிறத்தை நினைத்துப் பாருங்கள். ஒரு நிறத்தை சரிசெய்ய இரண்டு வழிகள் உள்ளன: முழுமையான மாற்றங்கள் மற்றும் விகிதாசார மாற்றங்கள். அவை குறியீட்டில் ஒரே மாதிரியானவை, ஆனால் அடித்தள வண்ணங்களை மாற்றத் தொடங்கியவுடன் மிகவும் வித்தியாசமாக நடந்துகொள்கின்றன. அந்த வேறுபாட்டைப் புரிந்துகொள்வதுதான் உறவினர் நிறத்தைப் பயன்படுத்தி ஒரு அமைப்பாக மாற்ற முடியும். /* அடித்தள நிறம் */ --அடித்தளம்: #5accd6;
எடுத்துக்காட்டாக, எனது அடித்தள நிறத்தின் லேசான மதிப்பு 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);
சாயல்களின் தட்டுகளை உருவாக்க, எனது அடித்தள நிறத்தின் சாயல் மதிப்பிற்கும் (200) எனது புதிய சாயலுக்கும் (260) உள்ள வித்தியாசத்தைக் கணக்கிடுகிறேன்: oklch(var(--அடித்தளத்திலிருந்து) l c calc(h + 60));
அந்த கணக்கீடுகள் முழுமையானவை. நான் ஒரு நிலையான தொகையைக் கழிக்கும்போது, "எப்போதும் இதை அதிகம் கழிக்கவும்" என்று திறம்படச் சொல்கிறேன். நிலையான மதிப்புகளைச் சேர்க்கும்போது இது பொருந்தும்: calc(c - 0.10) calc(c + 0.10)
இந்த அணுகுமுறையின் வரம்புகளை நான் கடினமான வழியில் கற்றுக்கொண்டேன். நிலையான குரோமா மதிப்புகளைக் கழிப்பதில் நான் தங்கியிருந்தபோது, அடித்தளத்தை மாற்றியவுடன் வண்ணங்கள் சாம்பல் நிறத்தில் சரிந்தன. ஒரு வண்ணத்திற்கு வேலை செய்யும் தட்டு மற்றொன்றுக்கு பிரிந்தது. பெருக்கல் வித்தியாசமாக செயல்படுகிறது. நான் குரோமாவைப் பெருக்கும்போது, நான் உலாவியிடம் சொல்கிறேன்: "இந்த நிறத்தின் தீவிரத்தை ஒரு விகிதத்தில் குறைக்கவும்." அடித்தளம் மாறினாலும், நிறங்களுக்கிடையேயான உறவு அப்படியே இருக்கும்: calc(c * 0.10)
மை மூவ் இட், ஸ்கேல் இட், ரோடேட் இட் ரூல்ஸ்
லேசான தன்மையை நகர்த்தவும் (சேர்க்கவும் அல்லது கழிக்கவும்), குரோமா அளவை (பெருக்கி), சாயலைச் சுழற்று (டிகிரிகளைச் சேர்க்கவும் அல்லது கழிக்கவும்).
நான் குரோமாவை அளவிடுகிறேன், ஏனெனில் தீவிரத்தன்மை மாற்றங்கள் அடிப்படை நிறத்திற்கு விகிதாசாரமாக இருக்க வேண்டும். சாயல் உறவுகள் சுழற்சியானவை, எனவே சாயலைப் பெருக்குவதில் அர்த்தமில்லை. இலகுவானது புலனுணர்வு மற்றும் முழுமையானது - அதைப் பெருக்குவது பெரும்பாலும் ஒற்றைப்படை முடிவுகளைத் தருகிறது.
ஒரு வண்ணத்திலிருந்து முழு தீம் வரை சார்பு நிறமானது அடித்தள நிறத்தை வரையறுத்து எனக்கு தேவையான மற்ற எல்லா வண்ணங்களையும் உருவாக்க அனுமதிக்கிறது - நிரப்புதல், பக்கவாதம், சாய்வு நிறுத்தங்கள், நிழல்கள் - அதிலிருந்து. அந்த நேரத்தில், வண்ணம் ஒரு தட்டு என்பதை நிறுத்தி ஒரு அமைப்பாகத் தொடங்குகிறது. SVG விளக்கப்படங்கள் நிரப்புதல்கள், பக்கவாதம் மற்றும் சாய்வுகளில் அதே சில வண்ணங்களை மீண்டும் பயன்படுத்த முனைகின்றன. புதிய காட்சிகளை உருவாக்க, அனிமேட்டர்கள் பின்னணியை மீண்டும் பயன்படுத்துவதைப் போலவே, அந்த உறவுகளை ஒருமுறை வரையறுத்து, எல்லா இடங்களிலும் அவற்றை மீண்டும் பயன்படுத்துவதற்கு உறவினர் வண்ணம் உங்களை அனுமதிக்கிறது.
அடித்தள நிறத்தை ஒருமுறை மாற்றவும், மேலும் ஒவ்வொரு பெறப்பட்ட வண்ணமும் தானாகவே எதையும் கையால் மீண்டும் கணக்கிடாமல் புதுப்பிக்கப்படும். அனிமேஷன் கிராபிக்ஸுக்கு வெளியே, பொத்தான்கள் மற்றும் இணைப்புகள் போன்ற ஊடாடும் கூறுகளின் நிலைகளுக்கு வண்ணங்களை வரையறுக்க இதே அணுகுமுறையைப் பயன்படுத்தலாம். எனது “Lullabye-Bye Bear” Toon தலைப்பில் நான் பயன்படுத்திய அடித்தளத்தின் நிறம் சியான் போல் தோன்றும் நீலம். பின்னணி எனது அடித்தளத்திற்கும் இருண்ட பதிப்பிற்கும் இடையே ஒரு ரேடியல் சாய்வு.
முற்றிலும் மாறுபட்ட மனநிலையுடன் மாற்று பதிப்புகளை உருவாக்க, நான் அடித்தள நிறத்தை மட்டும் மாற்ற வேண்டும்: --அடித்தளம்: #5accd6; --grad-end: var(--Foundation); --grad-start: oklch(var (--Foundation) இலிருந்து calc (l - 0.2357) calc (c * 0.833) h);
வண்ண மதிப்புகளை நகலெடுக்காமல் அந்த தனிப்பயன் பண்புகளை எனது SVG கிரேடியண்டுடன் இணைக்க, கடின-குறியிடப்பட்ட நிறுத்த வண்ண மதிப்புகளை இன்லைன் பாணிகளுடன் மாற்றினேன்:
அடுத்து, எனது டூன் உரை எப்போதும் நான் தேர்ந்தெடுக்கும் அடித்தள நிறத்துடன் முரண்படுவதை உறுதி செய்ய வேண்டும். 180 டிகிரி சாயல் சுழற்சியானது ஒரு நிரப்பு நிறத்தை உருவாக்குகிறது, அது நிச்சயமாக வெளிப்படும் - ஆனால் அசௌகரியமாக அதிர்வுறும்: .text-light { நிரப்பு: oklch(var (--அடித்தளம்) இலிருந்து l c calc(h + 180)); }
ஒரு 90° ஷிஃப்ட் முழுமையாக நிரப்பாமல் ஒரு தெளிவான இரண்டாம் நிலை நிறத்தை உருவாக்குகிறது: .text-light { நிரப்பு: oklch(var (--அடித்தளம்) இலிருந்து l c calc(h - 90)); }
Quick Draw McGraw இன் 1959 டூன் தலைப்பு "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 தனிப்பயன் சொத்து மதிப்பு நிறம், நீளம், எண் அல்லது வேறு எதையாவது முழுமையாகக் குறிக்கிறதா என்பதை உலாவிக்குத் தெரியாது. அனிமேஷனின் போது அவற்றை சீராக இடைக்கணிக்க முடியாது, மேலும் ஒரு மதிப்பிலிருந்து அடுத்த மதிப்பிற்கு தாவ முடியாது. தனிப்பயன் சொத்தை பதிவு செய்வது, அது பிரதிபலிக்கும் மதிப்பின் வகை மற்றும் காலப்போக்கில் அது எவ்வாறு நடந்து கொள்ள வேண்டும் என்பதை உலாவிக்கு தெரிவிக்கிறது. இந்தச் சந்தர்ப்பத்தில், உலாவி எனது வண்ணச் சேனல்களை எண்களாகக் கருத வேண்டும், அதனால் அவை சீராக அனிமேஷன் செய்யப்படும். @property --f-l { தொடரியல்: "<எண்>"; பரம்பரை: உண்மை; ஆரம்ப மதிப்பு: 0.40; }
@property --f-c { தொடரியல்: "<எண்>"; பரம்பரை: உண்மை; ஆரம்ப மதிப்பு: 0.11; }
@property --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-title { அனிமேஷன்: 10 வினாடிகளை ஈஸ்-இன்-அவுட் எல்லையற்ற சுவாசிக்கவும்; }
நிரப்புதல்கள், சாய்வுகள் மற்றும் பக்கவாதம் ஆகியவற்றில் உள்ள மற்ற எல்லா வண்ணங்களும் --அடிப்படையில் இருந்து பெறப்பட்டவை, அவை அனைத்தும் ஒன்றாக அனிமேட் செய்யப்படுகின்றன, மேலும் எதையும் கைமுறையாக புதுப்பிக்க வேண்டியதில்லை. ஒரு அனிமேஷன் நிறம், பல விளைவுகள் இந்தச் செயல்பாட்டின் தொடக்கத்தில், CSS சார்புடைய வண்ண மதிப்புகள் அதிக சாத்தியக்கூறுகளை வழங்க முடியுமா என்று நான் ஆச்சரியப்பட்டேன். எனது வலைத்தளத்தின் தொடர்புப் பக்கத்தில் நான் சமீபத்தில் ஒரு புதிய தங்கச் சுரங்கப் பின்னணியைச் சேர்த்தேன், முதல் மறு செய்கையில் ஒளிரும் மற்றும் ஊசலாடும் எண்ணெய் விளக்குகள் அடங்கும்.
CSS சார்புடைய வண்ணங்களை அனிமேட் செய்வது எப்படி என்னுடைய உட்புறத்தை விளக்குகளில் இருந்து வண்ணங்களைக் கொண்டு அதை மிகவும் யதார்த்தமாக்குகிறது என்பதை ஆராய விரும்பினேன். உண்மையான ஒளியைப் போலவே, அவர்களைச் சுற்றியுள்ள உலகத்தை அவை பாதிக்க வேண்டும் என்று நான் விரும்பினேன். எனவே, பல வண்ணங்களை அனிமேஷன் செய்வதை விட, ஒரே ஒரு நிறத்தை மட்டுமே அனிமேஷன் செய்யும் சிறிய லைட்டிங் அமைப்பை உருவாக்கினேன்.
எனது முதல் பணியானது, பின்புலத்திற்கும் எனது விளக்குகளுக்கும் இடையில் ஒரு மேலடுக்கு அடுக்கை ஸ்லாட் செய்வதாகும்: <பாதை ஐடி="மேலே" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
நான் மிக்ஸ்-பிளெண்ட்-மோட்: கலரைப் பயன்படுத்தினேன், ஏனெனில் அது ஒளிர்வை பாதுகாக்கும் போது அதன் கீழே உள்ளதை சாயமிடுகிறது. அனிமேஷன்கள் இயக்கப்பட்டிருக்கும் போது மட்டுமே மேலடுக்கு தெரியும்படி இருக்க வேண்டும் என நான் விரும்புவதால், மேலடுக்கை தேர்வு செய்தேன்: .svg-mine #overlay { காட்சி: எதுவுமில்லை; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { காட்சி: தொகுதி; ஒளிபுகாநிலை: 0.5; } }
மேலடுக்கு இடத்தில் இருந்தது, ஆனால் இன்னும் விளக்குகளுடன் இணைக்கப்படவில்லை. எனக்கு ஒரு ஒளி ஆதாரம் தேவைப்பட்டது. எனது விளக்குகள் எளிமையானவை, ஒவ்வொன்றிலும் வட்ட உறுப்பு உள்ளது, அதை நான் வடிகட்டி மூலம் மங்கலாக்கினேன். வடிகட்டி முழு வட்டத்திலும் மிகவும் மென்மையான மங்கலை உருவாக்குகிறது.
<வடிப்பான் ஐடி = "விளக்கு-பளபளப்பு-1" x = "-120%" y = "-120%" அகலம் = "340%" உயரம் = "340%">
மேலடுக்கு மற்றும் விளக்குகளை தனித்தனியாக அனிமேட் செய்வதற்குப் பதிலாக, நான் ஒரு "ஃபிளேம்" வண்ண டோக்கனை அனிமேட் செய்து அதிலிருந்து எல்லாவற்றையும் பெறுகிறேன். முதலில், OKLCH சேனல்களுக்கு மூன்று தட்டச்சு செய்யப்பட்ட தனிப்பயன் பண்புகளை பதிவு செய்கிறேன்: @property --fl-l { தொடரியல்: "<எண்>"; பரம்பரை: உண்மை; ஆரம்ப மதிப்பு: 0.86; } @property --fl-c { தொடரியல்: "<எண்>"; பரம்பரை: உண்மை; ஆரம்ப மதிப்பு: 0.12; } @property --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 (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animation: flame 3.6s infinite linear; தனிமை: தனிமைப்படுத்தல்;
/* அனிமேஷன் சேனல்களிலிருந்து ஒரு சுடர் வண்ணத்தை உருவாக்குங்கள் */ --சுடர்: 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 (--flame) இலிருந்து calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
இறுதியாக, நான் அந்த பெறப்பட்ட வண்ணங்களை ஒளிரும் விளக்குகள் மற்றும் அவை பாதிக்கும் மேலடுக்கில் பயன்படுத்தினேன்: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > வட்டம், .svg-mine[data-animations=on] #mine-lamp-2 > வட்டம் { நிரப்பு: var (--லேம்ப்-கோர்); }
.svg-mine[data-animations=on] #overlay { காட்சி: தொகுதி; நிரப்பு: var(--overlay-tint); ஒளிபுகாநிலை: 0.5; } }
சுடர் ஆரஞ்சு நிறத்தை நோக்கி நகரும்போது, விளக்குகள் வெப்பமடைகின்றன, மேலும் காட்சி அவற்றுடன் வெப்பமடைகிறது. சுடர் குளிர்ந்தவுடன், எல்லாம் ஒன்றாக குடியேறும். சிறந்த அம்சம் என்னவென்றால், எதுவும் கைமுறையாக எழுதப்படவில்லை. நான் அடித்தள நிறத்தை மாற்றினால் அல்லது சுடர் அனிமேஷன் வரம்புகளை மாற்றினால், முழு லைட்டிங் சிஸ்டமும் ஒரே நேரத்தில் புதுப்பிக்கப்படும். எனது இணையதளத்தில் இறுதி முடிவை நீங்கள் பார்க்கலாம். மறுபயன்பாடு, மறுபயன்பாடு, மறுபார்வை அந்த Hanna-Barbera அனிமேட்டர்கள் தேவையின் காரணமாக கூறுகளை மீண்டும் உருவாக்க வேண்டிய கட்டாயம் ஏற்பட்டது, ஆனால் நான் வண்ணங்களை மீண்டும் பயன்படுத்துகிறேன், ஏனெனில் இது எனது வேலையை மிகவும் சீரானதாகவும் பராமரிக்க எளிதாகவும் செய்கிறது. CSS தொடர்புடைய வண்ண மதிப்புகள் என்னை அனுமதிக்கின்றன:
ஒற்றை அடித்தள நிறத்தை வரையறுக்கவும், மற்ற நிறங்கள் அதனுடன் எவ்வாறு தொடர்புபடுகின்றன என்பதை விவரிக்கவும், எல்லா இடங்களிலும் அந்த உறவுகளை மீண்டும் பயன்படுத்தவும் ஒரு மதிப்பை மாற்றுவதன் மூலம் கணினியை இயக்கவும்.
உறவினர் வண்ணம் தீமிங்கை எளிதாக்குவதில்லை. இயக்கம் போன்ற வண்ணம் வேண்டுமென்றே சிந்திக்கும் வழியை இது ஊக்குவிக்கிறது - மேலும் ஒரு மதிப்பை மாற்றுவது ஒரு முழு காட்சியையும் அதன் கீழே உள்ள வேலையை மீண்டும் எழுதாமல் மாற்றும்.
