მე ახლახან განვაახლე ჩემს ვებსაიტზე ანიმაციური გრაფიკა ახალი თემით და პიონერული პერსონაჟების ჯგუფით, რაც პრაქტიკაში გამოვიყენე ბევრი ტექნიკა, რომელიც მე ვიზიარებდი ამ სერიაში. ჩემი რამდენიმე ანიმაცია იცვლის გარეგნობას, როდესაც ვინმე ურთიერთობს მათთან ან დღის სხვადასხვა დროს.
ჩემი ბლოგის გვერდებზე გრაფიკის ფერები ყოველდღე იცვლება დილიდან საღამომდე. შემდეგ არის თოვლის რეჟიმი, რომელიც ამატებს ცივ ფერებს და ზამთრის თემას, გადაფარვის ფენისა და შერწყმის რეჟიმის წყალობით.
ამაზე მუშაობისას დავიწყე ფიქრი, შეეძლო თუ არა CSS შედარებითი ფერის მნიშვნელობებს მეტი კონტროლი და პროცესის გამარტივება. შენიშვნა: ამ სახელმძღვანელოში მე ყურადღებას გავამახვილებ ფერის შედარებით მნიშვნელობებზე და OKLCH ფერთა სივრცეზე თემატური გრაფიკისა და ანიმაციისთვის. თუ გსურთ ღრმად ჩაყვინთოთ შედარებით ფერში, აჰმად შადიდმა შექმნა შესანიშნავი ინტერაქტიული სახელმძღვანელო. რაც შეეხება ფერთა სივრცეებს, გამებს და OKLCH-ს, მათ შესახებ ჩვენმა ჯეფ გრეჰემმა დაწერა.
მთავარი იყო ელემენტების განმეორებითი გამოყენება. ფონები ხელახლა გამოიყენებოდა შეძლებისდაგვარად, ზუმებითა და გადაფარვებით, რომლებიც ეხმარებოდნენ ახალი სცენების აგებას იმავე ნამუშევრებიდან. ის აუცილებლობით დაიბადა, მაგრამ ასევე ხელს უწყობს აზროვნებას სერიებით და არა ცალკეული სცენებით. ფერი პალიტრების ხელით განახლების პრობლემა მოდით პირდაპირ ჩემს გამოწვევაზე გადავიდეთ. Toon Titles-ში, როგორიცაა ეს - დაფუძნებული 1959 წლის Yogi Bear Show-ის ეპიზოდზე "Lullabye-Bye Bear" - და ზოგადად ჩემს ნამუშევრებში, პალიტრები შემოიფარგლება მხოლოდ რამდენიმე ფერით.
მე ვქმნი ჩრდილებსა და ელფერებს, რასაც მე ვუწოდებ ჩემს "ძირითადი" ფერს, რათა გავაფართოვო პალიტრა მეტი ფერების დამატების გარეშე.
Sketch-ში მე ვმუშაობ HSL ფერთა სივრცეში, ამიტომ ეს პროცესი მოიცავს ჩემი ტონალური ფერის სიმსუბუქის მნიშვნელობის გაზრდას ან შემცირებას. პატიოსნად, ეს არ არის შრომატევადი ამოცანა - მაგრამ განსხვავებული ტონალური ფერის არჩევა მოითხოვს ჩრდილების და ელფერების სრულიად ახალი ნაკრების შექმნას. ამის ხელით გაკეთება, ისევ და ისევ, სწრაფად ხდება შრომატევადი.
მე აღვნიშნე HSL - H (ელფერი), S (გაჯერება) და L (სიმსუბუქე) - ფერთა სივრცე, მაგრამ ეს არის მხოლოდ ერთი რამდენიმე გზა ფერის აღწერისთვის. RGB - R (წითელი), G (მწვანე), B (ლურჯი) - ალბათ ყველაზე ნაცნობია, ყოველ შემთხვევაში მისი Hex ფორმით. ასევე არის LAB - L (სიმსუბუქე), A (მწვანე-წითელი), B (ლურჯი-ყვითელი) - და უფრო ახალი, მაგრამ ახლა ფართოდ მხარდაჭერილი LCH - L (სიმსუბუქე), C (ქრომა), H (ელფერი) - მოდელი მისი OKLCH ფორმით. LCH–ით — კონკრეტულად OKLCH–ით CSS–ში — შემიძლია დავარეგულირო ჩემი საძირკვლის ფერის სიმსუბუქის მნიშვნელობა.
ან შემიძლია შევცვალო მისი ქრომა. LCH chroma და HSL გაჯერება ორივე აღწერს ფერის ინტენსივობას ან სიმდიდრეს, მაგრამ ისინი ამას სხვადასხვა გზით აკეთებენ. LCH მაძლევს უფრო ფართო დიაპაზონს და უფრო პროგნოზირებად შერწყმას ფერებს შორის.
მე ასევე შემიძლია შევცვალო ელფერი, რათა შევქმნა ფერების პალიტრა, რომელიც იზიარებს იგივე სიმსუბუქეს და ქრომის მნიშვნელობებს. როგორც HSL, ასევე LCH, ფერების სპექტრი იწყება წითელიდან, მოძრაობს მწვანესა და ლურჯში და უბრუნდება წითელს.
რატომ შეცვალა OKLCH როგორ ვფიქრობ ფერზე OKLCH ფერთა სივრცის ბრაუზერის მხარდაჭერა ახლა ფართოდაა გავრცელებული, მაშინაც კი, თუ დიზაინის ინსტრუმენტები - მათ შორის Sketch - არ არის გამოყენებული. საბედნიეროდ, ამან არ უნდა შეგაჩეროთ OKLCH-ის გამოყენებაში. ბრაუზერები სიამოვნებით გარდაქმნის Hex, HSL, LAB და RGB მნიშვნელობებს თქვენთვის OKLCH-ად. თქვენ შეგიძლიათ განსაზღვროთ CSS მორგებული თვისება საძირკვლის ფერით ნებისმიერ სივრცეში, მათ შორის Hex: /* ფონდის ფერი */ --საფუძველი: #5accd6;
მისგან მიღებული ნებისმიერი ფერი ავტომატურად გარდაიქმნება OKLCH-ში: --Foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) [...]; } --საძირკველი-მუქი: ოკლჩ(var(--ფონდი) [...]; }
შედარებითი ფერი, როგორც დიზაინის სისტემა იფიქრეთ შედარებით ფერზე, როგორც ამბობენ: „აიღეთ ეს ფერი, შეცვალეთ და მომეცი შედეგი“. ფერის კორექტირების ორი გზა არსებობს: აბსოლუტური ცვლილებები და პროპორციული ცვლილებები. ისინი კოდში ჰგვანან, მაგრამ ძალიან განსხვავებულად იქცევიან, როგორც კი ტონალური კრემის ფერის შეცვლას დაიწყებთ. ამ განსხვავების გაგება არის ის, რაც შეიძლება გადააქციოს შედარებით ფერის გამოყენებას სისტემად. /* ფონდის ფერი */ --საფუძველი: #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(-- ფონდი) ლ კალკ(c - 0.10) სთ);
ფერების პალიტრის შესაქმნელად, მე ვიანგარიშებ განსხვავებას ჩემი საძირკვლის ფერის (200) და ჩემს ახალ ფერს (260) შორის: oklch(var(-- ფონდი) ლ c calc (h + 60));
ეს გამოთვლები აბსოლუტურია. როცა ფიქსირებულ რაოდენობას ვაკლებ, ფაქტობრივად ვამბობ: „ყოველთვის ამდენი გამოაკელი“. იგივე ეხება ფიქსირებული მნიშვნელობების დამატებისას: calc(c - 0.10) calc(c + 0.10)
ამ მიდგომის საზღვრები რთული გზით გავიგე. როდესაც მე ვეყრდნობოდი ქრომის ფიქსირებული მნიშვნელობების გამოკლებას, ფერები იშლებოდა ნაცრისფერისკენ, როგორც კი საძირკველი შევცვალე. პალიტრა, რომელიც მუშაობდა ერთ ფერზე, დაიშალა მეორეზე. გამრავლება განსხვავებულად იქცევა. როდესაც ქრომას ვამრავლებ, ბრაუზერს ვეუბნები: „შეამცირე ამ ფერის ინტენსივობა პროპორციით“. ფერებს შორის ურთიერთობა ხელუხლებელი რჩება, მაშინაც კი, როდესაც საძირკველი იცვლება: calc (c * 0.10)
ჩემი გადაადგილება, მასშტაბირება, როტაციის წესები
სიმსუბუქის გადაადგილება (დამატება ან გამოკლება), ქრომის მასშტაბი (გამრავლება), ტონის როტაცია (დაამატე ან გამოაკლო გრადუსი).
ქრომის მასშტაბირებას ვაკეთებ, რადგან მსურს ინტენსივობის ცვლილებები ძირითადი ფერის პროპორციული იყოს. ფერების ურთიერთობები ბრუნვითია, ამიტომ ფერის გამრავლებას აზრი არ აქვს. სიმსუბუქე აღქმადი და აბსოლუტურია - მისი გამრავლება ხშირად უცნაურ შედეგებს იძლევა.
ერთი ფერიდან მთელ თემამდე ფარდობითი ფერი საშუალებას მაძლევს განვსაზღვრო საძირკვლის ფერი და გამოვმუშაო ყველა სხვა ფერი, რომელიც მჭირდება - შევსება, შტრიხები, გრადიენტური გაჩერებები, ჩრდილები - მისგან. ამ დროს ფერი წყვეტს პალიტრას და სისტემად იქცევა. SVG ილუსტრაციები, როგორც წესი, ხელახლა იყენებენ იმავე რამდენიმე ფერს შევსების, შტრიხებისა და გრადიენტების მიხედვით. ფარდობითი ფერი საშუალებას გაძლევთ ერთხელ განსაზღვროთ ეს ურთიერთობები და ხელახლა გამოიყენოთ ისინი ყველგან – ისევე, როგორც ანიმატორები ხელახლა იყენებდნენ ფონს ახალი სცენების შესაქმნელად.
ერთხელ შეცვალეთ საძირკვლის ფერი და ყველა მიღებული ფერი განახლდება ავტომატურად, ხელით რაიმეს გადაანგარიშების გარეშე. ანიმაციური გრაფიკის მიღმა, მე შემეძლო იგივე მიდგომის გამოყენება ინტერაქტიული ელემენტების მდგომარეობების ფერების დასადგენად, როგორიცაა ღილაკები და ბმულები. ფუნდამენტური ფერი, რომელიც გამოვიყენე ჩემს "Lullabye-Bye Bear" Toon Title-ში არის ცისფერი ლურჯი. ფონი არის რადიალური გრადიენტი ჩემს საძირკველსა და მუქ ვერსიას შორის.
სრულიად განსხვავებული განწყობის მქონე ალტერნატიული ვერსიების შესაქმნელად, მე მხოლოდ ტონალური კრემის ფერის შეცვლა მჭირდება: --საფუძველი: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation) calc (l - 0.2357) calc (c * 0.833) სთ);
ამ მორგებული თვისებების ჩემს SVG გრადიენტთან ფერის მნიშვნელობების დუბლირების გარეშე დასაკავშირებლად, მე შევცვალე მყარი კოდირებული stop-color მნიშვნელობები inline სტილებით:
შემდეგი, მე მჭირდებოდა იმის უზრუნველყოფა, რომ ჩემი Toon Text ყოველთვის კონტრასტში იყო ნებისმიერი საძირკვლის ფერისგან, რომელსაც მე ვირჩევ. 180 გრადუსიანი ტონის ბრუნვა ქმნის დამატებით ფერს, რომელიც, რა თქმა უნდა, ჩნდება - მაგრამ შეიძლება არასასიამოვნო ვიბრაცია: .text-light { შევსება: oklch(var(--ფონდი) ლ c calc(h + 180)); }
90° ცვლა წარმოქმნის ნათელ მეორად ფერს სრული შემავსებლობის გარეშე: .text-light { შევსება: oklch(var(--ფონდი) ლ 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) სთ); }
.bg-dark { შევსება: oklch(var(--ფონდი) calc (l - 0.12) calc (c * 0.64) სთ); }
როდესაც საფუძვლები იწყებენ მოძრაობას
ჯერჯერობით, ყველაფერი, რაც მე ვაჩვენე, სტატიკური იყო. მაშინაც კი, როდესაც ვინმე იყენებს ფერის ამომრჩეველს საძირკვლის ფერის შესაცვლელად, ეს ცვლილება მყისიერად ხდება. მაგრამ ანიმაციური გრაფიკა იშვიათად ჩერდება - ნახავ სახელშია. ასე რომ, თუ ფერი სისტემის ნაწილია, არ არსებობს მიზეზი, რომ მას ასევე არ შეუძლია ანიმაცია.
საძირკვლის ფერის ანიმაციისთვის, ჯერ უნდა გავყო ის მის OKLCH არხებად- სიმსუბუქე, ქრომა და ელფერი. მაგრამ არის მნიშვნელოვანი დამატებითი ნაბიჯი: მე უნდა დავარეგისტრირო ეს მნიშვნელობები, როგორც აკრეფილი მორგებული თვისებები. მაგრამ რას ნიშნავს ეს?
ნაგულისხმევად, ბრაუზერმა არ იცის, წარმოადგენს თუ არა CSS მორგებული თვისების მნიშვნელობა ფერს, სიგრძეს, რიცხვს ან სხვა რამეს. ეს ხშირად ნიშნავს, რომ მათი შეუფერხებლად ინტერპოლაცია შეუძლებელია ანიმაციის დროს და გადახტომა ერთი მნიშვნელობიდან მეორეზე.
მორგებული საკუთრების რეგისტრაცია ბრაუზერს ეუბნება მნიშვნელობის ტიპს, რომელსაც იგი წარმოადგენს და როგორ უნდა მოიქცეს დროთა განმავლობაში. ამ შემთხვევაში, მსურს ბრაუზერმა ჩემი ფერადი არხები ციფრებად განიხილოს, რათა მათი შეუფერხებლად ანიმაცია მოხდეს.
@property --f-l {
სინტაქსი: "
@property --f-c {
სინტაქსი: "
@property --f-h {
სინტაქსი: "
რეგისტრაციის შემდეგ, ეს პერსონალური თვისებები იქცევა როგორც მშობლიური CSS. ბრაუზერს შეუძლია მათი ინტერპოლაცია კადრ-კადრში. შემდეგ აღვადგენ ფუძის ფერს ამ არხებიდან: --საძირკველი: oklch(var(--f-l) var(--f-c) var(--f-h));
ეს ხდის საძირკვლის ფერს ანიმაციურს, ისევე როგორც ნებისმიერი სხვა რიცხვითი მნიშვნელობა. აქ არის მარტივი "სუნთქვის" ანიმაცია, რომელიც დროთა განმავლობაში ნაზად ცვლის სიმსუბუქეს: @keyframes breathe { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { ანიმაცია: ამოისუნთქე 10 წამის სიმარტივე უსასრულოდ; }
იმის გამო, რომ შევსების, გრადიენტებისა და შტრიხების ყველა სხვა ფერი მომდინარეობს -- საფუძვლიდან, ისინი ყველა ერთად აცოცხლებენ და არაფრის ხელით განახლება არ არის საჭირო. ერთი ანიმაციური ფერი, ბევრი ეფექტი ამ პროცესის დაწყებისას მაინტერესებდა, შეეძლო თუ არა CSS-ის შედარებითი ფერის მნიშვნელობები შესთავაზოს მეტი შესაძლებლობები და ასევე გაამარტივოს მათი განხორციელება. ახლახან დავამატე ახალი ოქროს მაღაროს ფონი ჩემი ვებსაიტის საკონტაქტო გვერდზე და პირველი გამეორება მოიცავდა ნავთობის ნათურებს, რომლებიც ანათებენ და მოძრაობენ.
მსურდა გამომეკვლია, თუ როგორ გააცოცხლებდა CSS ფარდობითი ფერები, რომ მაღაროს ინტერიერი უფრო რეალისტური გახადოს, ნათურების ფერებით შეფერვით. მსურდა მათ გავლენა მოახდინონ მათ გარშემო არსებულ სამყაროზე, ისე, როგორც ამას რეალური სინათლე აკეთებს. ასე რომ, ვიდრე რამდენიმე ფერის ანიმაცია, მე ავაშენე პაწაწინა განათების სისტემა, რომელიც აცოცხლებს მხოლოდ ერთ ფერს.
ჩემი პირველი დავალება იყო გადაფარვის ფენის დადება ფონსა და ჩემს ნათურებს შორის: <გზა id = "გადაფარვა" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
მე გამოვიყენე mix-blend-mode: ფერი, რადგან ეს აფერადებს მის ქვეშ არსებულს და ინარჩუნებს ფონურ განათებას. იმის გამო, რომ მე მინდა, რომ გადაფარვა ხილული იყოს მხოლოდ მაშინ, როდესაც ანიმაციები ჩართულია, მე შევარჩიე გადაფარვა: .svg-mine #overlay { ჩვენება: არცერთი; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ჩვენება: ბლოკი; გამჭვირვალობა: 0,5; } }
გადაფარვა ადგილზე იყო, მაგრამ ჯერ არ იყო დაკავშირებული ნათურებთან. სინათლის წყარო მჭირდებოდა. ჩემი ნათურები მარტივია და თითოეული შეიცავს წრის ელემენტს, რომელიც მე ფილტრით გავაბუნდე. ფილტრი ქმნის ძალიან რბილ ბუნდოვანებას მთელ წრეზე.
იმის ნაცვლად, რომ გადაფარვას და ნათურებს ცალ-ცალკე გავაცოცხლო, მე ვაცოცხლებ ერთი ფერის „ფლეიმის“ ჟეტონს და მისგან ვიღებ ყველაფერს დანარჩენს. პირველი, მე ვარეგისტრირე სამი აკრეფილი მორგებული თვისება OKLCH არხებისთვის:
@property --fl-l {
სინტაქსი: "
მე გავააქტიურე ეს არხები, განზრახ გადავიყვანე რამდენიმე კადრი ნარინჯისფერისკენ, რათა ციმციმა ნათლად იკითხებოდეს, როგორც ცეცხლის შუქი:
@keyframes flame { 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] { ანიმაცია: flame 3.6s infinite linear; იზოლაცია: იზოლირება;
/* შექმენით ფლეიმის ფერი ანიმაციური არხებიდან */ --ალი: ოკლჩ(ვარ(--ფლ-ლ) ვარ(--ფლ-გ) ვარ(--ფლ-ჰ));
/* ლამპარის ფერი მიღებული ალი */ --ნათურის ბირთვი: oklch(var(--ცეცხლი) calc(l + 0.05) calc(c * 0.70) h);
/* გადაფარვის ელფერი მიღებული იმავე ალისაგან */ --გადაფარვა-ელფერი: oklch(var(--ცეცხლი) 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; } }
როდესაც ალი ფორთოხლისკენ გადადის, ნათურები თბება და სცენა მათთან ერთად თბება. როცა ცეცხლი გაცივდება, ყველაფერი ერთად წყდება. ყველაზე კარგი ის არის, რომ ხელით არაფერი წერია. თუ საძირკვლის ფერს შევცვლი ან ცეცხლოვანი ანიმაციის დიაპაზონს შევცვლი, განათების მთელი სისტემა ერთდროულად განახლდება. საბოლოო შედეგი შეგიძლიათ ნახოთ ჩემს საიტზე. ხელახლა გამოყენება, ხელახალი გამოყენება, ხელახლა დათვალიერება ჰანა-ბარბერას ანიმატორები იძულებულნი გახდნენ ელემენტები გადაეყენებინათ აუცილებლობის გამო, მაგრამ მე ხელახლა ვიყენებ ფერებს, რადგან ეს ჩემს ნამუშევარს უფრო თანმიმდევრულს და უფრო ადვილად შესანახს ხდის. CSS ფარდობითი ფერის მნიშვნელობები საშუალებას მაძლევს:
განსაზღვრეთ ფუნდამენტის ერთი ფერი, აღწერეთ, როგორ უკავშირდება მას სხვა ფერები, ხელახლა გამოიყენეთ ეს ურთიერთობები ყველგან და სისტემის ანიმაცია ერთი მნიშვნელობის შეცვლით.
შედარებითი ფერი უბრალოდ არ აადვილებს თემებს. ის ხელს უწყობს აზროვნების გზას, სადაც ფერი, ისევე როგორც მოძრაობა, მიზანმიმართულია - და სადაც ერთი მნიშვნელობის შეცვლამ შეიძლება მთელი სცენა გარდაქმნას მის ქვეშ ნამუშევრის გადაწერის გარეშე.
