Средний
7 уроков
Курс
JS & canvas
В этом курсе, состоящим из 7 статей Роман Спиридонов познакомит вас с canvas.

JS&canvas 6/7 — Плавная анимация

Вам нравятся часы, которые тикают? Наши хоть и не издают звука, но все же движутся довольно мерзко. Все эти перескоки стрелок и отсутствие плавности — бееее… все одно что гвоздем по стеклу. Давайте придадим часам чуть большее изящество — пусть стрелки движутся плавно, без резких движений.

День 6

Для этого нужно отслеживать изменения не только секунд, но и миллисекунд. Для плавного перемещения минутной стрелки нужно будет знать количество секунд, а для часовой еще и количество минут. Для оптимизации запросов к объекту даты будем кэшировать это текущее значение миллисекунд, секунд, минут и часов, для отрисовки стрелок. Введем объект time, а также добавим обновление значений его полей в функцию update:

Теперь нужно изменить способ вычисления углов стрелок. Нужно учитывать младшие разряды времени : для секунд — миллисекунды, для минут — секунды и миллисекунды, для часов — минуты, секунды и миллисекунды. Так как часовая стрелка не сможет нам так точно отобразить разность изменения своего положения в зависимости от изменения секунд и тем более миллисекунд, то будем учитывать только один младший разряд времени:

Если мы обновим страницу с примененными изменениями, то увидим, что секундная стрелка продолжает двигаться отрывисто, но уже моет не попадать точно в положения минутных отметок циферблата. Это все потому, что фукнция update у нас выполняется каждую 1000 миллисекунд, а для плавного хода нужно, чтобы она выполнялась как можно чаще, например, через каждые 10 миллисекунд. Для этого в функции init поменяем значение интервала запуска с 1000, на 10. Обновляем страницу и, пожалуйста, вот вам плавность хода! А также достаточно точное отображение времени каждой стрелкой.

Код страницы day6.html

Рекомендуемые курсы