Niedawno odświeżyłem animowaną grafikę na mojej stronie o nowy motyw i grupę pionierskich postaci, wdrażając w praktyce wiele technik, którymi podzieliłem się w tej serii. Kilka moich animacji zmienia wygląd, gdy ktoś z nimi wchodzi w interakcję lub o różnych porach dnia.
Kolory grafiki na stronach mojego bloga zmieniają się każdego dnia od rana do wieczora. Następnie jest tryb śniegu, który dodaje chłodne kolory i zimowy motyw dzięki warstwie nakładki i trybowi mieszania.
Pracując nad tym, zacząłem się zastanawiać, czy względne wartości kolorów CSS mogłyby dać mi większą kontrolę, a jednocześnie uprościć proces. Uwaga: w tym samouczku skupię się na względnych wartościach kolorów i przestrzeni kolorów OKLCH dla grafik tematycznych i animacji. Jeśli chcesz zagłębić się w względne kolory, Ahmad Shadeed stworzył wspaniały interaktywny przewodnik. Jeśli chodzi o przestrzenie kolorów, gamy i OKLCH, pisał o nich nasz własny Geoff Graham.
Kluczem było wielokrotne użycie elementów. W miarę możliwości ponownie wykorzystywano tła, a zoomy i nakładki pomogły w tworzeniu nowych scen z tej samej grafiki. Zrodził się z konieczności, ale skłaniał też do myślenia w kategoriach seriali, a nie pojedynczych scen. Problem z ręczną aktualizacją palet kolorów Przejdźmy od razu do mojego wyzwania. W przypadku tytułów Toon takich jak ten — opartych na odcinku „Lullabye-Bye Bear” z 1959 r. „Lullabye-Bye Bear” — i ogólnie w mojej twórczości palety są ograniczone do kilku wybranych kolorów.
Tworzę odcienie na podstawie tego, co nazywam kolorem „podstawowym”, aby rozszerzyć paletę bez dodawania kolejnych odcieni.
W Sketchu pracuję w przestrzeni barw HSL, więc proces ten polega na zwiększaniu lub zmniejszaniu wartości jasności mojego koloru podkładu. Szczerze mówiąc, nie jest to trudne zadanie – ale wybranie innego koloru podkładu wymaga stworzenia zupełnie nowego zestawu odcieni i odcieni. Powtarzanie tej czynności ręcznie szybko staje się pracochłonne.
Wspomniałem o HSL – H (odcień), S (nasycenie) i L (jasność) – przestrzeń kolorów, ale to tylko jeden z kilku sposobów opisu koloru. RGB — R (czerwony), G (zielony), B (niebieski) — jest prawdopodobnie najbardziej znany, przynajmniej w formie szesnastkowej. Jest też LAB — L (jasność), A (zielony–czerwony), B (niebieski–żółty) — i nowszy, ale teraz szeroko obsługiwany LCH — L (jasność), C (chroma), H (odcień) — model w formie OKLCH. Dzięki LCH — w szczególności OKLCH w CSS — mogę dostosować wartość jasności mojego koloru podkładu.
Albo mogę zmienić jego barwę. Zarówno nasycenie LCH, jak i nasycenie HSL opisują intensywność lub bogactwo koloru, ale robią to na różne sposoby. LCH daje mi szerszy zakres i bardziej przewidywalne mieszanie kolorów.
Mogę także zmieniać odcień, tworząc paletę kolorów o tej samej jasności i nasyceniu. Zarówno w HSL, jak i LCH spektrum odcieni zaczyna się od czerwieni, przechodzi przez zieleń i błękit, a następnie powraca do czerwieni.
Dlaczego firma OKLCH zmieniła sposób, w jaki myślę o kolorze Obsługa przestrzeni kolorów OKLCH przez przeglądarki jest obecnie powszechna, nawet jeśli narzędzia do projektowania — w tym Sketch — nie nadążają za nimi. Na szczęście nie powinno to powstrzymywać Cię od korzystania z OKLCH. Przeglądarki z radością przekonwertują dla Ciebie wartości Hex, HSL, LAB i RGB na OKLCH. Możesz zdefiniować niestandardową właściwość CSS z kolorem podstawowym w dowolnej przestrzeni, w tym w formacie szesnastkowym: /* Kolor podkładu */ --fundacja: #5accd6;
Wszelkie pochodzące z niego kolory zostaną automatycznie przekonwertowane na OKLCH: --foundation-light: oklch(od var(--foundation) [...]; } --fundament-mid: oklch(od var(--fundament) [...]; } --fundacja-dark: oklch(od var(--fundacja) [...]; }
Kolor względny jako system projektowania Pomyśl o względnym kolorze jako o powiedzeniu: „Weź ten kolor, popraw go, a następnie daj mi wynik”. Istnieją dwa sposoby dostosowania koloru: zmiany bezwzględne i zmiany proporcjonalne. Wyglądają podobnie w kodzie, ale zachowują się zupełnie inaczej, gdy zaczniesz zamieniać kolory podkładu. Zrozumienie tej różnicy może zamienić użycie względnego koloru w system. /* Kolor podkładu */ --fundacja: #5accd6;
Na przykład wartość jasności mojego koloru podkładu wynosi 0,7837, podczas gdy ciemniejsza wersja ma wartość 0,5837. Aby obliczyć różnicę, odejmij niższą wartość od wyższej i zastosuj wynik za pomocą funkcji calc(): --podkład-ciemny: oklch(z var(--fundament) oblicz(l - 0,20) c h);
Aby uzyskać jaśniejszy kolor, zamiast tego dodaję różnicę: --podstawa-światło: oklch(z var(--fundament) oblicz (l + 0,10) c h);
Chromakorekty przebiegają według tego samego procesu. Aby zmniejszyć intensywność koloru podkładu z 0,1035 do 0,0035, odejmij jedną wartość od drugiej: oklch(z var(--fundament) l oblicz(c - 0,10) h);
Aby utworzyć paletę odcieni, obliczam różnicę między wartością odcienia mojego koloru podkładu (200) a moim nowym odcieniem (260): oklch(z var(--fundament) lc oblicz(h + 60));
Te wyliczenia są absolutne. Kiedy odejmuję ustaloną kwotę, w praktyce mówię: „Zawsze odejmuj tyle”. To samo dotyczy dodawania stałych wartości: oblicz(c - 0,10) oblicz(c + 0,10)
Na własnej skórze poznałem ograniczenia tego podejścia. Kiedy polegałem na odejmowaniu ustalonych wartości nasycenia barwy, kolory zapadały się w szarość, gdy tylko zmieniłem podkład. Paleta, która sprawdziła się w przypadku jednego koloru, rozpadła się w przypadku innego. Mnożenie zachowuje się inaczej. Kiedy mnożę nasycenie, mówię przeglądarce: „Zmniejsz intensywność tego koloru o proporcję”. Związek między kolorami pozostaje nienaruszony, nawet gdy zmienia się podkład: oblicz(c * 0,10)
Moje zasady: przesuwaj, skaluj, obracaj
Przenieś lekkość (dodaj lub odejmij), Skaluj nasycenie (pomnóż), Obróć odcień (dodaj lub odejmij stopnie).
Skaluję nasycenie barwy, ponieważ chcę, aby zmiany intensywności pozostały proporcjonalne do koloru bazowego. Relacje odcieni są obrotowe, więc mnożenie odcienia nie ma sensu. Lekkość jest percepcyjna i absolutna – pomnożenie jej często daje dziwne rezultaty.
Od jednego koloru do całego motywu Kolor względny pozwala mi zdefiniować kolor podkładu i wygenerować z niego każdy inny potrzebny kolor — wypełnienia, obrysy, przejścia gradientu i cienie. W tym momencie kolor przestaje być paletą, a zaczyna być systemem. Ilustracje SVG zwykle wykorzystują te same kilka kolorów w wypełnieniach, obrysach i gradientach. Kolor względny pozwala raz zdefiniować te relacje i używać ich ponownie w dowolnym miejscu — podobnie jak animatorzy ponownie wykorzystywali tła do tworzenia nowych scen.
Zmień kolor podkładu raz, a każdy uzyskany kolor zostanie zaktualizowany automatycznie, bez konieczności ręcznego przeliczania czegokolwiek. Poza animowaną grafiką mógłbym zastosować to samo podejście do zdefiniowania kolorów stanów elementów interaktywnych, takich jak przyciski i łącza. Kolor podkładu, którego użyłem w tytule Toon „Lullabye-Bye Bear” to błękit przypominający cyjan. Tło to radialny gradient pomiędzy moim podkładem a jego ciemniejszą wersją.
Aby stworzyć alternatywne wersje o zupełnie innych nastrojach wystarczy zmienić kolor podkładu: --fundacja: #5accd6; --grad-end: var(--fundament); --grad-start: oklch(z var(--fundacja) oblicz (l - 0,2357) oblicz (c * 0,833) h);
Aby powiązać te niestandardowe właściwości z moim gradientem SVG bez powielania wartości kolorów, zastąpiłem zakodowane na stałe wartości koloru końcowego stylami wbudowanymi:
Następnie musiałem upewnić się, że mój Toon Text zawsze kontrastuje z wybranym przeze mnie kolorem podkładu. Obrót odcienia o 180 stopni tworzy uzupełniający kolor, który z pewnością rzuca się w oczy, ale może wibrować niekomfortowo: .text-light { wypełnienie: oklch(z var(--fundament) lc oblicz(h + 180)); }
Przesunięcie o 90° daje żywy kolor wtórny, który nie jest w pełni uzupełniający: .text-light { wypełnienie: oklch(z var(--fundament) lc oblicz(h - 90)); }
W mojej rekonstrukcji tytułu Toon z 1959 r. autorstwa Quick Draw McGraw „El Kabong” zastosowano te same techniki, ale z bardziej zróżnicowaną paletą. Na przykład istnieje inny promienisty gradient pomiędzy kolorem podkładu a ciemniejszym odcieniem.
Budynek i drzewo w tle to po prostu różne odcienie tego samego koloru podłoża. Do tych ścieżek potrzebowałem dwóch dodatkowych kolorów wypełnienia: .bg-mid { wypełnienie: oklch(z var(--fundament) oblicz (l - 0,04) oblicz (c * 0,91) h); }
.bg-ciemny { wypełnienie: oklch(z var(--fundament) oblicz (l - 0,12) oblicz (c * 0,64) h); }
Kiedy fundamenty zaczynają się ruszać
Jak dotąd wszystko, co pokazałem, było statyczne. Nawet jeśli ktoś użyje próbnika kolorów do zmiany koloru podkładu, zmiana ta nastąpi natychmiast. Ale animowana grafika rzadko stoi w miejscu — wskazówka kryje się w nazwie. Jeśli więc kolor jest częścią systemu, nie ma powodu, dla którego nie mógłby on również animować.
Aby ożywić kolor podkładu, muszę najpierw podzielić go na kanały OKLCH— jasność, nasycenie i odcień. Ale jest ważny dodatkowy krok: muszę zarejestrować te wartości jako wpisane właściwości niestandardowe. Ale co to znaczy?
Domyślnie przeglądarka nie wie, czy wartość niestandardowej właściwości CSS reprezentuje kolor, długość, liczbę, czy coś zupełnie innego. Często oznacza to, że nie można ich płynnie interpolować podczas animacji i przeskakiwać z jednej wartości do drugiej.
Zarejestrowanie właściwości niestandardowej informuje przeglądarkę, jaki typ wartości reprezentuje i jak powinna się zachowywać w czasie. W tym przypadku chcę, aby przeglądarka traktowała moje kanały kolorów jako liczby, aby można było je płynnie animować.
@właściwość --f-l {
składnia: "
@właściwość --f-c {
składnia: "
@właściwość --f-h {
składnia: "
Po zarejestrowaniu te niestandardowe właściwości zachowują się jak natywny CSS. Przeglądarka może interpolować je klatka po klatce. Następnie odbudowuję kolor podkładu z tych kanałów: --fundament: oklch(var(--f-l) var(--f-c) var(--f-h));
Dzięki temu kolor podkładu można animować, tak jak każdą inną wartość liczbową. Oto prosta animacja „oddychania”, która delikatnie zmienia jasność w czasie: @klatki kluczowe oddychaj { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animacja: oddychaj przez 10 s, w nieskończoność; }
Ponieważ każdy inny kolor wypełnień, gradientów i obrysów pochodzi z --foundation, wszystkie są animowane razem i niczego nie trzeba aktualizować ręcznie. Jeden animowany kolor, wiele efektów Na początku tego procesu zastanawiałem się, czy względne wartości kolorów CSS mogą zaoferować więcej możliwości, a jednocześnie ułatwić ich wdrożenie. Niedawno dodałem nowe tło kopalni złota do strony kontaktowej mojej witryny, a pierwsza wersja obejmowała lampy naftowe, które świecą i kołyszą się.
Chciałem zbadać, w jaki sposób animowanie kolorów względnych CSS mogłoby uczynić wnętrze kopalni bardziej realistycznym, zabarwiając je kolorami lamp. Chciałem, żeby wpływały na otaczający je świat, tak jak robi to prawdziwe światło. Zamiast animować wiele kolorów, zbudowałem mały system oświetlenia, który animuje tylko jeden kolor.
Moim pierwszym zadaniem było umieszczenie warstwy nakładki pomiędzy tłem a lampami: <ścieżka id="nakładka" fill="var(--odcień-nakładki)" [...] style="tryb mieszania-mieszania: kolor" />
Użyłem trybu mieszania i mieszania: koloru, ponieważ zabarwia to, co znajduje się pod nim, zachowując jednocześnie luminancję. Ponieważ chcę, aby nakładka była widoczna tylko wtedy, gdy animacje są włączone, umożliwiłem jej włączenie: .svg-mine #overlay { wyświetlacz: brak; }
@media (preferuje-ograniczony-ruch: brak preferencji) { .svg-mine[data-animations=on] #overlay { wyświetlacz: blok; nieprzezroczystość: 0,5; } }
Nakładka była na swoim miejscu, ale jeszcze nie była podłączona do lamp. Potrzebowałem źródła światła. Moje lampy są proste, a każda zawiera element koła, który rozmazałam filtrem. Filtr tworzy bardzo miękkie rozmycie na całym okręgu.
Zamiast animować osobno nakładkę i lampy, animuję pojedynczy żeton koloru „płomienia” i z niego czerpię całą resztę. Najpierw rejestruję trzy wpisane właściwości niestandardowe dla kanałów OKLCH:
@właściwość --fl-l {
składnia: "
Animowałem te kanały, celowo przesuwając kilka klatek w stronę pomarańczy, aby migotanie było wyraźnie widoczne jako światło ognia:
@klatki kluczowe płomień { 0%, 100% {-fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% {-fl-1: 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; } }
Następnie rozszerzyłem zakres tej animacji na SVG, więc wspólne zmienne są dostępne zarówno dla lamp, jak i mojej nakładki:
@media (preferuje-ograniczony-ruch: brak preferencji) { .svg-mine[data-animations=on] { animacja: płomień 3,6 s nieskończony liniowy; izolacja: izolować;
/* Stwórz kolor płomienia z animowanych kanałów */ --płomień: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Kolor lampy pochodzi od płomienia */ --rdzeń lampy: oklch(z var(--płomień) calc(l + 0,05) calc(c * 0,70) h);
/* Odcień nakładki pochodzący z tego samego płomienia */ --overlay-tint: oklch(z var(--flame) oblicz (l + 0,06) oblicz (c * 0,65) oblicz (h - 10)); } }
Na koniec zastosowałem te pochodne kolory do świecących lamp i nakładki, na którą wpływają: @media (preferuje-ograniczony-ruch: brak preferencji) { .svg-mine[data-animations=on] #mine-lamp-1 > okrąg, .svg-mine[data-animations=on] #mine-lamp-2 > okrąg { fill: var(--rdzeń lampy); }
.svg-mine[data-animations=on] #overlay { wyświetlacz: blok; fill: var(--odcień nakładki); nieprzezroczystość: 0,5; } }
Kiedy płomień przesuwa się w stronę pomarańczową, lampy nagrzewają się, a scena nagrzewa się wraz z nimi. Kiedy płomień ostygnie, wszystko się układa. Najlepsze jest to, że nic nie jest pisane ręcznie. Jeśli zmienię kolor podkładu lub dostosuję zakresy animacji płomieni, cały system oświetlenia zostanie zaktualizowany jednocześnie. Efekt końcowy można zobaczyć na mojej stronie internetowej. Ponowne użycie, ponowne wykorzystanie, ponowne przeglądanie Animatorzy Hanna-Barbera byli zmuszeni do zmiany przeznaczenia elementów z konieczności, ale ja ponownie używam kolorów, ponieważ dzięki temu moja praca jest bardziej spójna i łatwiejsza w utrzymaniu. Względne wartości kolorów CSS pozwalają mi:
Zdefiniuj jeden kolor podkładu, Opisz, jak odnoszą się do niego inne kolory, Wykorzystuj te relacje wszędzie i Animuj system, zmieniając jedną wartość.
Względny kolor nie tylko ułatwia tworzenie motywów. Zachęca do myślenia, w którym kolor, podobnie jak ruch, jest zamierzony i gdzie zmiana jednej wartości może przekształcić całą scenę bez konieczności przepisywania znajdującego się pod nią dzieła.
