Рубрика «gif-анимация»

Введение

Всем здравствуйте! Иногда у меня возникает потребность в анимированных графиках. Они помогают сделать подачу информации красивее и, что самое главное, нагляднее. Matlab позволяет создавать такие графики, причём с помощью всего нескольких функций. В данной статье будут рассмотрены основные принципы создания анимации — мы сделаем парочку графиков и сохраним всё это в GIF-файлы. Вот один из примеров, чтобы вы понимали, какой можно получить результат:

Читать полностью »

image
Анимированная GIF. Файл весит 4МБ

Эта анимированная гифка весит 4МБ, хотя может весить В ДЕСЯТЬ РАЗ МЕНЬШЕ — 380кб! Это ужасно, потому что нагружает интернет-каналы в десятки раз больше, чем должно.

Почему GIF должен умереть

  • Вес файла GIF ровно в 10 раз больше чем H264
  • Анимированный GIF поддерживает только 256 цветов
  • Формат H264 поддерживают ВСЕ современные браузеры
  • Так как H264 это по сути видео, к нему опционально можно добавить элементы управления: перемотку, паузу.

Я делаю сложные большие статьи с кучей видео, демонстраций функций, анимаций. Совесть не позволяет мне вставлять гифки по 20МБ в статью, потому что это преступление против современных технологий и каналов провайдеров. Поэтому я прошу хабр добавить возможность вставлять H264 с автовоспроизведением БЕЗ звука, при этом скрывать элементы управления плеера.
Читать полностью »

Привет, сегодня я хочу вам предложить наглядное пособие по моделированию некоторых физических процессов и показать как получить красивые изображения и анимации. Осторожно много картинок.Визуализация линий напряженности и движений электростатических зарядов, симулирование движения планет солнечной системы - 1Читать полностью »

Анимированные QR коды - 1В свободном доступе появилась реализация интересных графических или анимированных QR кодов.

Вы можете применить эту идею в ваших проектах. Например, предоставить возможность пользователям создавать QR коды из аватарок, использовать в маркетинге или продвижении.

Github: github.com/sylnsfar/qrcode
Веб-версия: www.amazing-qrcode.com

Примеры анимированных QR кодов, GIF 1Мб

BPG (Better Portable Graphics) — новый графический формат, цель которого заменить JPEG там, где качество или размер файла имеют значение. Именно так описывает BPG создатель этого формата — гениальный программист Фабрис Беллар, автор таких программ как LZEXE, FFmpeg, QEMU и др.

Основные преимущества BPG

  • Высокая степень сжатия. Файлы гораздо меньше, чем JPEG при таком же качестве.
  • Поддержка большинством веб-браузеров через маленький Javascript-декодер (56 КБ в gzip).
  • Основан на подмножестве открытого стандарта видеосжатия HEVC.
  • Поддержка тех же форматов цветности, что и в JPEG (grayscale, YCbCr 4:2:0, 4:2:2, 4:4:4) для снижения потерь во время конвертации. Альфа-канал поддерживается. Цветовые пространства RGB, YCgCo и CMYK тоже поддерживаются.
  • Нативная поддержка от 8 до 14 бит на канал для расширения динамического диапазона.
  • Возможно сжатие без потерь.
  • Различные метаданные (такие как EXIF, профили ICC, XMP) можно внедрить в файл.
  • Поддержка анимации.

Именно последний пункт даёт возможность предположить, что BPG заменит в интернете анимированный GIF. В самом деле, он лучше по всем параметрам.
Читать полностью »

GIF изнутри - 1
Вам когда-нибудь было интересно, как устроены gif-ки? В данной статье попробуем разобраться с внутренним строением GIF-формата и методом сжатия LZW.

Структура GIF

Файл в формате GIF состоит из фиксированной области в начале файла, за которой располагается переменное число блоков, и заканчивается файл завершителем изображения.

GIF изнутри - 2

Основные характеристики формата GIF:

  • Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов;
  • Поддерживается 256-цветовая палитра;
  • Этот формат позволяет хранить несколько изображений в одном файле;
  • GIF поддерживает анимационные изображения;

    Такие изображения представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Анимацию можно сделать цикличной, тогда вслед за последним кадром начнётся воспроизведение первого кадра и т. д.

  • Поддерживает «прозрачность»;

    Один из цветов в палитре может быть объявлен «прозрачным». В этом случае в программах, которые поддерживают прозрачность GIF (например, большинство современных браузеров) сквозь пиксели, окрашенные «прозрачным» цветом, будет виден фон. GIF анимация может использовать прозрачность для того чтобы не сохранять очередной кадр целиком, а только изменения относительно предыдущего.

  • Используется универсальный алгоритм сжатия без потерь LZW.

Читать полностью »

Делаем скриншоты правильно: практические советы - 1
Устройство для снимка экрана на первых компьютерах (Command-Shift-3)

Если вы когда-либо делали хелп или мануал для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.

Ведь кажется, что скриншот — это “секунда работы, Alt+PrintScreen и Ctrl+V!”. Некоторые клиенты удивляются, когда слышат, что скриншот в мануале может стоить и $2 и даже $5.

В этой статье я расскажу, как правильно делать скриншоты, почему это не просто “два клика” и какие подводные камни встречаются на пути неопытного скриншотера. Рассматривайте ее как чеклист или список практических советов для тех, кто документирует ПО. Надеюсь, это поможет вам избежать разочарований и порадовать юзеров красочными понятными картинками.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js