Изменять скорость анимации при помощи ползунка

Question

коллеги! Передо мной стоит задача изменять скорость анимации при помощи ползунка и прикрученному к нему событию. В html это выглядит вот так: <input type="range" min="0" max="100" class="slider" id="range">

В js рамках обработчика следующще делается:

   let tempSpeed = encode(slider.value);
   document.querySelector('#circle' + val).style.animationDuration = tempSpeed.toString() + 's';
  });

Поскольку у нас чем меньше длительности анимации, тем выше скорость, мы в рамках ф-ции encode должны делить значение ползунка на 100, что я и делаю. Но сталкиваюсь с проблемой: скорость должна меняться нелинейно, иначе только на середине шкалы заметно изменение скорость, а на верхних значениях прирост скорости наоборот крайне медленный. Очевидно, надо использовать что-то вроде кривых Безье, я нашёл формулу, но получил неприятный эффект: если в крайне левом положении значение было равно 100, то на втором оно уже равно 50, на третьем - 25 и т.д. То есть плавности никакой. Формула рассчёта, что я использовал такая: let tempSpeed = 100 / (1 - Math.pow(1 - points, 3));

Забыл упомянуть, что на выходе ф-ции хочу получать значение от 100 (самая медленная скорость) до 0.1 (самая быстрая скорость).

Пожалуйста помогите, дайте какие-то ориентиры и строго не судите: в первый раз в жизни описываю поведение элемента, привязанное к шкале.

Answer 1

Для плавного изменения скорости можно использовать такую формулу, обеспечивающую логарифмическую зависимость скорости от значения ползунка:

let tempSpeed = Math.pow(10, 2 - range.value / range.max * 3);
 // или так:
let tempSpeed = 10 ** (2 - range.value / range.max * 3);

При этом получается, что в крайнем левом положении ползунка скорость равна 10 ^ 2 степени, т. е., 100, а в крайнем правом - 10 ^ -1 степени, т. е., 0.1

Если нужно наоборот, получить значение ползунка для достижения заданной скорости, можно использовать такой цикл:

let tempSpeed = 23; // задаём скорость
myvalue = null;
for(i = 0; i < 100; i ++){
    if(Math.floor(10 ** (2 - tempSpeed / (100 / 3))) == i) myvalue = i;
}
console.log(myvalue); // получаем значение ползунка

БЛОГ НА HUSL

Изменять скорость анимации при помощи ползунка

Ответы (1 шт):