Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 73
Могут быть проблемы на мобильных платформах. На моем iPad картинка не видна совсем.
Как раз вчера читал хорошую статью на эту тему.
http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html
Анимации работающие через canvas. Работают на любых платформах + маленький вес.
http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html
Анимации работающие через canvas. Работают на любых платформах + маленький вес.
У меня в хроме картинка не видна, обновления окна не помогают, при этом если открыть картинку в отдельной вкладке то видно все хорошо. При этом потребление памяти и процессора заметно больше тех, которые были бы если поставить гифку.
Порядка 15% cpu, при этом при замене на гифку это значение падает. с учетом памяти сложнее. Обычно вкладка хабра занимает порядка 70Mb, эта вкладка 130Mb, в случае с большей по размеру гифки потребление тут же падает где то до 120Mb, но тут вероятно еще сборщик мусора не прошелся. Так что на мой взгляд, не взлетит. Кстати проблемы с отображением могут быть связаны с какими нибудь настройками безопасности касательно SVG с других доменов. Не знаю даже.
Порядка 15% cpu, при этом при замене на гифку это значение падает. с учетом памяти сложнее. Обычно вкладка хабра занимает порядка 70Mb, эта вкладка 130Mb, в случае с большей по размеру гифки потребление тут же падает где то до 120Mb, но тут вероятно еще сборщик мусора не прошелся. Так что на мой взгляд, не взлетит. Кстати проблемы с отображением могут быть связаны с какими нибудь настройками безопасности касательно SVG с других доменов. Не знаю даже.
gif при компрессии анимации сохраняет только изменения в кадре, у вас — вся картинка целиком, было бы хорошо, если в вашем методе будет хотя бы дельта с точностью до блока 8х8px (для jpeg). Еще рекомендую посмотреть на это.
FF v25 в w8. 4ядерный проц грузит на 30%.
А в хроме все отлично.
А в хроме все отлично.
FFv25, сколлинг на этой странице очень тормозит.
FF 25.0, Виста.
Сожрало одно ядро полностью, при этом анимация не плавная, а в виде слайд-шоу, часть кадров попросту выбрасывается.
Перезагрузка страницы с отключённой картинкой и закрытие таба не помогли разгрузить проц, пришлось закрывать браузер целиком.
Сожрало одно ядро полностью, при этом анимация не плавная, а в виде слайд-шоу, часть кадров попросту выбрасывается.
Перезагрузка страницы с отключённой картинкой и закрытие таба не помогли разгрузить проц, пришлось закрывать браузер целиком.
Firefox 17.0.8 ESR упал где-то через минуту.
Смотрю в диспетчера задач — потребление памяти растёт где-то на 20 мегабайт в секунду :)
Четырёхъядерный Core i5-2500K @ 3.3 GHz загружен ровно на 25%.
После нажатия Esc анимация прекращается и память освобождается до ~330 МБ.
Смотрю в диспетчера задач — потребление памяти растёт где-то на 20 мегабайт в секунду :)
Четырёхъядерный Core i5-2500K @ 3.3 GHz загружен ровно на 25%.
После нажатия Esc анимация прекращается и память освобождается до ~330 МБ.
Просветите дикаря, плиз — а чем все эти гифки так хороши, что люди видеоформаты не используют? Я как-то далек от этого, но вроде ж не логично…
Наоткрывал из RSS сразу несколько топиков не глядя, и думаю, что это у меня так браузер тормозит…
Во время работы анимации загрузка 1 из 8 ядер FX8120 на 95% (Opera 12.15).
Память при загрузке страницы оперой +100Мб, затем -40Мб по началу анимации.
При скроллинге страницы, вводе текста в поля, браузер весьма ощутимо подтормаживает, в том числе при фокусе на иных вкладках при открытой в фоне анимации.
Мне кажется, в этом виде технология не взлетит.
Память при загрузке страницы оперой +100Мб, затем -40Мб по началу анимации.
При скроллинге страницы, вводе текста в поля, браузер весьма ощутимо подтормаживает, в том числе при фокусе на иных вкладках при открытой в фоне анимации.
Мне кажется, в этом виде технология не взлетит.
Я явно вижу какую-то не такую анимацию, в чём может быть проблема?
Больше костылей! Разных костылей!
Как на счет APNG?
Как на счет APNG?
Сжатие не подходит, для подобного растра. + Не работает хотя бы в хроме.
Было бы круто разработать формат на подобие этих, только с нормальным сжатием и потом зафорсить плагины для его декодирования. Флеш же как-то стал стандартом.
Было бы круто разработать формат на подобие этих, только с нормальным сжатием и потом зафорсить плагины для его декодирования. Флеш же как-то стал стандартом.
WebP поддерживает анимацию. Но я не знаю, как у него со сжатием (т.е. сжимаются ли только отдельные кадры или всё изображение как целое).
Новость на habrahabr.
Новость на habrahabr.
25-я лисица, линукс икс64, загрузка одного из ядер — 90% всё время.
да, и расход памяти все больше и больше расходуется.
да, и расход памяти все больше и больше расходуется.
А у меня анимация моргает белым в начале анимации, что очень раздражает. Win 7 x64 Chrome 30.0.1599.101 m
Win 7, Firefox 25 — если прокрутить эту страницу сильно вниз, то все ок, а если оставить картинку видимой, то тормозит прокрутка даже соседних вкладок
Zoom на 150% (мой дефолт для хабрахабра) ломает картинку в хроме. С меньшим зумом отображается правильно.
Тормозит почище flash в старой (нехромой) Opera. При этом и ноут вроде неслабый i5-450 с 6 Gb памяти.
Хитрый способ подвесить браузер одной картинкой.
(Opera 12 x64, Core i7, 16 Gb, загрузка ядра 100%, все вкладки ощутимо притормаживают)
(Opera 12 x64, Core i7, 16 Gb, загрузка ядра 100%, все вкладки ощутимо притормаживают)
А вы не пробовали вставить картинку линком?
<svg>
<image x="20" y="20" width="300" height="80"
xlink:href="https://d339vfjsz5zott.cloudfront.net/SVG-Spinner/svg-spinner.png" />
</svg>
Opera Next 18, Win7 SP1, Core i5 3450, 24 Gb 1600. Сжатая версия проигрывается вдвое быстрее оригинальной, так должно быть? Для проверки скачка проца открыл в ФФ — дотянуло с 9 до 37%, там сжатая играется вообще как слайд-шоу из 5 фреймов.
На хроме версия 30.0.1599.114 Ubuntu 13.04 (30.0.1599.114-0ubuntu0.13.04.2) анимация отображается чуток быстрее чем оригинал.
Яндекс браузер (13.10.1500.9151) — не работает вообще, пустое белое поле.
Windows 8.1 + Chrome 30.0.1599.101 m — всё отлично.
Я вот не могу понять, чем этот способ лучше JS анимации или CSS3 анимации?
Тем что хранится всё в одном файле?
Так на одном файле, с помощью base64, можно реализовать и на JS, и на CSS3.
Давайте быть честными — бредовый способ.
Тем что хранится всё в одном файле?
Так на одном файле, с помощью base64, можно реализовать и на JS, и на CSS3.
Давайте быть честными — бредовый способ.
Данное решение имеет существенный недостаток, который выражается в высокой загрузке процессора (около 25%). Происходит это только во время загрузки файла, около 1-2 секунд, потом все возвращается в норму.
Что я делаю не так? У меня процессор стабильно грузится на 25-30%. Продолжается это все время, пока открыта эта вкладка (когда ее закрыл, загрузка тут же упала до 1%).
Как раз не так давно видел такую ссылку: stackoverflow.com/questions/13316354/svg-frame-based-animation Сам не пробовал, но утверждается, что первый пример нормально в Хроме работает.
Opera next 18.0.1284.26
Windows 8.1.
Анимация какая-то ускоренная. Но проц ведет себя как и память отлично. Ничего не увеличивается, не тормозит
Windows 8.1.
Анимация какая-то ускоренная. Но проц ведет себя как и память отлично. Ничего не увеличивается, не тормозит
Windows 8, последний Хром — все нормально. Анимация работает без заминок.
В FireFox под Ubuntu интересный эффект: часть страницы с картинкой прокручена на верх, компьютер работает без признаков жизни. стоит только показать картинку на экране — тут же начинает заводиться куллер.
еще как вариант можно использовать MJPEG, проц так не жрет помойму, восновном нагрузка на канал и сервак, но и трафа поменьше так как не кодируется в base64
А можно подробнее? Насколько я понимаю MJPEG это всего лишь метод сжатия. Т.е. отдельный проигрыватель все равно необходим?
по сути это неприрывный jpeg, то есть сервер не отдает content length и тем самым браузер не обрывает соединение. Работает нативно во всех современных браузерах, тупо передается ссылка в img
из неприятных особенностей, браузеры не очень хотят закрывать соединение, почти не лечится… на сколько я понял официальная бага
из неприятных особенностей, браузеры не очень хотят закрывать соединение, почти не лечится… на сколько я понял официальная бага
Opera 12, нагрузка постоянно около 25% (Core i5-2410M). При этом вроде как грузит и видеоядро…
А почему бы не использовать анимированные png?
А почему бы не использовать анимированные png?
Мне пришлось в настройках Firefox выставить permissions.default.image=2, чтобы написать этот комментарий.
Отображение картинок, грузящих машину настолько сильно, считаю багом.
Использование их в дизайне — хороший пример software bloat.
Отображение картинок, грузящих машину настолько сильно, считаю багом.
Использование их в дизайне — хороший пример software bloat.
Какой ужас… Эта ерунда повесила мой браузер. Автор, не надо нам таких анимаций нафиг.
FF25 при просмотре области поста с картинкой явно тупит браузер. Не знаю чем это измерить, но например при прокрутке вниз это хорошо видно. Как только анимация пропадает из обзора — сразу всё становится ок
Win7 32bit, Opera 12.16.
Загрузка 50% (от 2 ядер по 2ГГц), молотит не переставая. Браузер еле дышит.
Теоретически — интересно, а практически — уже сказал…
Загрузка 50% (от 2 ядер по 2ГГц), молотит не переставая. Браузер еле дышит.
Теоретически — интересно, а практически — уже сказал…
У меня такое ощущение, что только винда+хром справляется с этим хорошо. Есть пару мыслей как с этим можно разобраться.
А чем <video> не подходит? Поддерживается теми-же браузерами, что и SVG, работает лучше в плане производительности?
Еще вариант – тот-же jpeg с css-анимацией (step)?
Еще вариант – тот-же jpeg с css-анимацией (step)?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Хитрый способ создания анимированного jpeg'а