Как реализовать замедление и остановку рулетки в заданной позиции?

Question

[Алексей]

Здравствуйте!
Подскажите пожалуйста как реализовать следующую задачу:
Есть рулетка, границы которой разделены на две части (красная и синяя).
Необходимо реализовать вращение рулетки на протяжении задорного времени, например 10 секунд. По истечении данного времени замедлить движение рулетки до полной остановки. Остановится рулетка должна так что бы стрелка указывала на цвет (красный/синий) в зависимости от того который был передан (в примере 1- красный а 2 - синий).

К сожалению с геометрией я не "дружу" и для меня это стала очень сложной задачей.
Смог реализовать только следующее:
Пример реализации: https://codesandbox.io/embed/frosty-glade-vrrrv?fo...

Подскажите пожалуйста как можно реализовать данную задачку, заранее спасибо.

Comments

[camelCaseVlad]

Вот такой вариант нашел, без реакта. Можете "реактировать" данный код

https://codepen.io/zadvorsky/pen/xzhBw

[Алексей]

camelCaseVlad, спасибо займусь изучением алгоритма

Answer 1

[xmoonlight]

Нужно расчитать угол при заданном обратном ускорении.
Это можно сделать даже через CSS.

Comments

[Алексей]

спасибо за быстрый ответ, могли бы порекомендовать где прочитать про это теорию или саму формулу расчета дать?

[xmoonlight]

Алексей, посмотрите как делается анимация на CSS: один полный поворот с замедлением на keyframes. А потом - добавьте количество оборотов и умножьте время на нужное количество оборотов. Получите то, что хотели.

[Алексей]

xmoonlight, спасибо за ответ. С keyframes знаком но анимация через css не подходит к сожалению так как требуется более тонкое управление.

[xmoonlight]

Алексей, Тогда только через js.
Принцип - не меняется.