Yn ddiweddar, rydw i wedi adnewyddu'r graffeg animeiddiedig ar fy ngwefan gyda thema newydd a grŵp o gymeriadau arloesol, gan roi digon o'r technegau a rannais yn y gyfres hon ar waith. Mae rhai o fy animeiddiadau yn newid ymddangosiad pan fydd rhywun yn rhyngweithio â nhw neu ar wahanol adegau o'r dydd.
Mae'r lliwiau yn y graffeg ar ben fy nhudalennau blog yn newid o fore gwyn tan nos bob dydd. Yna, mae'r modd eira, sy'n ychwanegu lliwiau oer a thema gaeafol, trwy garedigrwydd haen troshaen a modd asio.
Wrth weithio ar hyn, dechreuais feddwl tybed a allai gwerthoedd lliw cymharol CSS roi mwy o reolaeth i mi tra hefyd yn symleiddio'r broses. Nodyn: Yn y tiwtorial hwn, byddaf yn canolbwyntio ar werthoedd lliw cymharol a'r gofod lliw OKLCH ar gyfer thema graffeg ac animeiddiadau. Os ydych chi am blymio'n ddwfn i liw cymharol, creodd Ahmad Shadeed ganllaw rhyngweithiol gwych. O ran mannau lliw, gamuts, ac OKLCH, ysgrifennodd ein Geoff Graham ein hunain amdanynt.
Roedd defnyddio elfennau dro ar ôl tro yn allweddol. Roedd cefndiroedd yn cael eu hailddefnyddio pan oedd hynny'n bosibl, gyda chwyddo a throshaenau yn helpu i greu golygfeydd newydd o'r un gwaith celf. Fe'i ganed o reidrwydd, ond roedd hefyd yn annog meddwl yn nhermau cyfresi yn hytrach na golygfeydd unigol. Y broblem Gyda Diweddaru Paletau Lliw â Llaw Gadewch i ni fynd yn syth at fy her. Yn Toon Titles fel yr un hon - yn seiliedig ar bennod Yogi Bear Show ym 1959 “Lullabye-Bye Bear” - a fy ngwaith yn gyffredinol, mae paletau wedi'u cyfyngu i ychydig o liwiau dethol.
Rwy'n creu arlliwiau ac arlliwiau o'r hyn rwy'n ei alw'n lliw “sylfaen” i ehangu'r palet heb ychwanegu mwy o arlliwiau.
Yn Braslun, rwy'n gweithio yn y gofod lliw HSL, felly mae'r broses hon yn golygu cynyddu neu leihau gwerth ysgafnder fy lliw sylfaen. Yn onest, nid yw'n dasg llafurus - ond mae dewis lliw sylfaen gwahanol yn gofyn am greu set hollol newydd o arlliwiau ac arlliwiau. Mae gwneud hynny â llaw, dro ar ôl tro, yn dod yn llafurus yn gyflym.
Soniais am yr HSL - H (lliw), S (dirlawnder), ac L (ysgafnder) - gofod lliw, ond dim ond un o sawl ffordd o ddisgrifio lliw yw hynny. Mae'n debyg mai RGB - R (coch), G (gwyrdd), B (glas) - yw'r mwyaf cyfarwydd, o leiaf yn ei ffurf Hex. Mae yna hefyd LAB - L (ysgafnder), A (gwyrdd-coch), B (glas-melyn) - a'r model LCH mwy newydd, ond sydd bellach yn cael ei gefnogi'n eang - L (ysgafnder), C (chroma), H (lliw) - yn ei ffurf OKLCH. Gyda LCH - yn benodol OKLCH yn CSS - gallaf addasu gwerth ysgafnder fy lliw sylfaen.
Neu gallaf newid ei groma. Mae croma LCH a dirlawnder HSL ill dau yn disgrifio dwyster neu gyfoeth lliw, ond maent yn gwneud hynny mewn gwahanol ffyrdd. Mae LCH yn rhoi ystod ehangach i mi a chyfuniad mwy rhagweladwy rhwng lliwiau.
Gallaf hefyd newid y lliw i greu palet o liwiau sy'n rhannu'r un gwerthoedd ysgafnder a chroma. Yn HSL ac LCH, mae'r sbectrwm lliw yn dechrau ar goch, yn symud trwy wyrdd a glas, ac yn dychwelyd i goch.
Pam Newidiodd OKLCH Sut Rwy'n Meddwl Am Lliw Mae cefnogaeth porwr ar gyfer gofod lliw OKLCH bellach yn eang, hyd yn oed os nad yw offer dylunio - gan gynnwys Braslun - wedi dal i fyny. Yn ffodus, ni ddylai hynny eich atal rhag defnyddio OKLCH. Bydd porwyr yn hapus i drosi gwerthoedd Hex, HSL, LAB, ac RGB yn OKLCH i chi. Gallwch ddiffinio eiddo arfer CSS gyda lliw sylfaen mewn unrhyw le, gan gynnwys Hex: /* Lliw sylfaen */ --sylfaen: #5accd6;
Bydd unrhyw liwiau sy'n deillio ohono yn cael eu trosi i OKLCH yn awtomatig: --foundation-light: oklch (o var(--foundation) [...]; } --foundation-mid: oklch (o var(--foundation) [...]; } --sylfaen-tywyll: oklch (o var(--foundation) [...]; }
Lliw Cymharol Fel System Ddylunio Meddyliwch am liw cymharol fel dweud: “Cymerwch y lliw hwn, tweitiwch ef, yna rhowch y canlyniad i mi.” Mae dwy ffordd i addasu lliw: newidiadau absoliwt a newidiadau cyfrannol. Maent yn edrych yn debyg o ran cod, ond yn ymddwyn yn wahanol iawn ar ôl i chi ddechrau cyfnewid lliwiau sylfaen. Deall y gwahaniaeth hwnnw yw'r hyn sy'n gallu troi defnyddio lliw cymharol yn system. /* Lliw sylfaen */ --sylfaen: #5accd6;
Er enghraifft, gwerth ysgafnder fy lliw sylfaen yw 0.7837, tra bod gan fersiwn dywyllach werth o 0.5837. I gyfrifo'r gwahaniaeth, rwy'n tynnu'r gwerth is o'r un uchaf ac yn cymhwyso'r canlyniad gan ddefnyddio ffwythiant calc(): --sylfaen-tywyll: oklch (o var (--sylfaen) calc(l - 0.20) c h);
I gael lliw ysgafnach, ychwanegaf y gwahaniaeth yn lle hynny: --sylfaen-golau: oklch (o var (--sylfaen) calc(l + 0.10) c h);
Chromamae addasiadau yn dilyn yr un broses. Er mwyn lleihau dwyster fy lliw sylfaen o 0.1035 i 0.0035, rwy'n tynnu un gwerth o'r llall: oklch (o var (--sylfaen) l calc(c - 0.10) h);
I greu palet o arlliwiau, rwy'n cyfrifo'r gwahaniaeth rhwng gwerth lliw fy lliw sylfaen (200) a fy lliw newydd (260): oklch (o var (--sylfaen) l c calc(h + 60));
Mae'r cyfrifiadau hynny'n absoliwt. Pan fyddaf yn tynnu swm penodol, rwy'n dweud i bob pwrpas, “Tynnwch gymaint â hyn bob amser.” Mae'r un peth yn wir wrth ychwanegu gwerthoedd sefydlog: calc(c - 0.10) calc(c + 0.10)
Dysgais derfynau'r dull hwn y ffordd galed. Pan ddibynnais ar dynnu gwerthoedd croma sefydlog, cwympodd lliwiau tuag at lwyd cyn gynted ag y newidiais y sylfaen. Disgynnodd palet a oedd yn gweithio i un lliw am un arall. Mae lluosi yn ymddwyn yn wahanol. Pan fyddaf yn lluosi chroma, rwy'n dweud wrth y porwr: “Lleihau dwyster y lliw hwn yn ôl cyfran.” Mae'r berthynas rhwng lliwiau yn parhau'n gyfan, hyd yn oed pan fydd y sylfaen yn newid: calc(c * 0.10)
Fy Rheolau Symud, Graddio, Ei Gylchdroi
Symud ysgafnder (adio neu dynnu), Graddfa croma (lluosi), Cylchdroi lliw (adio neu dynnu graddau).
Rwy'n graddio croma oherwydd fy mod eisiau i newidiadau dwyster aros yn gymesur â'r lliw sylfaen. Mae perthnasoedd lliw yn gylchdro, felly nid yw lluosi lliw yn gwneud unrhyw synnwyr. Mae ysgafnder yn ganfyddiadol ac absoliwt - mae ei luosi yn aml yn cynhyrchu canlyniadau rhyfedd.
O Un Lliw I Thema Gyfan Mae lliw cymharol yn fy ngalluogi i ddiffinio lliw sylfaen a chynhyrchu pob lliw arall sydd ei angen arnaf - llenwi, strociau, stopiau graddiant, cysgodion - ohono. Ar y pwynt hwnnw, mae lliw yn peidio â bod yn balet ac yn dechrau bod yn system. Mae darluniau SVG yn tueddu i ailddefnyddio'r un ychydig o liwiau ar draws llenwadau, strociau a graddiannau. Mae lliw cymharol yn gadael ichi ddiffinio'r perthnasoedd hynny unwaith a'u hailddefnyddio ym mhobman - yn debyg iawn i animeiddwyr yn ailddefnyddio cefndiroedd i greu golygfeydd newydd.
Newidiwch y lliw sylfaen unwaith, ac mae pob lliw deilliadol yn diweddaru'n awtomatig, heb ailgyfrifo unrhyw beth â llaw. Y tu allan i graffeg animeiddiedig, gallwn ddefnyddio'r un dull hwn i ddiffinio lliwiau ar gyfer cyflwr elfennau rhyngweithiol megis botymau a dolenni. Mae'r lliw sylfaen a ddefnyddiais yn fy “Lullabye-Bye Bear” Toon Title yn las sy'n edrych yn gyan. Mae'r cefndir yn raddiant rheiddiol rhwng fy sylfaen a fersiwn dywyllach.
I greu fersiynau amgen gyda naws hollol wahanol, does ond angen i mi newid y lliw sylfaen: --sylfaen: #5accd6; --grad-diwedd: var(--sylfaen); --grad-start: oklch (o var (--sylfaen) calc(l - 0.2357) calc(c * 0.833) h);
I glymu'r priodweddau personol hynny i'm graddiant SVG heb ddyblygu gwerthoedd lliw, rhoddais arddulliau mewnol yn lle gwerthoedd stop-liw â chod caled:
Mae'r adeilad a'r goeden yn y cefndir yn syml arlliwiau gwahanol o'r un lliw sylfaen. Ar gyfer y llwybrau hynny, roedd angen dau liw llenwi ychwanegol arnaf:
.bg-mid {
llenwi: oklch (o var (--foundation)
calc(l - 0.04) calc(c * 0.91) h);
} .bg-tywyll {
llenwi: oklch (o var (--foundation)
calc(l - 0.12) calc(c * 0.64) h);
} Pan fydd y Sylfeini'n Dechrau Symud
Hyd yn hyn, mae popeth rydw i wedi'i ddangos wedi bod yn statig. Hyd yn oed pan fydd rhywun yn defnyddio codwr lliw i newid y lliw sylfaen, mae'r newid hwnnw'n digwydd ar unwaith. Ond anaml y bydd graffeg animeiddiedig yn aros yn ei unfan - mae'r cliw yn yr enw. Felly, os yw lliw yn rhan o'r system, nid oes unrhyw reswm na all animeiddio hefyd.
Er mwyn animeiddio'r lliw sylfaen, yn gyntaf mae angen i mi ei rannu'n sianeli OKLCH— ysgafnder, croma, a lliw. Ond mae cam ychwanegol pwysig: mae angen i mi gofrestru'r gwerthoedd hynny fel eiddo arfer wedi'i deipio. Ond beth mae hynny'n ei olygu?
Yn ddiofyn, nid yw porwr yn gwybod a yw gwerth eiddo arfer CSS yn cynrychioli lliw, hyd, rhif, neu rywbeth arall yn gyfan gwbl. Mae hynny'n aml yn golygu na ellir eu rhyngosod yn llyfn yn ystod animeiddiad, a neidio o un gwerth i'r llall.
Mae cofrestru eiddo personol yn dweud wrth y porwr pa fath o werth y mae'n ei gynrychioli a sut y dylai ymddwyn dros amser. Yn yr achos hwn, rwyf am i'r porwr drin fy sianeli lliw fel rhifau fel y gellir eu hanimeiddio'n esmwyth.
@eiddo --f-l {
cystrawen: " @eiddo --f-c {
cystrawen: " @eiddo --f-h {
cystrawen: " Ar ôl cofrestru, mae'r eiddo arfer hyn yn ymddwyn fel CSS brodorol. Gall y porwr eu rhyngosod ffrâm wrth ffrâm. Yna rwy'n ailadeiladu'r lliw sylfaen o'r sianeli hynny:
--sylfaen: oklch(var(--f-l) var(--f-c) var(--f-h)); Mae hyn yn gwneud i'r lliw sylfaen ddod yn animable, yn union fel unrhyw werth rhifol arall. Dyma animeiddiad “anadlu” syml sy'n symud ysgafnder yn ysgafn dros amser:
@keyframes anadlu {
0%, 100% { --f-l: 0.36; }
50 % { --f-l: 0.46; }
} .toon-title {
animeiddiad: anadlu rhwyddineb 10s-mewn-allan anfeidrol;
} Oherwydd bod pob lliw arall mewn llenwadau, graddiannau, a strôc yn deillio o --foundation, maen nhw i gyd yn animeiddio gyda'i gilydd, ac nid oes angen diweddaru unrhyw beth â llaw.
Un Lliw Animeiddiedig, Llawer o Effeithiau
Ar ddechrau'r broses hon, roeddwn i'n meddwl tybed a allai gwerthoedd lliw cymharol CSS gynnig mwy o bosibiliadau tra hefyd yn eu gwneud yn symlach i'w gweithredu. Yn ddiweddar, ychwanegais gefndir mwynglawdd aur newydd i dudalen gyswllt fy ngwefan, ac roedd yr iteriad cyntaf yn cynnwys lampau olew sy'n tywynnu ac yn siglo. Roeddwn i eisiau archwilio sut y gallai animeiddio lliwiau cymharol CSS wneud y tu mewn i'r pwll yn fwy realistig trwy ei arlliwio â lliwiau o'r lampau. Roeddwn i eisiau iddyn nhw effeithio ar y byd o'u cwmpas, y ffordd y mae golau go iawn yn ei wneud. Felly, yn hytrach nag animeiddio lliwiau lluosog, fe wnes i adeiladu system goleuo fach sy'n animeiddio un lliw yn unig. Fy nhasg gyntaf oedd gosod haen troshaen rhwng y cefndir a fy lampau:
< llwybr
id=" troshaen"
fill="var(-- overlay-tint)"
[...]
style="mix- blend-modd: lliw"
/> Defnyddiais modd cymysgedd-blend: lliw oherwydd mae hynny'n arlliwio'r hyn sydd oddi tano wrth gadw'r goleuder sylfaenol. Gan mai dim ond pan fydd animeiddiadau'n cael eu troi ymlaen yr wyf am i'r troshaen fod yn weladwy, fe wnes i optio i mewn i'r troshaen:
.svg-mine #overlay {
arddangos: dim;
} @media (yn ffafrio-lleihau-cynnig: dim-dewis) {
.svg-mine[data-animations=ymlaen] # troshaen {
arddangos: bloc;
didreiddedd: 0.5;
}
} Roedd y troshaen yn ei le, ond heb ei gysylltu â'r lampau eto. Roeddwn i angen ffynhonnell golau. Mae fy lampau yn syml, ac mae pob un yn cynnwys elfen gylch yr wyf yn ei niwlio â hidlydd. Mae'r hidlydd yn cynhyrchu niwl meddal iawn dros y cylch cyfan. Yn lle animeiddio'r troshaen a'r lampau ar wahân, rwy'n animeiddio un tocyn lliw “fflam” ac yn deillio popeth arall o hynny. Yn gyntaf, rwy'n cofrestru tri eiddo arfer wedi'u teipio ar gyfer sianeli OKLCH:
@eiddo --fl-l {
cystrawen: " Animeiddiais y sianeli hynny, gan wthio ychydig o fframiau tuag at oren yn fwriadol fel bod y cryndod yn darllen yn glir fel golau tân: @keyframes fflam {
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; }
} Yna fe wnes i gwmpasu'r animeiddiad hwnnw i'r SVG, felly mae'r newidynnau a rennir ar gael i'r lampau a'm troshaen: @media (yn ffafrio-lleihau-cynnig: dim-dewis) {
.svg-mine[data-animations=ymlaen] {
animeiddiad: fflam 3.6s anfeidrol llinol;
ynysu: ynysu; /* Adeiladu lliw fflam o sianeli animeiddiedig */
--fflam: oklch(var(--fl-l) var(--fl-c) var(--fl-h)); /* Lliw lamp yn deillio o fflam */
--lamp-core: oklch (o var(--flame) calc(l + 0.05) calc(c * 0.70) h); /* Arlliw troshaen yn deillio o'r un fflam */
--troshaen-arlliw: oklch (o var (-- fflam)
calc(l + 0.06) calc(c * 0.65) calc(h - 10));
}
} Yn olaf, cymhwysais y lliwiau deilliadol hynny i'r lampau disglair a'r troshaen y maent yn effeithio arnynt:
@media (yn ffafrio-lleihau-cynnig: dim-dewis) {
.svg-mine[data-animations=ymlaen] #mine-lamp-1 > cylch,
.svg-mine[data-animations=ymlaen] #mine-lamp-2 > cylch {
llenwi: var (--lamp-core);
} .svg-mine[data-animations=ymlaen] # troshaen {
arddangos: bloc;
llenwi: var (--overlay-tint);
didreiddedd: 0.5;
}
} Pan fydd y fflam yn symud tuag at oren, mae'r lampau'n cynhesu, ac mae'r olygfa'n cynhesu gyda nhw. Pan fydd y fflam yn oeri, mae popeth yn setlo gyda'i gilydd. Y rhan orau yw nad oes dim yn cael ei ysgrifennu â llaw. Os byddaf yn newid y lliw sylfaen neu'n tweak yr ystodau animeiddio fflam, mae'r system oleuo gyfan yn diweddaru ar yr un pryd.
Gallwch weld y canlyniad terfynol ar fy ngwefan.
Ailddefnyddio, Ail-bwrpasu, Ailymweld
Gorfodwyd yr animeiddwyr Hanna-Barbera hynny i ailddefnyddio elfennau o reidrwydd, ond rwy'n ailddefnyddio lliwiau oherwydd ei fod yn gwneud fy ngwaith yn fwy cyson ac yn haws i'w gynnal. Mae gwerthoedd lliw cymharol CSS yn fy ngalluogi i: Diffinio un lliw sylfaen,
Disgrifiwch sut mae lliwiau eraill yn berthnasol iddo,
Ailddefnyddiwch y perthnasau hynny ym mhob man, a
Animeiddiwch y system trwy newid un gwerth. Nid yw lliw cymharol yn gwneud y thema yn haws yn unig. Mae’n annog ffordd o feddwl lle mae lliw, fel mudiant, yn fwriadol — a lle gall newid un gwerth drawsnewid golygfa gyfan heb ailysgrifennu’r gwaith oddi tano.
