Кто кого

— Ну че, сделаем?
— Ну, сделаем, конечно!
— Долго делать будем?
— А хз, никогда не пробовал!

Ооо, люблю это чувство, когда делать не умеешь, а надо. Что у нас есть? На выходе должен получиться калькулятор тормозного пути. С блэк-джеком анимацией и эффектами.

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

V1.
Пришлось вспомнить 10-ый класс, скучные уроки физики. Кинематика там, формулы движения. После адаптации этих формул под себя, я получил хоть какое-то представление о том, что нужно делать.

В первой версии координаты машинки пересчитывались около 50 раз в секунду, я подумал, что производительности хватит для более-менее плавной анимации. Написал первую тестовую версию, запустил. Выбираем дорожные условия, скорость, старт и… машинка едет очень медленно. Пересчитываю параметры вручную, все правильно. До меня доходит, что уместить 200 метров дороги на 960 пикселях не очень то просто, и что так и должно быть. Увеличиваем скорость машинки в 10 раз и получаем то, что и хотели. Маленькая победа! Только почему-то, в начале торможения машинка дергается. Ну ладно, не всегда это заметно, пока оставляем так.

V1.5
Читаю статьи про анимацию. Понимаю, что браузеру нельзя верить насчет отсчета времени, что функция перерасчета положения машинки не обязательно будет вызываться через равные промежутки времени. Вручную сохраняем время вызова функции, сравниваем с предыдущим, пересчитываем… Поведение машинки стало гораздо более похожим на реальность. Заливаем.

EFFECTS TIME! Надо бы добавить немного эффектов, а то страница выглядит слишком статичной. Добавляю тормозные следы, анимированных человечков… Кидаем 3d анимацию на плашки. Теперь они как будто закреплены за верхний край и откидываются сверху. Значения ключей для анимации высчитываю в Excel'e, наконец-то мне пригодились эти формулы.
Шеф просит сделать, чтобы машинку заносило в разные стороны при торможении. Думаю, как можно это реализовать и понимаю, что это будет оооочень сложно. Ныряю в код и нахожу отличное решение:

V2
Зачем перемещать машинку, если у нас есть CSS? Просто говорю ей, что через столько-то миллисекунд она должна оказаться там-то. И все! И даже не надо думать о том, чтобы плавно ее остановить, Просто выбираю другую функцию ускорения. На выходе получаем плавную анимацию в 60 fps. В чем особенность этого метода – машинка двигается не ровно по пикселям, она может, например, проходить 1/3 пикселя за кадр.

Проект получился интересным, но, конечно, пришлось помучаться с багами и особенностями разных браузеров. Результатом мы вполне удовлетворены.

Lead Developer,
Artem Ibatullin