В последнее время для меня большим вдохновением является SVG-анимация. С её момощью можно делать из простых элементов впечатляющие вещи. Например, сегодня я закончил делать демку про машинки и с радостью написал об этом себе в блог.
Нарушать правила хабра мне бы не хотелось, поэтому напишу пару слов о процессе. В спецификации SVG есть раздел про анимацию, в котором здорово описано как должны клиенты (например, браузеры) выполнять анимацию. В теории получается очень красиво, но пока не попробуешь сделать что-то своими руками — не поймешь.
Я решил для практики — взять из какого-нибудь клипарата векторный автомобильчик и поиграть с ним. Легко сказать — одно изображение в среднем весит около 24Кб. Оказывается, картинки рисуют в векторных редакторах без специальных настроек. В результате получается, что простой контур(элемент path) автомобиля состоит из заведомо избыточной простыни координат. По умолчанию Inkscape делает координаты относительными и в результате множество чисел становится отрицательными. Кроме того количество знаков после точки может достигать 4-5.
Вывод: если не лениться, то на грамотной оптимизации изображения можно сэкономить порядка 5-7Кб из 24Кб.
Кто-то скажет, что экономить на спичках не интересно. Возражу, уменьшив количество точек в элементе path и снизив количество элементов в результирующем DOM-дереве можно облегчить жизнь браузеру и разгрузить компьютер пользователя.
После получения оптимизированного SVG-автомобиля я заметил, что в FirefoxOpera контур получился гладким, а в Chromium он весь в зазубринах. Если специалисты подскажут в чем дело — буду признателен.
После создания самих анимаций в процессе проверки их работы в разных браузерах я обнаружил следующее:
1. Firefox значительно больше нагружает процессор, чем это делают Opera и Chromium.
2. Анимация со сплайнами без особых проблем заработала в Opera, а в Firefox и Chromium ведет себя довольно капризно и в моем случае даже не удалось подобрать работающую комбинацию для обоих браузеров.
Если у кого-нибудь есть пример неравномерной анимации которая работает во всех браузерах — скажу спасибо за ссылку.
Автор: ainte
