Продвинутые анимации с requestAnimationFrame
3 мин
Перевод
Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)
Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL
Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Что такое requestAnimationFrame?
Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL
Зачем я должен это использовать?
Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.


С самого раннего детства я интересовался компьютерами. Интерес этот произрастал из игр под MS-DOS в детсадовском возрасте, заканчивая всевозможными олимпиадами по программированию к окончанию школы. Не удивительно, что после школы пошел учиться в технический институт на программиста. Самое странное, что все эти годы я был абсолютно далек от такой замечательной операционной системы, как GNU/Linux. Но полтора года назад, в самом начале первого семестра, я познакомился с парнем (он был незначительно старше меня и поступил в институт уже после техникума — имея опыт работы), который во время одного из разговоров сказал:
Приветствую, уважаемые читатели Хабра!

