Меню

Как найти промежуточные цвета



Javascript fading — плавное изменение цветов

Как вы уже, наверное, догадались, в статье пойдет речь не о тюльпанах и розах, не о том как из ромашки вывести яблоню (так что юным Мичуринцам не сюда :-), а речь пойдет об изменении цвета элементов веб-страницы, о плавном перетекании одного цвета в другой, т.е. поговорим об fade-эффектах.

Пример

Начнем с примера: наведите курсор на рисунок, а затем уберите курсор.

Если вас не интересуют теоретические подробности, а нужно готовое решение то вам сюда.

Постановка задачи

Дано два цвета: начальный цвет и конечный цвет.

Необходимо найти промежуточные цвета, применяя которые поочередно к элементу на странице, мы получим плавный переход от начального цвета к конечному. А так же следует ещё выяснить, сколько должно быть этих промежуточных цветов и через какое время должна происходить смена одного промежуточного цвета другим.

Взгляд вглубь вопроса

Возьмем в качестве начального цвета, например, белый (white), а в качестве конечного цвета оранжево-красный (orangered).

#FFFFFF ? . n . ? #FF4500

Теперь необходимо найти промежуточные цвета. Хорошо. Но как?! С какой стороны подойти к этому вопросу? Для этого вспомним (или узнаем :-), как формируется цвет на экране монитора. Любой цвет на экране монитора формируется из трех основных цветов: красного ( Red), зеленого ( Green) и синего ( Blue), путем их смешения (т.е. используется цветовая модель RGB). А указываются цвета на веб-странице либо численными значениями в той же системе RGB, либо литералами именованных цветов (например, White для белого, Red для красного и т.д., однако не у всех цветов есть имена), которые, все равно, указывают на численные значения. Но рассматривать задание цвета по имени не будем, ибо имена придуманы для удобства запоминания человеком, но в нашем случае они создадут неудобства при вычислениях, т.к. все равно потребуют перевода в численную форму. Задать численное значение цвета можно двумя способами: шестнадцатеричным и функциональным.

  • В шестнадцатеричном представлении запись значения RGB имеет следующий формат: символ ‘#’, непосредственно за которым следует три или шесть шестнадцатеричных символов. Значение RGB из трех цифр (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Поэтому белый цвет (#ffffff) можно указать в более короткой форме (#fff).
  • В функциональном представлении формат записи значения RGB имеет следующий вид: строка ‘rgb(‘, непосредственно за которой следует список из трех разделенных запятыми вещественных (или целочисленных, или процентных) значений, непосредственно за которыми следует скобка ‘)’. Целочисленное значение 255 эквивалентно процентному значению 100% и шестнадцатеричным значениям F или FF, так что rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

Таким образом, цвет, заданный в числовой форме дает нам значения своих составляющих цветов, что, в конечном итоге, дает нам возможность, изменяя каждый из основных цветов первоначального цвета прийти ко второму, конечному цвету. Если рассматривать наш конкретный пример, то имеем следующее (в скобках указаны значения в десятичной системе):

#FFFFFF = FF (255) FF (255) FF (255)
– CE (206) – FF (255)
#FF4500 = FF (255) 45 (49)

Т.е. для того чтобы из белого цвета получить оранжево-красный нужно красную составляющую белого цвета оставить без изменения (изменить величину на ноль), от зеленой вычесть 206, а из синей вычесть 255. Назовем эти числа (ΔR = 0, ΔG = -206, ΔB= -255) приращениями.

Читайте также:  Какие цвета подойдут темной шатенке с карими глазами

Теперь, чтобы получить, например, два промежуточных цвета + конечный цвет (всего 3), нужно изменять начальные значения RGB-триплета (#FFFFFF) не на полную величину приращений ΔR, ΔG, ΔB, а сначала на 1/3, потом на 2/3 и напоследок на 3/3 (3/3 = 1, это полное значение приращения для получения конечного цвета, который нам, в принципе, и так известен).

#FFFFFF = FF (255) FF (255) FF (255)
#FFBAAA = 255 -0 255 — 206*1/3 = 186 (BA) 255 — 255*1/3 = 170 (AA)
#FF7655 = 255 — 0 255 — 206*2/3 = 118 (76) 255 — 255*2/3 = 85 (55)
#FF4500 = FF (255) 45 (49)

Итак, вычислять промежуточные цвета мы научились. Осталось прояснить ещё один нюанс, для того чтобы человек мог заметить промежуточные цвета, нужно делать временные задержки между сменой цветов, иначе изменения произойдут так быстро, что пользователь просто не заметит промежуточных цветов.

Теперь у нас есть ясная общая картина и мы можем перейти к написанию кода. Есть начальный и конечный цвета, мы можем вычислить n промежуточных цветов (где n выбираем произвольно), и есть величина задержки t (где t выбираем произвольно). Таким образом алгоритм таков: назначаем элементу на веб-странице первый промежуточный цвет, делаем задержку на величину t, назначаем элементу второй промежуточный цвет, делаем задержку, . назначаем элементу n-ый промежуточный цвет, который является конечным цветом.

Реализация

В качестве примера, сделаем кнопку, у которой при клике меняется фон с белого на оранжево-красный.

Поехали. Первая неправильная мысль, которая может прийти в голову, это в цикле вычислять промежуточные цвета, делая задержку после каждой итерации.

Почему неправильная? Потому что, приостановить выполнения кода Javascript невозможно! Однако можно сделать эмуляцию задержки используя методы setInterval или setTimeout. Эти методы выполняют код Javascript с задержкой на заданное количество миллисекунд (setInterval выполняет код многократно через заданный интервал времени, а setTimeout один раз по истечении заданного времени). Верхний цикл можно представить так:

Полный пример выглядит так:

Надеюсь, что вы поняли суть процесса, т.к. вышеприведенный пример больше подходит для обучения, нежели для реального использования. Этот пример рассчитан на фейдинг одного объекта в одном направлении, т.к. жестко заданны параметры в виде глобальных переменных и id элемента. Как реализовать независимые процессы для разных элементов? Как прервать процесс фейдинга и вернуться, так же плавно, к исходному цвету?

Ниже будет представлен законченный с функциональной точки зрения код, решающий поставленные проблемы, но сейчас я хочу немного прояснить ответ на второй вопрос. Как вернуться от промежуточного цвета, до которого успел дойти процесс, к начальному, должно быть понятно. Но как остановить уже запущенный процесс? Как вы помните, процесс реализуется посредством вызова метода setTimeout, поэтому ответ на вопрос заключается в отмене метода setTimeout. При вызове setTimeout() возвращает значение, которое является указателем на этот «таймаут», и чтобы отменить его, нужно вызвать метод clearTimeout(), в качестве параметра которому передается указатель на «таймаут», возвращенный методом setTimeout.

Готовое решение

Библиотека fade.js. Пример её использования ниже.

Основные шаги:

  1. Подключаем библиотеку функций;
  2. Определяем правила;
  3. Вызываем метод fade() для перетекания цвета от начального к конечному, или fade.back() для возврата к начальному цвету.
Читайте также:  Бейонсе какого цвета волос

Разжевываем

Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызвать фейдинг нужно определить правила, по которым он будет выполняться: нужно определить начальный и конечный цвета, так же нужно определить сколько нужно генерировать промежуточных цветов между начальным и конечным; нужно знать к какому CSS свойству элемента применять генерируемые цвета, а также какую временную задержку делать перед сменой одного промежуточного цвета на другой.

Правила определяются с помощью метода fade.addRule

Синтаксис: fade.addRule (sRuleName, sFadeStartColor, sFadeFinishColor, sCSSProp, nMiddleColors, nDelay)

Аргументы:

  • sRuleName — имя правила, задаётся произвольно;
  • sFadeStartColor и sFadeFinishColor — начальный и конечный цвета заданные в шестнадцатиричном виде (полном или сокращенном) ;
  • sCSSProp — CSS свойство цвета которое будет изменяться;
  • nMiddleColors — количество промежуточных цветов (необязательный аргумент, по умолчанию равен 50) ;
  • nDelay — задержка между сменой промежуточных цветов в миллисекундах (необязательный аргумент, по умолчанию равен 1).

Источник

Как найти промежуточные цвета

Система 1: черный — белый

Подсистемы:
• черный — серый — белый
• белый — белый
• белый — серый
• серый — серый
• черный — черный
• черный — серый

Белый и черный — цвета экстремальные, противоположные. Визуальное пространство между ними обычно заполнено промежуточными цветами-серыми различной яркости, от самых светлых до темных. Все эти цвета называются ахроматическими.

Человек, как существо промежуточное между ангелом и демоном, любит сочетания экстремальных цветов с промежуточными (срединными), или системы, состоящие целиком из таких срединных (серых) цветов.

Система 2: белый — красный — черный

Подсистемы:
• красный — белый
• красный — черный

Это первая в истории трехцветная система. В.У.Тернер назвал ее «первичной триадой». Созданная в первый день творения черно-белая планета нуждалась в тепле, в энергии, просила жизни и одушевления. И Бог создал третий цвет, промежуточный между небом и землей, между белым и черным: Он создал красный — цвет жизни, тепла, огня, энергии. О промежуточном положении красного напоминают нам каждый день утренние и вечерние зори: от белого дня к черной ночи появляется переходный цвет — красный цвет заходящего солнца и отблески его на облаках, вершинах гор, высоких зданиях.

Система 3: монохромия

Подсистемы:
• один хроматический цвет + ахроматический
• хроматический цвет с оттенками

Так называется цветовая композиция (система), в которой доминирует какой-либо один хроматический цвет (подсистема 3.1) или его оттенки по цветовому тону, яркости или насыщенности (подсистема 3.2). В том и другом случае композицию могут дополнять ахроматические цвета.

Такая цветовая система наиболее экономна, она щадит нервную энергию и художника, и зрителя, не требуя от него переключения в различные хроматические регистры. Монохромия дает возможность сосредоточить внимание зрителя на какой-либо одной мысли, эмоции, чувстве, ассоциации. Наконец, если главным средством художника является форма, то ему нет необходимости в широкой палитре — ведь цвет вступает в конфликт с формой и может даже разрушить ее.

Система 4: полярные пары

Подсистемы:
• дополнительные цвета
• контрастные цвета
• цвета в большом интервале круга

В известной степени первая система ч-б составляет полярную пару, называемую ахроматической. В природе и искусстве существует множество полярных сочетаний хроматических цветов.

Читайте также:  Что весной цветет розовым цветом

Свет солнца, проходя сквозь земную атмосферу, раздваивается на синий и желтый — сравните спектры света от неба и от прямых лучей солнца. Сложите эти спектры — и вы получите кривую белого света.

Полярная пара визуализирует единство в противопоставлении и целостность в раздвоенности. Пара противоположных цветов в 10-ступенном круге даёт при сложении такой же белый, как и все спектральные (полученные из белого света). Иначе говоря, в паре дополнительных цветов содержится такая же полнота (завершенность), как в солнечном спектре. В желтом-синем видим небо и землю, в красном-зеленом — стебель растения и венчающий его цветок или плод.

Пять основных взаимно-дополнительных пар — это цвета, на которые указывают пять диаметров 10-ступенного цветового круга:

красный — зелено — голубой
оранжевый — голубой
желтый — синий
желто — зеленый — фиолетовый
зеленый — пурпурный

Система 5: трёхцветия (хроматические)

Подсистемы:
• основные цвета — к, з, с
• основные краски — к, ж, с
• краски в вершинах равностороннего треугольника, вписанного в 12-ступенный цветовой круг

Белый солнечный свет, сталкиваясь с плотным материальным телом, разделяется на два потока, один из которых видимый, а другой-невидимый, поглощенный телом. Видимая и невидимая части светового потока окрашены в дополнительные цвета (если твердое тело имеет хроматическую окраску).

Если же белый свет проникает через прозрачную тонкую материю (например, земную атмосферу), то он разделяется на множество разноцветных лучей, образующих три группы: красную, синюю и зеленую. Отец Павел Флоренский заметил этот феномен в природе и описал его в статье «Небесные знамения» (1919 г.).

Наш глаз подобен солнцу; белый свет, действуя на глаз, разделяется на такие же три группы, как и в заревом небе. Три цветоощущающих аппарата нашего органа зрения производят как бы «лучи», или возбуждения трех цветов: красные, зеленые и синие. Впервые гипотеза о трехкомпонентности цветового зрения была высказана М. В. Ломоносовым, а затем исследована и уточнена благодаря трудам Т. Юнга и Г. Гельмгольца (ХVIII — ХIХ в.) Складываясь в различных пропорциях, эти возбуждения (сигналы) образуют ощущения различных цветов — всех спектральных и пурпурных, а также белого цвета.

Художники, работающие с красками, знают, что все хроматические цвета и черный можно получить смешением трёх красок — красной, желтой и синей. Эти краски называются основными; способ их смешения — вычитательный. Не следует путать их с основными цветами, к, з и с, которые смешиваются слагательным способом.

Три основные краски, видимые нами, возбуждают в зрительных центрах коры головного мозга все три цветоощущающих аппарата: красный и синий — соответствующие им по названию приёмники излучений, а желтый возбуждает красный и зеленый в равной степени. Поэтому уже в трёхцветии, хорошо знакомом художникам, есть необходимая полнота всего круга, своего рода космический охват видимого мира. Ведь все остальные цвета круга могут присутствовать в четырёхцветии как промежуточные или оттенки основных; оранжевый — как оттенок желтого или красного, голубой — между синим и зеленым, фиолетовый и пурпурный между синим и красным.

Источник