В последнее время SVG-анимация стала для меня большим источником вдохновения.
Благодаря его мощности из простых элементов можно делать впечатляющие вещи.
Например, сегодня я закончил делать демо про автомобили и доволен Я написал об этом в своем блоге .
Нарушать правила хаба не хотелось бы, поэтому напишу пару слов о процессе.
Спецификация SVG имеет раздел анимации , который отлично описывает, как клиенты (например, браузеры) должны выполнять анимацию.
В теории получается очень красиво, но пока не попробуешь сделать что-то своими руками, не поймешь.
Обновлять: Прямые ссылки на автомобили митинг , раса , ускорение и торможение , стоянка , машина с фарами .
Для практики я решил взять векторную машину из какого-то клипарта и поиграть с ней.
Легко сказать – одно изображение в среднем весит около 24Кб.
Оказывается, картинки рисуются в векторных редакторах без специальных настроек.
В результате получается, что простой контур (элемент пути) автомобиля состоит из заведомо избыточного листа координат. По умолчанию Inkscape делает координаты относительными, в результате чего многие числа становятся отрицательными.
Кроме того, количество символов после точки может достигать 4-5. Заключение: Если не лениться, то правильно оптимизировав изображение можно сэкономить примерно 5-7Кб из 24Кб.
Кто-то скажет, что экономить на спичках неинтересно.
Я бы сказал, что уменьшив количество точек в элементе пути и уменьшив количество элементов в результирующем DOM-дереве, можно облегчить жизнь браузеру и разгрузить компьютер пользователя.
Получив оптимизированный SVG-кар, я заметил, что в Firefox\Opera контур плавный, а в Chromium весь неровный.
Если специалисты подскажут, в чем дело, буду благодарен.
После создания самих анимаций, в процессе их тестирования в разных браузерах, я обнаружил следующее:
1. Firefox нагружает процессор существенно больше, чем Opera и Chromium.
2. Анимация сплайнами работала без проблем в Opera, а вот в Firefox и Chromium она ведет себя довольно капризно и в моем случае даже не удалось найти рабочую комбинацию для обоих браузеров.
Если у кого-нибудь есть пример неровной анимации, работающей во всех браузерах, спасибо за ссылку.
Теги: #svg #анимация #Firefox #opera #Google Chrome
-
Как Выбрать Лучшую Тему Wordpress?
19 Dec, 24 -
Причины Экономического Кризиса
19 Dec, 24 -
Форматы Dvd+R И Dvd+Rw Официально Признаны.
19 Dec, 24
