5

Как интерполируется цвет при анимации? Что происходит, если указанная кривая безье выходит на пределы интерполируемого отрезка?

Т. е. есть

y = transitionTimintFunction(t) // некое текущее значение
с0 = rgb(255, 0, 0)             // начальный цвет
с1 = rgb(0, 0, 255)             // конечный цвет

как по ним посчитать функцию

c = color(c0, c1)(y)            // интерполированное значение цвета

И что с ней произойдёт, если внезапно окажется, что y<0 или y>1?

кривая безье

div {
  width: 10em;
  height: 10em;
  transition: background-color 3s cubic-bezier(0,2,.5,-2);
  background-color: red;
}

div:hover {
  background-color: blue;
}
<div></div>

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    22 дек 2019 в 17:41

1 ответ 1

3

Линейная интерполяция в целом совпала с ожиданиями:

Алгоритм интерполяция цвета - каждый канал интерполируется по отдельности.

requestAnimationFrame(f);
let t = Date.now();
let elem = document.querySelector('.left2');
document.querySelector('.left1').classList.add('linear');

function f() {
  let dt = Date.now() - t;
  dt < 2e4 && requestAnimationFrame(f);
  dt /= 2e4;
  if (!elem) {
    
  }
  elem.style.left = 100*dt + '%';
  elem.style.borderRight = `10px solid rgb(${dt*255},0,${(1-dt)*255})`
}
section {
  width: 50%;
  margin: auto;
  border: 1px dotted red;
}

div {
  height: 4em;
  width: 0;
  position: relative;
  margin-left: -5px;
}

.bezier {
  animation: 20s left cubic-bezier(0,2,.5,-2) forwards;
}

.linear {
  animation: 20s left linear forwards;
}

@keyframes left {
  0% { left: 0;border-right: 10px solid blue;}
  100% {left: 100%;border-right: 10px solid red;}
}
<section>
  <div class="left1"></div>
</section>
<section>
  <div class="left2"></div>
</section>

3
  • Что-то рассинхрон, особенно при первом запуске, огромный: i.stack.imgur.com/4FeqK.png
    – Qwertiy
    22 дек 2019 в 16:42
  • @Qwertiy вроде пофиксил 22 дек 2019 в 17:13
  • Да, вроде похоже.
    – Qwertiy
    22 дек 2019 в 17:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.