Мы знаем, что реализация отрисовки анимации в браузере — это не что иное, как анимационные свойства CSS3.transition,aniamtionи JavaScriptsetTImeOutа такжеsetIntervalМетод (чтобы внести изменения в цикл стиля DOM для достижения эффектов анимации). Говоря об этом, у многих студентов могут возникнуть сомнения: ведь есть такая удобная штука, как свойства CSS-анимации, зачем ее использовать?setTimeOutОжидаете, что метод js будет таким хлопотным? Давайте сначала разберемся с этим вопросом.
Свойства анимации CSS3 и методы анимации JavaScript:
Должен существовать смысл своего существования вещей, апи не исключение, иначе давно уже устранено. Первые свойства анимации CSS3 связаны с проблемами совместимости, наиболее очевидное из которых совместимо только после IE10. Текущий основной стандарт обратно совместим с IE9, поэтомуsetTImeOutМетод js по-прежнему остается основным решением для анимации.
Некоторые эффекты анимации не могут быть достигнуты с помощью CSS3, например изменение элементов.scrollTopЗначение прокрутки, чтобы можно было использовать только соответствующие методы js.
Анимация CSS3 не может создавать слишком сложные анимационные эффекты, такие как поддержка CSS3 для управления скоростью анимации.Кривая СебеляЧисловое значение ограничено, и более сложные анимационные эффекты могут быть выполнены только с использованием js в сочетании с соответствующими алгоритмами.
Тогда вернемся к теме, тогдаrequestAnimationFrameимеютsetTimeOutа такжеsetIntervalИ есть разница, гм, следующее дело это тема.
setTimeOutа такжеsetIntervalВозникающие проблемы:
Прежде всего, мы должны знать, что рендеринг анимации осуществляется кадр за кадром, каждый кадр представляет собой статическое состояние анимации, и каждый кадр связан, чтобы стать анимацией. Следовательно, временной интервал между каждым кадром должен быть достаточно коротким, чтобы анимация выглядела гладкой и плавной, но интервал между каждым кадром не должен быть слишком коротким, потому что производительность рендеринга браузера в секунду ограничена, а также мощность обновления экрана. ограничено.Большинство мониторов имеют частоту обновления 60H или 60 кадров в секунду, поэтому скорость перерисовки браузера не будет превышать частоту обновления монитора.
Таким образом, около 17 секунд на кадр — оптимальный интервал перерисовки. Затем используйте его напрямуюsetTimeOutилиsetInterval, а интервал установлен на 17, верно? Но это все еще не работает.
Из-за неточности браузера в миллисекундах: точность таймера браузера не соответствует уровню миллисекунды.Точность IE8 составляет чуть более 15 мс, в то время как точность большинства браузеров, таких как IE9, составляет около 4 мс. Поэтому трудно гарантировать лучший временной интервал для анимации.
Разные браузеры имеют разные возможности рендеринга, поэтому 17 мс на кадр — не лучший интервал рендеринга.
В местах, где анимация не нужна, например на фоновых вкладках, анимация все еще работает, потребляя ресурсы ЦП.
Следовательно, h5requestAnimationFrameзаключается в решении вышеуказанных проблем.
Особенности requestAnimationFrame:
requestAnimationFrameВсе операции DOM в каждом кадре будут объединены и завершены за одну перерисовку или перекомпоновку.
requestAnimationFrameВременной интервал для перерисовки или перестановки является системным временным интервалом, потому что системный временной интервал разных браузеров отличается,requestAnimationFrameОптимальный интервал отрисовки будет поддерживаться, то есть способность рендеринга браузера не сможет поддерживаться, потому что интервал отрисовки слишком короткий, и анимация не будет зависать, потому что интервал отрисовки слишком длинный. Это обеспечивает лучший рендеринг в разных браузерах.
В скрытых или невидимых элементах,requestAnimationFrameНе будет перекомпоновываться или перерисовываться, но будет работать, когда страница не активна, напримерrequestAnimationFrameПри запуске на фоновой вкладке анимация будет приостановлена, что эффективно снизит нагрузку на ЦП.
Итак, как использоватьrequestAnimationFrameШерстяная ткань?
Конкретное использование requestAnimationFrame:
requestAnimationFrameЕго очень просто использовать, просто передайте функцию, которая изменяет DOM, а затем вызовите ее несколько раз.requestAnimationFrameЭффект анимации может быть достигнут. requestAnimationFrame возвращает целочисленный идентификатор запроса, который можно использовать сcancelAnimationFrameфункция отмены входящегоrequestAnimationFrameфункция обратного вызова. Для конкретного использования см.Учебники от MDN.
Послесловие:
Это резюме, которое я сделал после прочтения блогов Гао Ченг Сана и других больших парней. Это упрощенная версия руководства. Подробности или демонстрации см. в резюме больших парней.