Анимированный таймер обратного отсчета с использованием HTML, CSS или JavaScript

Question

Я хочу создать круг, который разделен на 4 квартала, а затем каждый квартал подразделяется на сегменты.Каждый квартал будет иметь различный цвет фона (или фоновое изображение).Круг будет служить таймером обратного отсчета, где каждый сегмент будет длиться около 5 секунд (см. Прилагаемое изображение для идеи того, что я ищу).Таймер запустится только тогда, когда будет введена команда javascript (также должна быть предусмотрена возможность приостановки и перемотки таймера).

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

Есть несколько предостережений:- количество сегментов в каждом квадранте может измениться , поэтому размер каждого сегмента должен быть гибким- Порядок квадрантов может измениться (то есть вместо синего, оранжевого, красного, зеленого ... у нас может быть оранжевый, красный, фиолетовый и т. Д. И т. Д.)- Он должен работать на iPhone и существующих телефонах Android (Я смотрел на Рафаэля и SVG, но это не поддерживается на Android.)

Я нахожусь напотеря в том, как лучше всего решить эту проблему, поэтому был бы благодарен услышать предложения или хотя бы увидеть примеры (хотя я не смог их найти)

Answer 1

Я думаю, что лучший способ достичь желаемого результата - использовать элемент canvas и рисовать на нем с помощью javascript или использовать анимированные изображения вместе со статическими изображениями и небольшим JS для переключения междудва типа.

Answer 2

Вы видели Raphaël JS ?Это действительно связано с графиками.Я не совсем уверен в деталях, но это должно помочь вам начать.