Duela gutxi, nire webguneko animazio grafikoak freskatu ditut gai berri batekin eta pertsonaia aitzindari talde batekin, serie honetan partekatu ditudan teknika ugari praktikan jarriz. Nire animazio batzuk itxura aldatzen dute norbait haiekin elkarreraginean edo eguneko une ezberdinetan.
Nire blogeko orrialdeen gaineko grafikoaren koloreak egunero aldatzen dira goizetik gauera. Ondoren, elur modua dago, kolore hotzak eta neguko gaia gehitzen dituena, gainjarri geruza baten eta nahaste moduaren eskutik.
Horretan lanean ari nintzela, galdetzen hasi nintzen ea CSS kolore-balio erlatiboek kontrol gehiago eman ote zidaten prozesua sinplifikatuz. Oharra: Tutorial honetan, kolore-balio erlatiboetan eta OKLCH kolore-espazioan zentratuko naiz grafikoak eta animazioak gaitzeko. Kolore erlatiboan sakondu nahi baduzu, Ahmad Shadeed-ek gida interaktibo bikaina sortu zuen. Kolore-espazioei, gamaei eta OKLCH-i dagokienez, gure Geoff Grahamek idatzi zuen haiei buruz.
Elementuak behin eta berriz erabiltzea funtsezkoa zen. Atzealdeak ahal zen guztietan berrerabili ziren, zoomak eta gainjartzeak artelan beretik eszena berriak eraikitzen lagundu zuten. Beharretik jaio zen, baina eszena indibidualetan baino serieetan pentsatzea ere bultzatu zuen. Kolore paletak eskuz eguneratzearen arazoa Goazen zuzenean nire erronkara. Hau bezalako Toon Titles - 1959ko Yogi Bear Show "Lullabye-Bye Bear" atalean oinarritutakoa - eta, oro har, nire lanean, paletak kolore gutxi batzuetara mugatzen dira.
Nire "oinarrizko" kolorea deitzen dudanetik tonu eta ñabardurak sortzen ditut paleta zabaltzeko ñabardura gehiago gehitu gabe.
Sketch-en, HSL kolore-espazioan lan egiten dut, beraz, prozesu honek nire oinarri-kolorearen argitasuna handitzea edo txikitzea dakar. Egia esan, ez da lan neketsua, baina oinarri-kolore ezberdin bat aukeratzeak tonu eta ñabardura multzo berri bat sortzea eskatzen du. Hori eskuz egitea, behin eta berriz, azkar neketsua bihurtzen da.
HSL - H (ñabardura), S (saturazioa) eta L (argitasuna) - kolore-espazioa aipatu dut, baina hori kolorea deskribatzeko hainbat modutako bat besterik ez da. RGB - R (gorria), G (berdea), B (urdina) - da ziurrenik ezagunena, bere Hex forman behintzat. LAB ere bada - L (argitasuna), A (berdea-gorria), B (urdina-horia) - eta berriagoa, baina gaur egun oso onartzen den LCH - L (argitasuna), C (kroma), H (ñabardura) - bere OKLCH forman. LCH-rekin, zehazki, OKLCH CSS-n, nire oinarri-kolorearen argitasun-balioa doi dezaket.
Edo haren kroma alda dezaket. LCH kroma eta HSL saturazioa biek kolore baten intentsitatea edo aberastasuna deskribatzen dute, baina modu ezberdinetan egiten dute. LCH-k gama zabalagoa eta koloreen arteko nahasketa aurreikusgarriagoa ematen dit.
Tonua ere alda dezaket argitasun- eta kroma-balio berdinak partekatzen dituzten kolore-paleta bat sortzeko. HSL zein LCH-n, ñabardura-espektroa gorrian hasten da, berde eta urdinetik mugitzen da eta gorrira itzultzen da.
Zergatik aldatu du OKLCH-k koloreari buruz nola pentsatzen dudan OKLCH kolore-espaziorako arakatzailearen laguntza oso hedatuta dago, nahiz eta diseinu-tresnek — Sketch barne— lortu ez duten. Zorionez, horrek ez dizu OKLCH erabiltzea eragotzi behar. Arakatzaileek zorionez, Hex, HSL, LAB eta RGB balioak OKLCH bihurtuko dituzte zuretzat. CSS propietate pertsonalizatu bat oinarri-kolore batekin defini dezakezu edozein espaziotan, Hex barne: /* Oinarrizko kolorea */ --fundazioa: #5accd6;
Bertatik eratorritako edozein kolore OKLCH bihurtuko da automatikoki: --fundazio-argia: oklch(-tik var (--fundazioa) [...]; } --foundation-mid: oklch(-tik var (--fundazioa) [...]; } --fundazioa-iluna: oklch(-tik var (--fundazioa) [...]; }
Kolore erlatiboa Diseinu Sistema gisa Pentsa kolore erlatiboa esatea: "Hartu kolore hau, moldatu, eta eman emaitza". Kolore bat doitzeko bi modu daude: aldaketa absolutuak eta aldaketa proportzionalak. Kodean antzeko itxura dute, baina oinarrizko koloreak aldatzen hasten zarenean oso ezberdin jokatzen dute. Desberdintasun hori ulertzea da kolore erlatiboa erabiliz sistema bihur daitekeena. /* Oinarrizko kolorea */ --fundazioa: #5accd6;
Adibidez, nire oinarri-kolorearen argitasunaren balioa 0,7837 da, eta bertsio ilun batek 0,5837 balio du. Aldea kalkulatzeko, baxuagoa den balioa kentzen dut eta emaitza aplikatuko dut calc() funtzioa erabiliz: --fundazioa-iluna: oklch (vartik (--fundazioa) calc(l - 0,20) c h);
Kolore argiagoa lortzeko, aldea gehitzen dut horren ordez: --fundazio-argia: oklch (vartik (--fundazioa) calc(l + 0,10) c h);
Kromadoikuntzak prozesu bera jarraitzen dute. Nire oinarri-kolorearen intentsitatea 0,1035etik 0,0035era murrizteko, balio bat bestetik kentzen dut: oklch (vartik (--fundazioa) l calc(c - 0,10) h);
Tonu-paleta bat sortzeko, nire oinarri-kolorearen (200) eta nire tonu berriaren (260) ñabardura-balioaren arteko aldea kalkulatzen dut: oklch (vartik (--fundazioa) l c calc(h + 60));
Kalkulu horiek absolutuak dira. Zenbateko finko bat kentzen dudanean, modu eraginkorrean esaten ari naiz: "Beti kendu hainbeste". Gauza bera gertatzen da balio finkoak gehitzean: kalkulua (c - 0,10) kalkulua (c + 0,10)
Ikuspegi honen mugak modu gogorrean ikasi nituen. Kroma-balio finkoak kentzean oinarritu nintzenean, koloreak grisera kolapsatu ziren oinarria aldatu bezain laster. Kolore baterako funtzionatzen zuen paleta bat beste baterako erori zen. Biderketak era ezberdinean jokatzen du. Kroma biderkatzen dudanean, nabigatzaileari esaten ari naiz: "Murriztu kolore honen intentsitatea proportzio batean". Koloreen arteko erlazioak bere horretan jarraitzen du, oinarria aldatzen denean ere: kalkulatua (c * 0,10)
Nire Mugitu, Eskalatu, Biratu Arauak
Mugitu arintasuna (gehitu edo kendu), Eskala kroma (biderkatu), Biratu ñabardura (graduak gehitu edo kendu).
Kroma eskalatzen dut intentsitate aldaketak oinarrizko kolorearekiko proportzionalak izatea nahi dudalako. Tonu-erlazioak txandakakoak dira, beraz, ñabardura biderkatzeak ez du zentzurik. Arintasuna pertzeptiboa eta absolutua da - biderkatzeak emaitza bitxiak sortzen ditu askotan.
Kolore batetik gai oso batera Kolore erlatiboak oinarri-kolore bat definitzeko eta behar dudan beste kolore guztiak sortzeko aukera ematen dit - betegarriak, trazuak, gradienteak, itzalak - bertatik. Une horretan, koloreak paleta izateari uzten dio eta sistema izaten hasten da. SVG ilustrazioek kolore gutxi berdinak berrerabili ohi dituzte betegarrietan, trazuetan eta gradienteetan. Kolore erlatiboak erlazio horiek behin definitzeko eta nonahi berrerabiltzeko aukera ematen dizu, animatzaileek atzealdeak berrerabili zituzten eszena berriak sortzeko antzera.
Aldatu oinarriko kolorea behin, eta eratorritako kolore guztiak automatikoki eguneratzen dira, eskuz ezer berriro kalkulatu gabe. Animazio grafikoetatik kanpo, ikuspegi hori bera erabil nezake elementu interaktiboen egoeraren koloreak definitzeko, hala nola botoiak eta estekak. Nire "Lullabye-Bye Bear" Toon Title-n erabili dudan oinarrizko kolorea zian itxurako urdina da. Atzeko planoa gradiente erradiala da nire oinarriaren eta bertsio ilunago baten artean.
Aldarte guztiz desberdinak dituzten bertsio alternatiboak sortzeko, oinarrizko kolorea aldatu behar dut: --fundazioa: #5accd6; --grad-end: var(--fundazioa); --grad-start: oklch (vartik (--fundazioa) calc(l - 0,2357) calc(c * 0,833) h);
Propietate pertsonalizatu horiek nire SVG gradientearekin kolore-balioak bikoiztu gabe lotzeko, gogor kodetutako stop-kolore-balioak lerroko estiloekin ordezkatu ditut:
Ondoren, nire Toon Testuak aukeratzen dudan oinarri-kolorearekin beti kontrastatzen duela ziurtatu behar nuen. 180 graduko ñabarduraren biraketa batek kolore osagarri bat sortzen du, zalantzarik gabe, baina deseroso dardara dezake: .text-light { bete: oklch (var (--fundazioa) l c calc(h + 180)); }
90°-ko desplazamendu batek bigarren mailako kolore bizia sortzen du guztiz osagarri izan gabe: .text-light { bete: oklch (var (--fundazioa) l c calc(h - 90)); }
"El Kabong" Quick Draw McGraw-en 1959ko Toon Titlearen birsorkuntzak teknika berdinak erabiltzen ditu baina paleta anitzagoa duena. Adibidez, oinarri-kolorearen eta tonu ilun baten artean beste gradiente erradial bat dago.
Atzealdeko eraikina eta zuhaitza oinarri-kolore bereko tonu desberdinak dira. Bide horietarako, betetze-kolore gehigarri bi behar nituen: .bg-erdi { bete: oklch (var (--fundazioa) calc(l - 0,04) calc(c * 0,91) h); }
.bg-iluna { bete: oklch (var (--fundazioa) calc(l - 0,12) calc(c * 0,64) h); }
Oinarriak Mugitzen hasten direnean
Orain arte, erakutsi dudan guztia estatikoa izan da. Norbaitek kolore-hautatzailea erabiltzen duenean ere oinarri-kolorea aldatzeko, aldaketa hori berehala gertatzen da. Baina animaziozko grafikoak oso gutxitan gelditzen dira - Arrastoa izenan dago. Beraz, kolorea sistemaren parte bada, ez dago animatu ezin den arrazoirik ere.
Oinarrizko kolorea animatzeko, lehenik eta behin bere OKLCH kanaletan banatu behar dut- argitasuna, kroma eta ñabardura. Baina beste urrats garrantzitsu bat dago: balio horiek idatzitako propietate pertsonalizatu gisa erregistratu behar ditut. Baina zer esan nahi du horrek?
Lehenespenez, arakatzaile batek ez daki CSS propietate pertsonalizatuaren balio batek kolorea, luzera, zenbakia edo beste zerbait adierazten duen. Horrek esan nahi du askotan ezin direla erraz interpolatu animazioan zehar, eta balio batetik bestera salto egin.
Propietate pertsonalizatu bat erregistratzeak arakatzaileari adierazten dio zer balio mota adierazten duen eta nola jokatu behar duen denboran zehar. Kasu honetan, arakatzaileak nire kolore-kanalak zenbaki gisa tratatzea nahi dut, animatu ahal izateko.
@propietatea --f-l {
sintaxia: "
@propietatea --f-c {
sintaxia: "
@propietatea --f-h {
sintaxia: "
Erregistratutakoan, propietate pertsonalizatu hauek CSS jatorrizko bezala jokatzen dute. Arakatzaileak fotogramaz fotograma interpola ditzake. Ondoren, oinarri-kolorea berreraiki dut kanal horietatik: --fundazioa: oklch(var(--f-l) var(--f-c) var(--f-h));
Horrek oinarriko kolorea animagarria bihurtzen du, beste edozein balio numeriko bezala. Hona hemen denboran zehar arintasuna leunki aldatzen duen "arnasketa" animazio sinple bat: @keyframes arnasa { %0, %100 { --f-l: 0,36; } % 50 { --f-l: 0,46; } }
.toon-title { animazioa: arnasa 10s ease-in-out infinitua; }
Bete, gradiente eta trazuetako beste kolore guztiak --fundaziotik eratorritakoak direnez, denak batera animatzen dira, eta ez da ezer eskuz eguneratu behar. Kolore animatu bat, efektu asko Prozesu honen hasieran, CSS kolore-balio erlatiboak aukera gehiago eskain ote lituzkeen galdetzen nion ea ezartzeko errazagoak izan daitezen. Duela gutxi, urre meategiaren atzeko plano berri bat gehitu nuen nire webguneko kontaktu-orrian, eta lehen bertsioan distira eta kulunkatzen diren olio-lanparak zeuden.
CSS kolore erlatiboak animatzeak meategiaren barrualdea errealistagoa izan dezakeen aztertu nahi nuen lanpararen koloreekin tindatuz. Inguratzen duten munduan eragina izan dezaten nahi nuen, benetako argiak egiten duen moduan. Beraz, hainbat kolore animatu beharrean, kolore bakarra animatzen duen argi-sistema txiki bat eraiki nuen.
Nire lehen zeregina atzeko planoaren eta nire lanpararen artean gainjarri geruza bat jartzea izan zen:
Nahasketa-modua erabili nuen: kolorea azpian dagoena tindatzen duelako azpian dagoen luminantzia mantenduz. Gainjartzea animazioak aktibatuta daudenean soilik ikusgai egotea nahi dudanez, gainjartzea aukeratzea egin dut: .svg-mine #overlay { bistaratzea: bat ere ez; }
@media (lehentasun-mugimendu murriztua: hobespenik gabe) { .svg-mine[data-animations=on] #overlay { pantaila: blokea; opakutasuna: 0,5; } }
Gainjartzea bere lekuan zegoen, baina oraindik ez zegoen lanparai konektatuta. Argi iturri bat behar nuen. Nire lanparak sinpleak dira, eta bakoitzak iragazki batekin lausotu dudan zirkulu elementu bat dauka. Iragazkiak oso lausotze leuna sortzen du zirkulu osoan.
Gainjarri eta lanparak bereizita animatu beharrean, "sugar" koloreko token bakarra animatzen dut eta beste guztia hortik ateratzen dut. Lehenik eta behin, idatzitako hiru propietate pertsonalizatu erregistratzen ditut OKLCH kanaletarako:
@property --fl-l {
sintaxia: "
Kanal horiek animatu nituen, nahita fotograma batzuk laranjarantz bultzatuz, keinuak argi eta garbi irakurtzeko:
@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; } }
Ondoren, animazio hori SVGra egokitu nuen, beraz, partekatutako aldagaiak eskuragarri daude bai lanparak bai nire gainjarriz:
@media (lehentasun-mugimendu murriztua: hobespenik gabe) { .svg-mine[data-animations=on] { animazioa: flame 3.6s infinitu lineala; isolamendu: isolatu;
/* Eraiki suaren kolorea animaziozko kanaletatik */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lanpararen kolorea sutik eratorria */ --lanpara-nukleoa: oklch(-tik var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Sugar beretik eratorritako tinta gainjarri */ --overlay-tint: oklch(etik var (--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Azkenik, kolore eratorri horiek aplikatu nituen distiratsuko lanparari eta eragiten duten gainjarriari: @media (lehentasun-mugimendu murriztua: hobespenik gabe) { .svg-mine[data-animations=on] #mine-lamp-1 > zirkulua, .svg-mine[data-animations=on] #mine-lamp-2 > zirkulua { bete: var(--lanpara-nukleoa); }
.svg-mine[data-animations=on] #overlay { pantaila: blokea; bete: var(--overlay-tint); opakutasuna: 0,5; } }
Sugarra laranjarantz aldatzen denean, lanparak berotzen dira, eta eszena haiekin berotzen da. Sugarra hozten denean, dena batera finkatzen da. Onena da ezer ez dela eskuz idazten. Oinarrizko kolorea aldatzen badut edo suaren animazio-barrutiak doitzen baditut, argiztapen sistema osoa aldi berean eguneratzen da. Azken emaitza nire webgunean ikus dezakezu. Berrerabili, Berrerabili, Berrikusi Hanna-Barbera animatzaile haiek beharrizanez elementuak berriro erabiltzera behartu zituzten, baina koloreak berrerabiltzen ditut nire lana koherenteagoa eta mantentzea errazagoa egiten delako. CSS kolore-balio erlatiboek aukera ematen dit:
Definitu oinarri-kolore bakarra, Deskribatu nola erlazionatzen diren beste kolore batzuekin, Harreman horiek nonahi berrerabili, eta Animatu sistema balio bat aldatuz.
Kolore erlatiboak ez du gaitzea bakarrik errazten. Kolorea, mugimendua bezala, nahita dagoen pentsatzeko modu bat bultzatzen du, eta non balio bat aldatzeak eszena oso bat eraldatu dezakeen azpian dagoen lana berridatzi gabe.
