Поддержка браузеров в Popmotion определяется не столько самой библиотекой, сколько набором JavaScript-возможностей, на которые она опирается. Основной принцип заключается в использовании нативных API браузера там, где это возможно, и делегировании обратной совместимости внешним инструментам — транспиляторам и полифилам.
Popmotion ориентирован на современные движки JavaScript. Базовый набор требований включает:
requestAnimationFrameПри этом библиотека не привязана к конкретному фреймворку и не требует наличия React, Vue или других UI-слоёв. Она может работать как в браузере напрямую, так и в сборках через Webpack, Vite или Rollup.
Ключевой механизм, от которого зависит Popmotion — это
requestAnimationFrame. Он определяет частоту обновления
анимации и синхронизирует её с отрисовкой браузера.
В современных браузерах цикл выглядит предсказуемо:
В старых браузерах (или специфических WebView)
requestAnimationFrame может отсутствовать. В таком случае
Popmotion не может гарантировать плавность анимации без дополнительной
подмены.
На уровне сборки используется shim:
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback) {
return setTimeout(() => callback(Date.now()), 1000 / 60);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}Такой подход снижает точность таймингов, но сохраняет функциональность анимационного цикла.
Popmotion распространяется как современный ES-модульный код. Это означает, что в исходном виде он может включать:
const и letДля старых окружений требуется транспиляция через Babel.
Babel преобразует код в более совместимый формат:
Пример изменения:
// исходный код
const add = (a, b) => a + b;
// после транспиляции
var add = function (a, b) {
return a + b;
};Popmotion в связке с современными сборщиками обычно не требует ручной настройки Babel, но при интеграции в legacy-проекты это становится обязательным шагом.
Помимо requestAnimationFrame, Popmotion может косвенно
зависеть от ряда стандартных объектов.
Используется для объединения конфигураций. В старых браузерах требуется полифил:
if (!Object.assign) {
Object.assign = function (target) {
for (let i = 1; i < arguments.length; i++) {
const source = arguments[i];
for (const key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
}Методы вроде Array.from,
Array.prototype.find, forEach (в очень старых
окружениях) также могут требовать заполнения через core-js или
аналогичные библиотеки.
На практике вместо точечного добавления полифилов используется
core-js.
Он позволяет:
Пример подключения:
import "core-js/stable";
import "regenerator-runtime/runtime";В контексте Popmotion это особенно важно при использовании анимационных сценариев, завязанных на Promise или генераторах.
Некоторые расширенные сценарии Popmotion могут опираться на
Promise, особенно при композиции анимаций или
последовательных переходов.
В старых браузерах Promise отсутствует, поэтому подключается полифил:
es6-promisecore-jsОсобенность заключается в том, что Promise влияет не на сам рендер, а на управление цепочками анимаций. Без него нарушается порядок выполнения последовательностей.
В Popmotion-подходе и сопутствующих библиотеках чаще используется не проверка браузера, а проверка возможностей:
if (typeof window.requestAnimationFrame !== "function") {
// fallback
}Такой подход устойчив к:
Версионная проверка (user-agent sniffing) считается менее надёжной из-за фрагментации браузерных движков.
Современная совместимость Popmotion сильно зависит от инструментов сборки.
Popmotion поддерживает модульную структуру, что позволяет удалять неиспользуемые части библиотеки. Это уменьшает необходимость полифилов, так как в сборку попадает только используемый код.
При настройке сборщика задаётся целевая среда:
es2018 и выше — без полифиловes5 — с полной трансляцией и core-jsПример настройки Babel:
{
"presets": [
["@babel/preset-env", {
"targets": "> 0.25%, not dead",
"useBuiltIns": "entry",
"corejs": 3
}]
]
}При попытке запуска Popmotion в устаревших средах возникают системные ограничения:
requestAnimationFrame снижает плавностьВ таких условиях даже полная полифилизация не гарантирует идентичного поведения.
Popmotion не зависит от Web Animations API, что является важным фактором совместимости. Это означает:
При этом Popmotion может использоваться совместно с WAAPI, но не требует его наличия.
Одним из ключевых аспектов совместимости является минимизация глобальных зависимостей:
Это позволяет использовать Popmotion:
На уровне проекта, использующего Popmotion, обычно применяется комбинированный подход:
Такая стратегия позволяет разделить ответственность:
Архитектурно Popmotion можно рассматривать как слой, работающий поверх:
Совместимость достигается не за счёт внутренней избыточности библиотеки, а за счёт того, что она опирается на ограниченное число хорошо полифилируемых API и не использует тяжёлые платформенные зависимости.