RGBA GIF в Webkit браузерах, и что делать с Firefox, Opera и IE
Добрый день. Все мы знаем, что Firefox и Opera поддерживает APNG формат. Но Webkit не желает их отображать. Но недавно я нашел один секрет Webkit под кодовым названием "RGBA GIF". Все мы знаем, что у GIF всего 256 цветов. Но суть в том, чтобы RGBA разделить по индексам GIF, а цвета индексов приравнять к самим индексам т.е. [r,g,b] = [i,i,i] . При этом ширина увеличится в четверо. Кроме того, Webkit поддерживает анимацию GIF в HTML5 Canvas при определенных условиях.
Мы можем создать 32-битную GIF анимацию (так мы условно назовем). Анимация отлично поддается оптимизации. Достаточно одной глобально палитры и не нужен дизеринг. Кроме того, Webkit браузеры поддерживают content:-webkit-canvas();
Для браузеров Firefox и Opera достаточно использовать APNG. Для IE придется обойтись статичной картинкой, или попробовать вставить "неполноцветный" GIF.
Я вообщем о чем хочу сказать.
Для красивой анимации нужен http://jnglike.site40.net/rgba/demo.gif, скрипт и http://jnglike.site40.net/rgba/o_sample.png.
1. Подключаем скрипт rgba.js: http://jnglike.site40.net/rgba/rgba.js
2. Пишем в HTML:
<img src="o_sample.png" style="content:-webkit-canvas(test);width:116px;height:135px;">
3. Прописываем в скриптах:
RGBAtoCSSCanvasContext("demo.gif","test");
4. PROFIT!
Для IE можно попробовать заменить src на GIF. Стоит заметить, что указание высоты и ширины обязательны т.к. иначе отображаться просто не будет.
Кто хочет увидеть результат, тогда пожалуйста: http://jnglike.site40.net/rgba
|