Оптимизация анимации с помощью OnMouseMove

#javascript

#javascript

Вопрос:

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

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

Вы можете увидеть примеры и код в нашем блоге здесь http://www.hiringthing.com/2011/10/31/buttons-with-a-surprise.html

Спасибо

Комментарии:

1. Вы изучали requestAnimationFrame ?

Ответ №1:

Вы можете присоединять и удалять обработчик событий при наведении курсора мыши на основной раздел страницы, чтобы он не запускался при использовании навигации и других областей страницы. Если у вас на странице несколько элементов, как в вашей демонстрации, вероятно, вы больше ничего не можете сделать.