Плавный переход от одного цвета к другому
musicstashall
Знающий
- #1
Всем доброго.
Хотел реализовать функцию для плавного изменения цвета и понял, что не так просто. Сделал тупо и получилось что-то не то:
Global $GUI = GUICreate('', 200, 200)
GUISetState()
GUISetBkColor(0x0093BC, $GUI)
For $i = 0x0093BC To 0x7F4200 Step 12
;ConsoleWrite($i&@CR)
GUISetBkColor('0x'&Hex($i, 6), $GUI)
NextКто знает, поделитесь пожалуйста. Мне нужно получать непосредственно промежуточные числа цвета (например в 100 шагов), а не рисовать на окне, поэтому GDIP наверное не подойдет, хотя рассмотрю любые варианты.
InnI
AutoIT Гуру
- #2
Для улучшения визуального восприятия увеличьте шаг и добавьте задержку
Global $GUI = GUICreate('', 200, 200)
GUISetState()
GUISetBkColor(0x0093BC, $GUI)
For $i = 0x0093BC To 0x7F4200 Step 500
ConsoleWrite('0x'&Hex($i, 6)&@CR)
GUISetBkColor($i, $GUI)
If GUIGetMsg() = -3 Then Exit
Sleep(111)
NextА если нужно изменение «по радуге», то вы уже спрашивали здесь: https://www.autoitscript.com/forum/topic/189130-colorization-custom-sliders/
GUICreate("", 200, 200)
GUISetState()
For $h = 0 To 360
$iRGB = HSLToRGB($h / 360, 1, 0.5)
GUISetBkColor($iRGB)
ConsoleWrite(Hex($iRGB) & @CRLF)
If GUIGetMsg() = -3 Then Exit
Sleep(11)
Next
Func HSLToRGB($h, $s, $l)
If Not $s Then Return BitShift(0xFF * $l, -16) + BitShift(0xFF * $l, -8) + BitShift(0xFF * $l, 0)
Local Const $q = $l < 0.
5 ? $l * (1 + $s) : $l + $s - $l * $s
Local Const $p = 2 * $l - $q
Return BitShift(0xFF * HUEtoRGB($p, $q, $h - 0.33333333), -16) + BitShift(0xFF * HUEtoRGB($p, $q, $h), -8) + BitShift(0xFF * HUEtoRGB($p, $q, $h + 0.33333333), 0)
EndFunc
Func HUEtoRGB($p, $q, $t)
If($t < 0) Then $t += 1
If($t > 1) Then $t -= 1
If($t < 0.16666666) Then Return $p + ($q - $p) * 6 * $t
If($t < 0.5) Then Return $q
If($t < 0.66666666) Then Return $p + ($q - $p) * (0.66666666 - $t) * 6
Return $p
EndFunc
musicstashall
Знающий
- #3
Для улучшения визуального восприятия увеличьте шаг и добавьте задержку
Нажмите, чтобы раскрыть.
..
Как-то грубо получается, цвет прыгает. Сначала плавно меняется, а потом прыжок и цвет резко другой. Наверное, в такой схеме движение в RGB кубе не линейное получается.
А если нужно изменение «по радуге», то вы уже спрашивали
Нажмите, чтобы раскрыть…
О, я спрашивал совсем другие вещи Здесь вы показали изменение только по шкале оттенка, а мне нужно получить схему преобразования цвета во всех его параметрах: H, S, L — движение точки внутри RGB куба. По сути, нужна формула. Сейчас опять начну изобретать, а потом окажется, что это всегда было :laugh:
InnI
AutoIT Гуру
- #4
musicstashall[?]
Сначала плавно меняется, а потом прыжок и цвет резко другой
Нажмите, чтобы раскрыть.
..
И это правильно. Вот смотрите.
В десятичной системе: 205 + 100 = 305
В шестнадцатеричной: 0x0000CD + 0x000064 = 0x000131
В «цветах»: к ярко синему прибавили шаг 100 и получили почти чёрный 😉
движение точки внутри RGB куба
Нажмите, чтобы раскрыть…
Разложите цвет на компоненты RGB. Переместите точку. Пересчитайте компоненты. Сложите компоненты в новый цвет.
Фактически, это похоже на выбор цвета в диалоге цветов путём ручного ввода компонентов.
musicstashall
Знающий
- #5
Разложите цвет на компоненты RGB.
Переместите точку. Пересчитайте компоненты. Сложите компоненты в новый цвет.
Фактически, это похоже на выбор цвета в диалоге цветов путём ручного ввода компонентов.Нажмите, чтобы раскрыть…
Я так и думал, придется опять заниматься математикой
Добавлено:
Сообщение автоматически объединено:
Ну вот, если «топором», то так:
#include <Color.au3>
#include <Array.au3>
Global $GUI = GUICreate('', 200, 200)
GUISetState()
_FlowColor(0x426D79, 0x5C4124, 100, 1, 'GUISetBkColor')
Func _FlowColor($Color1, $Color2, $_To, $_Sleep, $_Func)
Local $Color, $_Rmax, $_Rmin = 0, $_Gmax, $_Gmin = 0, $_Bmax, $_Bmin = 0
Local $RGB1 = _ColorGetRGB($Color1)
Local $RGB2 = _ColorGetRGB($Color2)
Local $RGB[2][3] = [[$RGB1[0], $RGB1[1], $RGB1[2]], [$RGB2[0], $RGB2[1], $RGB2[2]]]
$_Rmax = _ArrayMaxIndex($RGB, 1, -1, -1, 0)
If $_Rmax = 0 Then $_Rmin = 1
$_Gmax = _ArrayMaxIndex($RGB, 1, -1, -1, 1)
If $_Gmax = 0 Then $_Gmin = 1
$_Bmax = _ArrayMaxIndex($RGB, 1, -1, -1, 2)
If $_Bmax = 0 Then $_Bmin = 1
$_R_step = ($RGB[$_Rmax][0] - $RGB[$_Rmin][0])/$_To
If $_Rmax = 0 Then $_R_step = - $_R_step
$_G_step = ($RGB[$_Gmax][1] - $RGB[$_Gmin][1])/$_To
If $_Gmax = 0 Then $_G_step = - $_G_step
$_B_step = ($RGB[$_Bmax][2] - $RGB[$_Bmin][2])/$_To
If $_Bmax = 0 Then $_B_step = - $_B_step
For $i = 1 To $_To
$R = $RGB[0][0] + $_R_step*$i
$G = $RGB[0][1] + $_G_step*$i
$B = $RGB[0][2] + $_B_step*$i
$Color = '0x'&StringFormat("%02X%02X%02X", Int($R), Int($G), Int($B))
Call($_Func, $Color)
Sleep(Int($_Sleep))
Next
EndFunc
InnI
AutoIT Гуру
- #6
Так меньше кода
Func _FlowColor($Color1, $Color2, $_To, $_Sleep, $_Func)
Local $RGB1 = _ColorGetRGB($Color1)
Local $RGB2 = _ColorGetRGB($Color2)
Local $_R_step = ($RGB1[0] - $RGB2[0]) / $_To
Local $_G_step = ($RGB1[1] - $RGB2[1]) / $_To
Local $_B_step = ($RGB1[2] - $RGB2[2]) / $_To
For $i = 1 To $_To
$RGB1[0] -= $_R_step
$RGB1[1] -= $_G_step
$RGB1[2] -= $_B_step
Call($_Func, Dec(StringFormat("%02X%02X%02X", $RGB1[0], $RGB1[1], $RGB1[2])))
Sleep($_Sleep)
Next
EndFuncТолько сейчас понял, о чём вы хотели спросить
musicstashall
Знающий
- #7
Local $_R_step = ($RGB1[0] - $RGB2[0]) / $_To Local $_G_step = ($RGB1[1] - $RGB2[1]) / $_To Local $_B_step = ($RGB1[2] - $RGB2[2]) / $_To
А разве не важно, чтобы находить разницу между бо́льшим и меньшим значением, вычитая из бо́льшего меньшее? Но ведь работает :laugh: Удивительно
Ах, ну да, понятно.
Знак то меняется потом. Спс
musicstashall
Знающий
- #8
Еще усовершенствовал, сделал для многих цветов одновременно:
#include <Color.au3>
#include <Array.au3>
#include <GUIConstantsEx.au3>
Global $MATRIX[0][2], $__To = 0
Global $hGUI = GUICreate('', 300, 100)
Global $lab1 = GUICtrlCreateLabel('', 0, 0, 100, 100)
GUICtrlSetBkColor(-1, 0xf8640c)
Global $index1 = _AddColorsToMatrix(0xf8640c, 0x00ae57, 100)
Global $lab2 = GUICtrlCreateLabel('', 100, 0, 100, 100)
GUICtrlSetBkColor(-1, 0x0046ff)
Global $index2 = _AddColorsToMatrix(0x0046ff, 0xf8640c, 100)
Global $lab3 = GUICtrlCreateLabel('', 200, 0, 100, 100)
GUICtrlSetBkColor(-1, 0xd73539)
Global $index3 = _AddColorsToMatrix(0xd73539, 0x0000ff, 100)
GUISetState(@SW_SHOW, $hGUI)
_RunFlowMatrix('Flow', 50)
Func Flow($Color)
ConsoleWrite($Color[$index1]&', '&$Color[$index2]&', '&$Color[$index3]&@CR)
GUICtrlSetBkColor($lab1, $Color[$index1])
GUICtrlSetBkColor($lab2, $Color[$index2])
GUICtrlSetBkColor($lab3, $Color[$index3])
EndFunc
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
ExitLoop
EndSwitch
WEnd
Func _AddColorsToMatrix($Color1, $Color2, $_To)
Local $RGB1 = _ColorGetRGB($Color1)
Local $RGB2 = _ColorGetRGB($Color2)
Local $_step[3]
$__To = $_To
For $i = 0 To 2
$_step[$i] = ($RGB1[$i] - $RGB2[$i]) / $__To
Next
Return _ArrayAdd($MATRIX, _ArrayToString($RGB1)&'::'&_ArrayToString($_step), Default, '::')
EndFunc
Func _RunFlowMatrix($__Func, $_Sleep)
Local $_Color[0], $_RGB, $_step
For $i = 0 To $__To
For $a = 0 To UBound($MATRIX) - 1
$_RGB = StringSplit($MATRIX[$a][0], '|', $STR_NOCOUNT)
$_step = StringSplit($MATRIX[$a][1], '|', $STR_NOCOUNT)
For $j = 0 To 2
$_RGB[$j] -= $_step[$j]
If $_RGB[$j] < 0 Then $_RGB[$j] = 0
If $_RGB[$j] > 255 Then $_RGB[$j] = 255
Next
$MATRIX[$a][0] = _ArrayToString($_RGB)
_ArrayAdd($_Color, '0x'&StringFormat("%02X%02X%02X", Int($_RGB[0]), Int($_RGB[1]), Int($_RGB[2])))
Next
Call($__Func, $_Color)
Sleep($_Sleep)
Dim $_Color[0]
Next
Dim $MATRIX[0][2], $__To = 0
EndFunc
Как называется принт в одежде, плавный переход от одного цвета к другому?
одежда название викторина много ру принт
Только в сентябре: получи кредитку по акции с бонусом 2000р.
и годом без % Получить карту
Вопрос из викторины на сайте Много.ру, нужно выбрать правильный вариант ответа.
- омбре;
- мильфлер;
- арагайл.
Похвалить 2 Пожаловаться
3 ответа
Всеми нами любимая викторина Много.ру сегодня даёт нам возможность узнать о названиях принтов в одежде, да ещё 10 бонусов в придачу. Честно скажу, что увидев варианты ответов, поняла, что не имею даже малейшего представления об этом. Поэтому давайте разберёмся в этих замысловатых названиях, а заодно узнаем про разные принты.
Как же называется принт с плавным перехом цветов?
Омбре — это принт, в котором используется эффект плавного перехода одного цвета в другой, как от тёмного к светлого, так и наоборот, или многообразие разных цветов плавно переходящих друг в друга. Омбре подсмотрен у самой природы, например, радуга в природе это как раз и есть пример окрашивания омбре.
Омбре используют не только в одежде, но и при окрашивании волос или текстиля, это популярный стиль окрашивания.
Мильфлер — уже из названия начинаешь подозревать, что это связано с цветами. И действительно, это одна из разновидность тканных ковров на стену с разными сюжетами, были распространены в Средневековой Европе, есть другие названия: шпалера или габелен. Мильфлер отличался от других тем, что на тёмном фоне были вытканы множество цветов, полотна буквально были усеяны ими.
Арагайл — это тоже принт, который представляет собой выстроенные ромбы, поверх которых начерчены тонкие контарстные полоски, задающие геометрию рисунка. Ромбы могут быть разных цветов. Если подходить более строго, это все-таки не принт, а вытканный узор. Всё дело в том, что родом этот рисунок из Шотландии, из одноимённого графства. Это одна из разновидностей шотладнской клетки или тартани, подобный вопрос уже задавали в викторине Много.ру. А в Шотландии узор ткали из нитей разного цвета, а не печатали на ткани, как зачастую делают сейчас.
И правильный ответ на вопрос, про принт в одежде с плавным переходом цветов один в другой, под номером один — это омбре.
Ещё ответы на вопросы ежедневной викторины Много.ру:
- Как называется твердый овечий сыр, который выдерживается в рассоле?
- Как называются сапоги и полусапоги, напоминающие ботинки для сноуборда?
Похвалить 1 Пожаловаться
Принты
Давайте разбираться в предложенных вариантах:
- омбре — плавный переход от темного цвета к более светлому, либо растяжку одного цвета по оттенкам,
- мильфлер — техника заполнения однотонного свободного фона мелкими цветами,
- арагайл — окраска одежды с помощью ромбов различных цветов.
Итак, правильный ответ — омбре. И вот как это выглядит в одежде:
Также техника омбре популярна в окрашивании волос, так это выглядит в готовом виде:
А техника мильфлер используется для росписи шпалер.
Так что техники, применяемые для окраски одежды, используют не только для этого, они используются в разных областях деятельности.
Другая викторина от Много.ру: Как называется маскирующий корректор для лица, скрывающий мелкие недостатки?
Похвалить 0 Пожаловаться
Омбре — это класс
Да, именно так я озаглавил свой сегодняшний ответ на викторину. Как говорится, нет слов, чтобы сформулировать ответ по-другому. Просто я восхищаюсь этим стилем. Конечно, это мое личное мнение, и я его не навязываю. Но, согласитесь, это очень даже красиво. И вот конкретный пример.
Так что я полагаю равнодушных к этому стилю одежды просто не найдется. Да, этот стиль и есть плавный переход цветов. Естественно, добиться такого довольно сложно. Правда, подойти к такому ответу мне помогли знания такого стиля в окраске волос. Да, и там есть стиль омбре.
Но, как говорится, пора перейти и к пояснению моего выбора.
Так что вот мой подход.
- Я просто вспомнил, что знал по этому поводу.
- Проверил в поисковиках свой выбор.
- Ну и, конечно, проверил ответ в самой викторине, которую проводят на сайте Много.ру.
Ну, а теперь конкретно. Да, я нашел именно то, что искал.
Неоднократно проверил по различным ссылкам и убедился в верности ответа. Ну, а дальше все было очень просто. Я, как обычно, зашел на сайт, где проводилась эта викторина. Затем прочитал предложенный ответ. Ну, и так как ответ и при том верный, я уже знал, нажал нужную кнопку. И вот что мне выдал компьютер.
Так что после такого ответа, я полагаю, сомнения развеяны, и вы можете повторить мой выигрыш 10 бонусов.
И еще вопросик с этой викторины. Как называются женские джинсы в мужском стиле?
Похвалить 0 Пожаловаться
Дать ответ и заработать:
Cимволов:
Плавный переход между двумя цветами
спросил
Изменено 8 лет, 11 месяцев назад
Просмотрено 3к раз
Пытаюсь понять, как добиться плавного перехода между двумя цветами.
И.Е. это изображение взято из Википедии.
Когда я пытаюсь сделать то же самое, используя свой код (C++), первая идея, которая приходит на ум, — использовать цветовое пространство HSV, но появляются раздражающие промежуточные цвета.
Как это сделать?
- цвета
1
Возможно, это прозвучит странно… но вершинные шейдеры прекрасно с этим справятся. Если это четырехугольник (две тройки), то поместите один цвет на две левые вершины, а другой — на правую, и он должен хорошо сочетаться.
Внимание: предполагается, что вы используете OpenGL.
Единственная часть вашего вопроса, на которую я могу ответить, заключается в том, что вы должны каким-то образом переходить через слишком много значений в H-части HSV.
- H для оттенка (разные цвета, например эффект радуги в вашем градиенте). В этом случае мне кажется, что вы просто объединяете два разных оттенка.

- S для насыщенности (сила цвета от очень насыщенного до серый)
- L — для легкости (более-менее светимости (от вашего цвет до самого белого)
Это вызвано отсутствием промежуточного цвета, так как черный (или серый в вашем случае) = ненасыщенный. Это похоже на соединение двух прозрачных фейд-изображений вместе: в середине есть прозрачная область, так как 2 50% прозрачности не равны 100% сплошному цвету.
Чтобы избежать этого, я предлагаю разместить один цвет над другим и сделать его прозрачным. Таким образом, получается сплошная цветная основа с переходом выше.
Я не знаю, что вы используете для отображения (DirectX, дисплей Windows или что-то еще), но попробуйте просто иметь два изображения, один сплошной цвет и один цвет с переходом от сплошного к прозрачному спереди. Это может сработать.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
css — Цвет перехода исчезает при наведении?
Я пытаюсь заставить этот h4 исчезать при наведении.
Кто-нибудь может мне помочь?
HTML
тест
КСС
.кликер {
-moz-transition:цвет .2s облегченный;
-o-transition:color .2s easy-in;
-webkit-transition:color .2s easy-in;
фон:#f5f5f5;отступ:20px;
}
.кликер:наведите{
фон: #еее;
}
2
Что ты хочешь стереть? Атрибут фона или цвета ?
В настоящее время вы меняете цвет фона, но сообщаете ему о переходе свойства цвета. Вы можете использовать all для перехода ко всем свойствам.
.кликер {
-moz-transition: все .2 облегчаются;
-o-transition: все .2s облегчены;
-webkit-transition: все .2s easy-in;
переход: все .2s облегчаются;
фон: #f5f5f5;
отступ: 20 пикселей;
}
.clicker:наведите {
фон: #еее;
}
В противном случае просто используйте transition: background .2s easy-in .
0
Для создания эффекта перехода, такого как маркер, просто для выделения текста и исчезновения цвета фона, мы использовали следующее:
.

5 ? $l * (1 + $s) : $l + $s - $l * $s
Local Const $p = 2 * $l - $q
Return BitShift(0xFF * HUEtoRGB($p, $q, $h - 0.33333333), -16) + BitShift(0xFF * HUEtoRGB($p, $q, $h), -8) + BitShift(0xFF * HUEtoRGB($p, $q, $h + 0.33333333), 0)
EndFunc
Func HUEtoRGB($p, $q, $t)
If($t < 0) Then $t += 1
If($t > 1) Then $t -= 1
If($t < 0.16666666) Then Return $p + ($q - $p) * 6 * $t
If($t < 0.5) Then Return $q
If($t < 0.66666666) Then Return $p + ($q - $p) * (0.66666666 - $t) * 6
Return $p
EndFunc
..
Переместите точку. Пересчитайте компоненты. Сложите компоненты в новый цвет.