Күптән түгел мин үз сайтымдагы анимацион графиканы яңа тема һәм пионер персонажлары белән яңарттым, бу сериядә бүлешкән күп техниканы кулланып. Кайбер анимацияләр кемдер алар белән аралашканда яки көннең төрле вакытларында тышкы кыяфәтне үзгәртә.
Минем блог битләрендәге график төсләр көн саен иртәдән төнгә кадәр үзгәрә. Аннары, кар режимы бар, ул салкын төсләр һәм винтерия темасы өсти, каплау катламы һәм кушылу режимы.
Моның өстендә эшләгәндә, мин CSS чагыштырма төс кыйммәтләре миңа күбрәк контроль бирә аламы, процессны гадиләштерә аламы дип уйлана башладым. Искәрмә: Бу дәреслектә мин чагыштырма төс кыйммәтләренә һәм графика һәм анимация темасы өчен OKLCH төс мәйданына игътибар итәрмен. Әгәр дә сез чагыштырма төскә тирән керергә телисез икән, Әхмәт Шаид искиткеч интерактив кулланма ясады. Төс төсләренә, гамутларга һәм OKLCHга килгәндә, безнең Джефф Грэм алар турында язган.
Элементларны кат-кат куллану төп иде. Фоннар мөмкин булганда кабат кулланылды, зурлау һәм каплау белән бер үк сәнгать әсәрләреннән яңа күренешләр төзергә булышты. Ул кирәклектән туган, ләкин ул шулай ук аерым күренешләр түгел, ә серия ягыннан уйланырга дәртләндерде. Төс палитраларын кул белән яңарту проблемасы Әйдәгез, минем проблемага туры килик. Мондый Тун Титулларында - 1959 Йоги Аю Шоу "Lullabye-Bye Аю" эпизодына нигезләнеп - һәм минем эшем, палитра берничә төс белән чикләнә.
Палитраны киңәйтү өчен, мин үземнең "нигез" төсе дип аталган әйберләрдән күләгәләр һәм төсләр ясыйм.
Эскизда мин HSL төс киңлегендә эшлим, шуңа күрә бу процесс минем төп төснең җиңеллеген арттыру яки киметүне үз эченә ала. Дөресен генә әйткәндә, бу авыр эш түгел - ләкин башка төсне сайлау бөтенләй яңа күләгәләр һәм төсләр җыелмасын булдыруны таләп итә. Моны кул белән эшләсәң, тиз эшләнә.
Мин HSL - H (hue), S (туендыру), һәм L (җиңеллек) - төс киңлеге турында әйттем, ләкин бу төсне сурәтләү өчен берничә ысулның берсе. RGB - R (кызыл), G (яшел), В (зәңгәр) - иң таныш, мөгаен, аның Hex формасында. Шулай ук LAB - L (җиңеллек), А (яшел - кызыл), В (зәңгәр - сары) - һәм яңарак, ләкин хәзер киң кулланылган LCH - L (җиңеллек), C (хрома), H (hue) - аның OKLCH формасында. LCH ярдәмендә - CSS-та махсус OKLCH - мин нигез төсенең җиңеллек кыйммәтен көйли алам.
Яисә мин аның хромасын үзгәртә алам. LCH хромасы һәм HSL туендыру икесе дә төснең интенсивлыгын яки байлыгын тасвирлыйлар, ләкин алар моны төрлечә эшлиләр. LCH миңа киңрәк диапазон һәм төсләр арасындагы алдан әйтеп була.
Мин шулай ук бер үк җиңеллек һәм хрома кыйммәтләре булган төсләр палитрасын булдыру өчен төсне үзгәртә алам. HSL да, LCH да, төс спектры кызылдан башлана, яшел һәм зәңгәр аша хәрәкәтләнә һәм кызылга кайта.
Ни өчен OKLCH төс турында уйлавымны үзгәртте OKLCH төс мәйданы өчен браузер ярдәме хәзер киң таралган, хәтта дизайн кораллары - эскизны да кертеп. Бәхеткә, бу сезне OKLCH кулланудан туктатырга тиеш түгел. Браузерлар шатланып Hex, HSL, LAB, RGB кыйммәтләрен сезнең өчен OKLCH итеп үзгәртәчәк. Сез CSS махсус милеген нигез төсе белән теләсә нинди киңлектә билгели аласыз, шул исәптән Hex: / * Фундамент төсе * / - нигез: # 5accd6;
Аннан алынган төсләр автоматик рәвештә OKLCHга әйләнәчәк: - фундамент-яктылык: оклч (вардан (- нигездән) [...];} - фундамент-урта: оклч (вардан (- нигездән) [...];} - фундамент-караңгы: оклч (вардан (- нигездән) [...];}
Дизайн системасы буларак чагыштырма төс Нисби төс турында уйлагыз: "Бу төсне алыгыз, чистартыгыз, аннары миңа нәтиҗәләр бирегез." Төсне көйләү өчен ике ысул бар: абсолют үзгәрешләр һәм пропорциональ үзгәрешләр. Алар кодка охшаш, ләкин нигез төсләрен алыштыра башлагач, үзләрен төрлечә тоталар. Бу аерманы аңлау чагыштырмача төсне системага әйләндерә ала. / * Фундамент төсе * / - нигез: # 5accd6;
Мәсәлән, минем нигез төсенең җиңеллеге бәясе - 0,7837, караңгы версиясе - 0,5837. Аерымны исәпләү өчен, мин түбән кыйммәтне югарырак итеп алам һәм нәтиҗәне calc () функциясе ярдәмендә кулланам: - нигез-караңгы: oklch (var (- нигездән) кальк (л - 0,20) с ч);
Aиңел төскә ирешү өчен, мин аерманы өстим: - фундамент-яктылык: oklch (var (- нигездән) кальк (л + 0,10) с ч);
Хромакөйләүләр бер үк процесс буенча бара. Минем нигез төсенең интенсивлыгын 0.1035 дән 0,0035гә кадәр киметү өчен, мин бер кыйммәтне икенчесеннән алам: oklch (var (- нигездән) l кальк (с - 0,10) ч);
Буяу палитра ясау өчен, мин төп төснең (200) hue кыйммәте белән яңа төс (260) арасындагы аерманы саныйм: oklch (var (- нигездән) l с кальк (h + 60));
Бу исәпләүләр абсолют. Билгеләнгән сумманы алгач, мин нәтиҗәле әйтәм: "waysәрвакыт моны алыгыз". Төп кыйммәтләр өстәгәндә шулай ук кулланыла: исәпләү (с - 0,10) исәпләү (с + 0,10)
Бу ысулның чикләрен мин авыр юл белән белдем. Мин тотрыклы хрома кыйммәтләрен алуга таянгач, нигезне үзгәрткәч үк төсләр соры төскә төштеләр. Бер төс өчен эшләгән палитра икенчесенә аерылды. Күп тапкырлау төрлечә эш итә. Хроманы тапкырлагач, мин браузерга әйтәм: "Бу төснең интенсивлыгын пропорциягә киметегез." Төсләр арасындагы бәйләнеш, нигез үзгәрсә дә, саклана: исәпләү (с * 0,10)
Минем аны күчерү, масштаблау, әйләндерү кагыйдәләре
Lightиңеллекне күчерегез (өстәгез яки алыгыз), Масштаб хромасы (тапкырлау), Hue әйләндерегез (градусны өстәгез яки алыгыз).
Мин хроманы масштаблыйм, чөнки төп төскә пропорциональ булып интенсивлык үзгәрүен телим. Hue мөнәсәбәтләре әйләнешле, шуңа күрә hue тапкырлау мәгънәсез. Lightиңеллек сиземләү һәм абсолют - аны тапкырлау еш сәер нәтиҗәләр бирә.
Бер төстән бөтен темага Нисби төс миңа нигез төсен билгеләргә һәм миңа кирәк булган башка төсләрне ясарга мөмкинлек бирә - тутыра, сугалар, градиент тукталышлары, күләгәләр - аннан. Шул вакытта төс палитра булудан туктый һәм система була башлый. SVG иллюстрацияләре тутыру, инсульт һәм градиентлар аша бер үк төсләрне кабат кулланырга омтыла. Нисби төс сезгә бу мөнәсәбәтләрне бер тапкыр билгеләргә һәм аларны бөтен җирдә кабат кулланырга мөмкинлек бирә - аниматорлар яңа күренешләр ясау өчен фонны кабат кулланган кебек.
Фундамент төсен бер тапкыр үзгәртегез, һәм барлыкка килгән төс автоматик рәвештә яңартыла, кул белән бернәрсә дә исәпләмичә. Анимация графикасыннан тыш, мин төймәләр һәм сылтамалар кебек интерактив элементларның төсләрен билгеләү өчен шул ук ысулны куллана алыр идем. Минем "Lullabye-Bye Аю" тон исемендә кулланган нигез төсе - зәңгәрсу зәңгәр. Фон - минем нигез белән караңгы версия арасында радиаль градиент.
Бөтенләй башка кәеф белән альтернатив версияләр ясау өчен, миңа нигез төсен үзгәртергә кирәк: - нигез: # 5accd6; - град-ахыр: var (- нигез); - град-старт: оклч (вардан (- нигездән)) кальк (л - 0.2357) кальк (с * 0.833) с);
Бу махсус сыйфатларны минем SVG градиентына бәйләү өчен, төс кыйммәтләрен кабатламыйча, мин каты кодлы тукталыш төс кыйммәтләрен эчке стильләр белән алыштырдым:
<юл тутыру = "url (# bg-grad)" fill = "# 5DCDD8" d = "[...]" />
Алга таба, миңа Toon Text һәрвакыт нинди төс сайласа да, капма-каршы булуын тәэмин итәргә кирәк иде. 180дег төс әйләнеше тулы төс чыгара, әлбәттә, популяр - ләкин уңайсыз тибрәнә ала: .text-light { тутыру: оклч (вардан (- нигездән) l с кальк (h + 180)); }
90 ° смена тулыландырылмыйча ачык икенчел төс чыгара: .text-light { тутыру: оклч (вардан (- нигездән)) l c calc (h - 90)); }
Минем тиз тарту МакГроу 1959-нчы тон исеме "Эль Кабонг" шул ук техниканы куллана, ләкин күптөрле палитра белән. Мәсәлән, нигез төсе белән караңгы күләгә арасында тагын бер радиаль градиент бар.
Фондагы бина һәм агач бер үк төснең төрле төсләре. Бу юллар өчен миңа ике өстәмә тутыру төсе кирәк иде: .bg-mid { тутыру: оклч (вардан (- нигездән) кальк (л - 0,04) кальк (с * 0,91) ч); }
.bg-dark { тутыру: оклч (вардан (- нигездән)) кальк (л - 0,12) кальк (с * 0,64) ч); }
Фундаментлар хәрәкәтләнә башлагач Әлегә мин күрсәткәннәрнең барысы да статик. Кем дә булса төс сайлау өчен төс сайлаучыны кулланса да, бу үзгәреш шунда ук була. Ләкин анимация графикасы бик сирәк тора - бу исем исемдә. Шулай итеп, төс системаның бер өлеше булса, ул җанландыра алмый. Фундамент төсен җанландыру өчен, башта аны OKLCH каналларына бүләргә кирәк- җиңеллек, хрома һәм төс. Ләкин мөһим өстәмә адым бар: миңа бу кыйммәтләрне типик үзенчәлекләр итеп теркәлергә кирәк. Ләкин бу нәрсәне аңлата? Килешү буенча, браузер CSS махсус мөлкәт бәясе төсне, озынлыкны, санны яки бөтенләй башка нәрсәне күрсәтәме, белми. Бу еш кына анимация вакытында интерполяцияләнә алмыйлар, һәм бер кыйммәттән икенчесенә сикерәләр. Заказлы милекне теркәү браузерга ул күрсәткән кыйммәтнең төрен һәм вакыт узу белән үзен ничек тотарга тиешлеген күрсәтә. Бу очракта, мин браузерның төс каналларыма саннар кебек каравын телим, алар шома анимацияләнсеннәр өчен. @property --f-l { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 0,40; }
@property --f-c { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 0,11; }
@property --f-h { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 305; }
Теркәлгәннән соң, бу үзенчәлекләр туган CSS кебек эш итәләр. Браузер аларны рамкадан интерполяцияли ала. Аннары мин шул каналлардан нигез төсен торгызам: - нигезләү: оклч (var (- f-l) var (- f-c) var (- f-h));
Бу, башка сан кыйммәтләре кебек, нигез төсен җанландыра. Менә гади "сулыш" анимациясе, ул вакыт белән җиңеллекне үзгәртә: @keyframes сулый { 0%, 100% {--f-l: 0,36; } 50% {--f-l: 0.46; } }
.toon-title { анимация: 10-нчы җиңеллек белән чиксез сулыш; }
Чөнки тутыру, градиентлар һәм инсульттагы башка төсләр - нигездән алынган, алар барысы бергә җанланалар, һәм бернәрсә дә кул белән яңартылырга тиеш түгел. Бер анимация төсе, күп эффектлар Бу процесс башында, мин CSS чагыштырма төс кыйммәтләре күбрәк мөмкинлекләр тәкъдим итә аламы, шул ук вакытта аларны тормышка ашыруны гадиләштерә аламы дип уйладым. Күптән түгел сайтымның контакт битенә яңа алтын шахтасы фонын өстәдем, һәм беренче итерациядә ялтырап торган һәм селкенгән май лампалары кертелде.
CSS чагыштырма төсләрне анимацияләү минаның эчке өлешен лампалардан төсләр белән буяп, реальләштерә алуын тикшерергә теләдем. Аларның әйләнә-тирә дөньяга, чын яктылык кебек тәэсир итүләрен теләдем. Шулай итеп, берничә төсне анимацияләү урынына, мин бер төсне генә җанландыручы кечкенә яктырту системасы төзедем.
Минем беренче бурычым фон белән лампалар арасында катлам катламы урнаштыру иде: <юл id = "каплау" тутыру = "var (- каплау-тон)" [...] style = "mix-mix-mode: color" />
Мин микс-бленд-режим кулландым: төс, чөнки ул төп яктылыкны саклап калганда, аның астындагы нәрсәне күрсәтә. Анимация кабызылганда, каплауның күренүен теләгәнгә, мин каплауны оптимальләштердем: .svg-mine #overlay { күрсәтү: юк; }
@media (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { .svg-mine [data-animations = on] #overlay { күрсәтү: блок; караңгылык: 0,5; } }
Каплау урында иде, ләкин лампаларга тоташмаган. Миңа яктылык чыганагы кирәк иде. Минем лампалар гади, һәм аларның һәрберсендә фильтр белән төссезләнгән түгәрәк элемент бар. Фильтр бөтен түгәрәк өстендә бик йомшак төс ала.
Өстәмә һәм лампаларны аерым анимацияләү урынына, мин бер "ялкын" төсле билге җанландырам һәм бүтәннәрне аннан алам. Беренчедән, мин OKLCH каналлары өчен өч типтагы махсус характеристиканы теркәләм: @property --fl-l { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 0.86; } @property --fl-c { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 0,12; } @property --fl-h { синтаксис: "<сан>"; мирас: дөрес; башлангыч кыйммәт: 95; }
Мин бу каналларны анимацияләдем, белә торып берничә рамны кызгылт сарыга этәрдем, шуңа күрә флирер ут кебек ачык укый:
@keyframes ялкыны { 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 (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { .svg-mine [data-animations = on] { анимация: ялкын 3.6с чиксез сызыклы; изоляция: изоляцияләү;
/ * Анимация каналларыннан ялкын төсе төзегез * / - ялкын: оклч (var (- fl-l) var (- fl-c) var (- fl-h));
/ * Уттан алынган лампа төсе * / - лампочка: оклч (вардан (- ялкын) кальк (л + 0,05) кальк (с * 0,70) с);
/ * Шул ук ялкыннан алынган каплау төсе * / - overlay-tint: oklch (вардан (- ялкын) кальк (л + 0.06) кальк (с * 0,65) кальк (ч - 10)); } }
Ниһаять, мин алынган төсләрне ялтырап торган лампаларга һәм алар тәэсир иткән каплауга кулландым: @media (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { .svg-mine [data-animations = on] # мина-лампа-1> түгәрәк, .svg-mine [data-animations = on] # мина-лампа-2> түгәрәк { тутыру: var (- лампа-үзәк); }
.svg-mine [data-animations = on] #overlay { күрсәтү: блок; тутыру: var (- каплау-тон); караңгылык: 0,5; } }
Ут кызгылт сарыга күчкәч, лампалар җылыналар, күренеш алар белән җылыналар. Ут суынгач, барысы бергә урнаша. Иң яхшысы - бернәрсә дә кул белән язылмаган. Әгәр мин нигез төсен үзгәртсәм яки ялкын анимация диапазонын үзгәртсәм, бөтен яктырту системасы берьюлы яңартыла. Соңгы нәтиҗәләрне минем сайтта күрә аласыз. Кабат куллану, кабатлау, яңадан карау Бу Ханна-Барбера аниматорлары кирәклектән элементларны яңадан ясарга мәҗбүр булдылар, ләкин мин төсләрне кабат кулланам, чөнки бу минем эшемне эзлекле һәм саклауны җиңеләйтә. CSS чагыштырма төс кыйммәтләре миңа рөхсәт итә:
Бер нигез төсен билгеләгез, Башка төсләрнең аның белән ничек бәйләнешен сурәтләгез, Бу мөнәсәбәтләрне бөтен җирдә кулланыгыз, һәм Бер кыйммәтне үзгәртеп системаны җанландырыгыз.
Нисби төс теманы җиңеләйтми. Бу төс, хәрәкәт кебек, белә торган уйлау ысулын дәртләндерә - һәм бер кыйммәтне үзгәртү бөтен күренешне аның астындагы әсәрне яңадан язмыйча үзгәртә ала.
