Kuring nembe nyegerkeun grafik animasi dina halaman wéb kuring kalayan téma énggal sareng sakelompok karakter panaratas, ngalaksanakeun seueur téknik anu kuring dibagikeun dina séri ieu. Sababaraha animasi kuring ngarobah penampilan nalika aya anu berinteraksi sareng aranjeunna atanapi dina waktos anu béda dina sapoe.
Warna dina grafik atop kaca blog abdi robah ti isuk nepi ka peuting unggal poe. Teras, aya mode salju, anu nambihan warna anu tiis sareng tema usum tiris, kahadean tina lapisan overlay sareng mode campuran.
Nalika damel di ieu, kuring mimiti heran naha nilai warna relatif CSS tiasa masihan kuring langkung seueur kontrol bari ogé nyederhanakeun prosésna. Catetan: Dina tutorial ieu, kuring bakal difokuskeun nilai warna relatif sareng rohangan warna OKLCH pikeun téma grafik sareng animasi. Upami anjeun hoyong teuleum jero kana warna rélatif, Ahmad Shadeed nyiptakeun pituduh interaktif anu saé. Sedengkeun pikeun spasi warna, gamuts, sarta OKLCH, urang sorangan Geoff Graham wrote ngeunaan eta.
Pamakéan ulang elemen éta konci. Latar dipaké deui sabisana, kalayan zum sareng overlay ngabantosan ngawangun pamandangan anyar tina karya seni anu sami. Éta lahir tina kabutuhan, tapi ogé nyorong pamikiran dina hal séri tinimbang adegan individu. Masalah sareng Ngamutahirkeun Palette Warna sacara Manual Hayu urang langsung kana tantangan kuring. Dina Judul Toon sapertos kieu - dumasar kana episode Yogi Bear Show 1959 "Lullabye-Bye Bear" - sareng padamelan abdi umumna, palettes dugi ka sababaraha warna anu dipilih.
Kuring nyieun nuansa na tints tina naon atuh nelepon "yayasan" warna kuring rék dilegakeun palette nu tanpa nambahkeun leuwih hues.
Dina Sketch, kuring damel di rohangan warna HSL, janten prosés ieu ngalibatkeun ningkatkeun atanapi ngirangan nilai terang warna yayasan kuring. Jujur, éta sanés tugas anu sesah - tapi milih warna yayasan anu béda-béda peryogi nyiptakeun sakumpulan nuansa sareng warna anu énggal. Ngalakukeun éta sacara manual, deui-deui, gancang janten susah.
Kuring nyebatkeun HSL - H (hue), S (saturasi), sareng L (lightness) - rohangan warna, tapi éta ngan ukur salah sahiji sababaraha cara pikeun ngajelaskeun warna. RGB - R (beureum), G (héjo), B (biru) - meureun nu paling akrab, sahenteuna dina bentuk Hex na. Aya ogé LAB - L (lightness), A (héjo-beureum), B (biru-konéng) - jeung nu leuwih anyar, tapi kiwari loba dirojong LCH - L (lightness), C (chroma), H (hue) - model dina formulir OKLCH na. Kalayan LCH - khususna OKLCH dina CSS - kuring tiasa nyaluyukeun nilai terang warna yayasan kuring.
Atawa kuring bisa ngarobah chroma na. Kroma LCH sareng jenuh HSL duanana ngajelaskeun inténsitas atanapi kabeungharan warna, tapi aranjeunna ngalakukeunana ku cara anu béda. LCH masihan kuring rentang anu langkung lega sareng campuran anu langkung tiasa diprediksi antara warna.
Kuring ogé bisa ngarobah hue pikeun nyieun palette tina kelir nu babagi lightness sarua jeung nilai chroma. Dina duanana HSL jeung LCH, spéktrum hue dimimitian dina beureum, ngalir ngaliwatan héjo sarta bulao, sarta balik deui ka beureum.
Naha OKLCH Robah Kumaha Kuring Mikir Ngeunaan Warna Pangrojong browser pikeun rohangan warna OKLCH ayeuna nyebar, sanaos alat desain - kalebet Sketsa - teu acan kapendak. Untungna, éta henteu kedah ngeureunkeun anjeun nganggo OKLCH. Panyungsi bakal bagja ngarobih nilai Hex, HSL, LAB, sareng RGB kana OKLCH pikeun anjeun. Anjeun tiasa netepkeun sipat khusus CSS kalayan warna dasar dina rohangan naon waé, kalebet Hex: /* Warna pondasi */ --pondasi: # 5accd6;
Warna naon waé anu diturunkeun tina éta bakal otomatis dirobih janten OKLCH: --foundation-light: oklch(tina var(--foundation) [...]; } --foundation-mid: oklch (tina var (--foundation) [...]; } --foundation-dark: oklch(tina var(--foundation) [...]; }
Warna Relatif Salaku System Desain Pikirkeun warna rélatif sapertos nyarios: "Candak warna ieu, tweak, teras pasihan hasilna." Aya dua cara pikeun nyaluyukeun warna: parobahan mutlak sareng parobahan proporsional. Éta katingalina sami dina kode, tapi kalakuanana béda pisan nalika anjeun ngamimitian ngagentos warna yayasan. Ngartos yén bédana nyaéta anu tiasa janten nganggo warna relatif kana sistem. /* Warna pondasi */ --pondasi: # 5accd6;
Contona, nilai lightness warna yayasan mah 0.7837, sedengkeun versi darker boga nilai 0.5837. Pikeun ngitung bédana, kuring ngirangan nilai anu langkung handap tina anu langkung luhur sareng nerapkeun hasilna nganggo fungsi calc (): --poék-poék: oklch(tina var(--foundation) calc (l - 0,20) c h);
Pikeun ngahontal warna anu langkung hampang, kuring nambihan bédana: --cahaya-pondasi: oklch(tina var(--foundation) calc (l + 0,10) c h);
Chromapangaluyuan nuturkeun prosés anu sarua. Pikeun ngirangan inténsitas warna yayasan kuring tina 0.1035 ka 0.0035, kuring ngirangan hiji nilai tina anu sanés: oklch(tina var(--foundation) l kal (c - 0,10) h);
Pikeun nyieun palette of hues, kuring ngitung bédana antara nilai hue warna yayasan kuring (200) jeung hue anyar kuring (260): oklch(tina var(--foundation) l c calc(h + 60));
Éta itungan téh mutlak. Nalika kuring ngirangan jumlah anu tetep, kuring sacara efektif nyarios, "Sok ngirangan seueur ieu." Sami manglaku nalika nambahkeun nilai tetep: kal (c - 0.10) kal (c + 0,10)
Kuring diajar watesan pendekatan ieu cara teuas. Nalika kuring ngandelkeun pangurangan nilai kroma tetep, warna runtuh ka arah kulawu pas kuring ngarobih pondasi. A palette nu digawé pikeun hiji warna murag eta pikeun sejen. Multiplication behaves béda. Nalika kuring ngalikeun kroma, kuring nyarioskeun ka browser: "Ngurangan inténsitas warna ieu ku proporsi." Hubungan antara kelir tetep gembleng, sanajan yayasan robah: kal (c * 0.10)
Pindahkeun Abdi, Skala, Rotasikeun Aturan
Mindahkeun lightness (tambah atawa ngurangan), Skala kroma (kalikeun), Rotasikeun hue (nambah atanapi ngirangan derajat).
Kuring skala chroma sabab kuring hoyong parobahan inténsitas tetep sabanding jeung warna dasar. Hubungan hue anu rotational, jadi ngalikeun hue teu aya rasa. Lightness nyaeta perceptual jeung mutlak - ngalikeun eta mindeng ngahasilkeun hasil ganjil.
Ti Hiji Warna Ka Sakabeh Téma Warna rélatif ngamungkinkeun kuring pikeun ngartikeun warna pondasi sareng ngahasilkeun unggal warna anu kuring peryogikeun - ngeusian, guratan, gradién lirén, bayangan - tina éta. Dina titik éta, warna lirén janten palette sareng mimiti janten sistem. Ilustrasi SVG condong ngagunakeun deui sababaraha warna anu sami dina eusian, guratan, sareng gradién. Warna rélatif ngamungkinkeun anjeun nangtukeun hubungan éta sakali sareng dianggo deui di mana waé - sapertos animator nganggo latar tukang pikeun nyiptakeun adegan énggal.
Robah warna pondasi sakali, sareng unggal warna turunan diropéa sacara otomatis, tanpa ngitung deui naon waé ku leungeun. Di luar grafik animasi, abdi tiasa nganggo pendekatan anu sami ieu pikeun nangtukeun warna pikeun kaayaan elemen interaktif sapertos tombol sareng tautan. Warna pondasi anu kuring dianggo dina Judul Toon "Lullabye-Bye Bear" nyaéta biru anu katingalina cyan. Latar nyaéta gradién radial antara yayasan kuring sareng versi anu langkung poék.
Pikeun nyiptakeun vérsi alternatif kalayan suasana anu béda-béda, kuring ngan ukur kedah ngarobih warna yayasan: --pondasi: # 5accd6; --grad-tungtung: var(--foundation); --grad-start: oklch(tina var(--foundation) calc (l - 0,2357) calc (c * 0,833) h);
Pikeun ngabeungkeut sipat-sipat khusus éta kana gradién SVG kuring tanpa duplikasi nilai warna, kuring ngagentos nilai warna-eureun anu disandi ku gaya inline:
Salajengna, kuring kedah mastikeun yén Toon Text kuring salawasna kontras sareng warna yayasan naon waé anu kuring pilih. Rotasi hue 180 derajat ngahasilkeun warna pelengkap anu pasti muncul - tapi tiasa ngageter teu nyaman: .text-light { eusian: oklch(tina var(--foundation) l c calc(h + 180)); }
Pergeseran 90° ngahasilkeun warna sekundér anu terang tanpa pelengkap lengkep: .text-light { eusian: oklch(tina var(--foundation) l c calc(h - 90)); }
Rékréasi kuring tina Quick Draw McGraw's 1959 Toon Title "El Kabong" ngagunakeun téknik anu sami tapi kalayan palet anu langkung variatif. Salaku conto, aya gradién radial sanés antara warna yayasan sareng sahadé anu langkung poék.
Wangunan sareng tangkal di latar tukang ngan ukur nuansa béda tina warna pondasi anu sami. Pikeun jalur éta, kuring peryogi dua warna eusian tambahan: .bg-mid { eusian: oklch(tina var(--foundation) calc (l - 0,04) calc (c * 0,91) h); }
.bg-poék { eusian: oklch(tina var(--foundation) calc (l - 0,12) calc (c * 0,64) h); }
Nalika Yayasan Ngawitan Pindah
Sajauh ieu, sadayana anu kuring nunjukkeun statik. Sanaos aya anu nganggo pemilih warna pikeun ngarobih warna pondasi, parobihan éta lumangsung langsung. Tapi grafik animasi jarang nangtung kénéh - clue aya dina nami. Janten, upami warna mangrupikeun bagian tina sistem, teu aya alesan yén éta ogé henteu tiasa ngahirupkeun.
Pikeun ngahirupkeun warna pondasi, mimitina kuring kedah ngabagi kana saluran OKLCH na- lightness, chroma, sarta hue. Tapi aya léngkah tambahan anu penting: Abdi kedah ngadaptarkeun nilai-nilai éta salaku sipat khusus anu diketik. Tapi naon hartina?
Sacara standar, browser teu nyaho naha nilai sipat custom CSS ngagambarkeun warna, panjang, angka, atawa hal sejenna sagemblengna. Éta sering hartosna aranjeunna henteu tiasa diinterpolasi sacara lancar salami animasi, sareng luncat tina hiji nilai ka nilai salajengna.
Ngadaptarkeun harta adat nyarioskeun panyungsi jinis nilai anu diwakilan sareng kumaha kedah kalakuanana dina waktosna. Dina hal ieu, abdi hoyong browser pikeun ngubaran saluran warna abdi salaku angka ambéh maranéhanana bisa animasi mulus.
@properti --f-l {
sintaksis: "
@properti --f-c {
sintaksis: "
@properti --f-h {
sintaksis: "
Sakali didaptarkeun, sipat custom ieu kalakuanana kawas CSS asli. browser nu bisa interpolate aranjeunna pigura-demi-pigura. Kuring teras ngawangun deui warna dasar tina saluran éta: --pondasi: oklch(var(--f-l) var(--f-c) var(--f-h));
Hal ieu ngajadikeun warna yayasan jadi animatable, kawas sagala nilai numerik lianna. Ieu animasi "engapan" saderhana anu ngagentos hampang dina waktosna: @keyframes ngambekan { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-judul { animasi: ngambekan 10s betah-di-kaluar taya wates; }
Kusabab unggal warna séjén dina eusian, gradién, sareng guratan diturunkeun tina --foundation, aranjeunna sadayana ngahirupkeun babarengan, sareng teu aya anu kedah diropéa sacara manual. Hiji Warna Animasi, Seueur Balukar Dina mimiti prosés ieu, kuring wondered naha nilai warna relatif CSS bisa nawiskeun leuwih kamungkinan bari ogé nyieun eta basajan pikeun nerapkeun. Kuring nembe ditambahkeun tukang tambang emas anyar ka kaca kontak ramatloka kuring urang, sarta Iteration munggaran kaasup lampu minyak nu glow na ayun.
Abdi hoyong ngajalajah kumaha ngahirupkeun warna rélatif CSS tiasa ngajantenkeun interior tambang langkung realistis ku cara ngawarnaan ku warna tina lampu. Abdi hoyong aranjeunna mangaruhan dunya di sakurilingna, sapertos cahaya nyata. Janten, tinimbang ngahirupkeun sababaraha warna, kuring ngawangun sistem pencahayaan leutik anu ngan ukur ngahirupkeun hiji warna.
Tugas munggaran kuring nyaéta pikeun nempatkeun lapisan overlay antara latar tukang sareng lampu kuring:
I dipaké mix-blend-mode: warna sabab tints naon handapeun eta bari preserving nu luminance kaayaan. Kusabab kuring ngan ukur hoyong overlay tiasa katingali nalika animasi dihurungkeun, kuring ngadamel overlay milih: .svg-mine #overlay { pintonan: euweuh; }
@media (resep-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { pintonan: blok; opacity: 0,5; } }
Overlay ieu di tempat, tapi teu acan disambungkeun kana lampu. Abdi peryogi sumber cahaya. Lampu kuring basajan, sareng masing-masing ngandung unsur bunderan anu kuring kabur ku saringan. Saringan ngahasilkeun blur anu lembut pisan dina sakumna bunderan.
Gantina ngahirupkeun overlay sareng lampu nyalira, kuring ngahirupkeun token warna "seuneu" tunggal sareng kéngingkeun sadayana anu sanés. Mimiti, kuring ngadaptarkeun tilu sipat khusus anu diketik pikeun saluran OKLCH:
@properti --fl-l {
sintaksis: "
Kuring ngajimatkeun saluran-saluran éta, ngahaja ngadorong sababaraha pigura ka arah oranyeu supados kedip-kedipna berbunyi jelas sapertos lampu seuneu:
@keyframes seuneu { 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; } }
Teras kuring nyéépkeun animasi éta ka SVG, janten variabel anu dibagikeun sayogi pikeun lampu sareng overlay kuring:
@media (resep-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animasi: seuneu 3.6s linier taya; ngasingkeun: ngasingkeun;
/* Ngawangun warna seuneu tina saluran animasi */ --seuneu: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Warna lampu asalna tina seuneu */ --lampu-inti: oklch (tina var (--seuneu) calc (l + 0,05) calc (c * 0,70) h);
/* Tint overlay diturunkeun tina seuneu anu sami */ --overlay-tint: oklch (tina var (--seuneu) calc (l + 0,06) calc (c * 0,65) calc (h - 10)); } }
Tungtungna, kuring nerapkeun warna anu diturunkeun kana lampu anu bersinar sareng overlay anu mangaruhan: @media (resep-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { eusian: var (--lampu-inti); }
.svg-mine[data-animations=on] #overlay { pintonan: blok; eusian: var (--overlay-tint); opacity: 0,5; } }
Lamun seuneu pindah ka arah oranyeu, lampu haneut nepi, sarta pamandangan warms kalawan aranjeunna. Nalika seuneu tiis, sagalana settles babarengan. Bagian anu pangsaéna nyaéta teu aya anu ditulis sacara manual. Upami kuring ngarobih warna pondasi atanapi nyéépkeun rentang animasi seuneu, sadaya sistem pencahyaan bakal ngamutahirkeun sakaligus. Anjeun tiasa ningali hasil ahir dina halaman wéb kuring. Paké deui, Repurpose, Revisited Animator Hanna-Barbera ieu kapaksa repurpose elemen kaluar tina kabutuhan, tapi kuring make deui kelir sabab ngajadikeun karya kuring leuwih konsisten tur gampang pikeun mulasara. Nilai warna relatif CSS ngamungkinkeun kuring pikeun:
Nangtukeun hiji warna yayasan, Jelaskeun kumaha hubungan warna anu sanés sareng éta, Paké deui hubungan maranéhanana madhab, jeung Ngahirupkeun sistem ku cara ngarobah hiji nilai.
Warna rélatif henteu ngan ukur ngajantenkeun téma. Éta nyorong cara mikir dimana warna, sapertos gerak, dihaja - sareng dimana ngarobih hiji nilai tiasa ngarobih sadayana pamandangan tanpa nyerat deui padamelan di handapeunana.
