Как анимировать цвет на js максимально приближенно к css transition?

Question

[starwars9isgreatlol]

Привет, у меня есть слайдер - переключатель карточек влево-вправо.
Слайды таскаются вручную мышкой, либо если "не дотащить" и отпустить, то произойдет автоматическое переключение - как вот в этом демо - https://swiperjs.com/demos/010-default.html

У каждого слайда есть свой цвет.
При перетаскивании слайда мышкой я получаю прогресс листания от 0 до 1 а так же цвет текущего и цвет следующего слайда.
При отпускании мышки прогресс ставится сразу на 1, а элементу задается css свойство transition-delay

При таскании мышкой необходимо анимировать цвет фона слайдера в зависимости от текущего положения слайда.

Подскажите, пожалуйста, функцию, в которую я мог бы передать 3 параметра animate(color_1, color_2, progress) и котороя вернула бы цвет в зависимости от начального и конечного цвета и текущего прогресса.

Хочется что бы функция максимально соответствовала css свойству transition-delay
То есть что бы для animate('#ff0000', '#0000ff', 0.5) был выдан такой же цвет как на 50'ой миллисекунде при свойстве transition-delay 100ms
Хочется комбинирововать анимацию цвета на js и на css и что бы это было визуально бесшовно.

Спасибо!

Comments

[Dmitriy Grape]

Я не особо шарю в высшей математике, но попробуйте поискать функцию Lerp, она должна помочь (вроде)

Answer 1

[Ragtime Kitty]

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

Опасити легко анимировать от 0 до 1, а визуально такой переход не отличается от стандартной анимации цвета в CSS: https://jsfiddle.net/ce4vno1g/

Достаточно будет менять прозрачность следующего/предыдущего фона в зависимости от прогресса перетаскивания + delay: