Полифиллы и поддержка старых браузеров

Основы совместимости

Anime.js построена на современных возможностях браузеров: requestAnimationFrame, CSS-трансформациях, свойстве transform и API для работы с цветами и интерполяцией. Это означает, что для корректной работы библиотеки требуются браузеры с поддержкой ES5+ и основных CSS3-свойств. В старых браузерах, таких как Internet Explorer 9 и ниже, часть функционала может не работать без полифиллов.

Ключевые области, требующие полифиллов:

  • requestAnimationFrame — основной механизм для анимаций. В старых браузерах заменяется на таймеры через setTimeout.
  • Методы массива (forEach, map, filter) и функции стрелок. Без поддержки ES5 код anime.js не сможет корректно обходить коллекции элементов.
  • CustomEvent и события animationstart, animationend — для коллбеков начала и окончания анимации.

Использование полифиллов

Для работы с requestAnimationFrame можно добавить следующий полифилл:

if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback) {
        return setTimeout(callback, 1000 / 60);
    };
}

if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}

Для работы с ES5-методами массивов достаточно подключить стандартный es5-shim. Он добавляет все методы массива и функции объекта Function.prototype.bind.

Для событий используется полифилл CustomEvent:

(function () {
    if (typeof window.CustomEvent === "function") return false;
    function CustomEvent(event, params) {
        params = params || { bubbles: false, cancelable: false, detail: null };
        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    }
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
})();

Обход ограничений CSS

Anime.js активно использует CSS-свойства, которых нет в старых браузерах: transform, translate3d, rotate, scale. Для корректной работы на IE9 и старше необходимо использовать полифиллы или fallback-стили:

  • transform → -ms-transform для IE9, -webkit-transform для старых Chrome/Safari.
  • Цветовые свойства с rgba/hsla можно заменить на hex-значения через конвертер или библиотеку color-polyfill.

Пример задания в anime.js с fallback:

anime({
    targets: '.box',
    translateX: 250,
    duration: 1000,
    update: function(anim) {
        if (!('transform' in document.body.style)) {
            var progress = Math.round(anim.progress);
            document.querySelector('.box').style.left = (progress * 2.5) + 'px';
        }
    }
});

Важные моменты для поддержки

  1. Производительность: в старых браузерах замена requestAnimationFrame на setTimeout может давать более резкие и менее плавные анимации. Рекомендуется снижать частоту кадров или упрощать анимацию.
  2. SVG-анимации: IE9 частично поддерживает SVG, но многие методы трансформации работают только через transform атрибут. Нужно проверять конкретные свойства.
  3. Псевдоэлементы и градиенты: старые браузеры могут не поддерживать анимацию псевдоэлементов или CSS-градиентов. В таких случаях лучше использовать статические значения или JavaScript-анимацию через anime.js напрямую.

Практика интеграции полифиллов

Для проекта с поддержкой старых браузеров рекомендуется подключать полифиллы до загрузки anime.js, чтобы библиотека автоматически использовала доступные методы. Стандартная последовательность:

  1. ES5-шим для базовой совместимости.
  2. Poylfill requestAnimationFrame.
  3. Polyfill CustomEvent.
  4. Дополнительные CSS-полифиллы при необходимости.

Особенности анимаций без современных возможностей

Если браузер не поддерживает transform или translate3d, все анимации anime.js будут работать через манипуляцию left, top, width, height. Это не только снижает производительность, но и может повлиять на плавность движения, особенно при сложных последовательностях. Для таких случаев рекомендуется:

  • Использовать простые анимации, без сложных кривых Безье.
  • Ограничивать количество одновременно анимируемых объектов.
  • Использовать фиксированное позиционирование (position: absolute) для упрощения вычислений.
Оглавление