Javascript Bar Анимация

Question

У меня есть это изображение выше. Я хочу, чтобы части изображения отображались в зависимости от оборотов автомобиля. Например, когда автомобиль запускается, виден только нижний синий блок, так как скорость увеличивается, все больше блоков становятся видимыми вплоть до красной линии. Как только скорость уменьшается, блоки исчезают. Я в недоумении с этим, я даже не знаю, с чего начать. Первоначально я думал сделать каждый блок отдельным изображением, но мне было интересно, есть ли лучший способ сделать это. Есть идеи?

Answer 1

Ознакомьтесь с библиотекой javascript Raphael .В зависимости от вашего опыта работы с Javascript, у вас может быть некоторая кривая обучения, но я думаю, вам будет гораздо проще воссоздать то, что вы показываете выше, и прикрепить желаемое поведение к каждой из фигур, чем пытаться сделать это сизображения, особенно с учетом расположения и ориентации блоков.

ОБНОВЛЕНИЕ: я создал эту скрипку , поскольку я думал, что это кажется интересным упражнением.Я просто использовал прямоугольные блоки, но если вы наведете курсор на зеленую полосу «газа», вы увидите, как блоки появляются и исчезают.