Всем здравствуйте! Иногда у меня возникает потребность в анимированных графиках. Они помогают сделать подачу информации красивее и, что самое главное, нагляднее. Matlab позволяет создавать такие графики, причём с помощью всего нескольких функций. В данной статье будут рассмотрены основные принципы создания анимации — мы сделаем парочку графиков и сохраним всё это в GIF-файлы. Вот один из примеров, чтобы вы понимали, какой можно получить результат:
Допустим, вы ради шутки хотите создать дико трясущийся GIF (https://knowyourmeme.com/memes/vibrating-gifs). Редактор GIF позволяет задать длительность/задержку кадра, поэтому для максимальной тряски вы указываете самое маленькое значение. Но при просмотре получившегося GIF оказывается, что она проигрывается гораздо медленнее, чем задумано, и вы точно видели более быстрые GIF. Что же происходит?
Если вы читаете эту статью, чтобы исправить свой GIF и вам нужен чёткий ответ, то вот решение: установите задержку кадра не на 10 мс, а на 20 мс. Если вы хотите чуть больше узнать о GIF и о том, почему возникает этот пограничный случай, а также о том, как улучшить ситуацию, то продолжайте чтение!
(Пояснение: если вы читаете статью из далёкого утопического будущего, где это перестало быть проблемой, то некоторые из примеров GIF будут не особо понятными. В противном случае, мои соболезнования, и можете не обращать на это пояснение внимания.)
Я, когда мои GIF слишком медленные
Читать полностью »
Анимированная GIF. Файл весит 4МБ
Эта анимированная гифка весит 4МБ, хотя может весить В ДЕСЯТЬ РАЗ МЕНЬШЕ — 380кб! Это ужасно, потому что нагружает интернет-каналы в десятки раз больше, чем должно.
Я делаю сложные большие статьи с кучей видео, демонстраций функций, анимаций. Совесть не позволяет мне вставлять гифки по 20МБ в статью, потому что это преступление против современных технологий и каналов провайдеров. Поэтому я прошу хабр добавить возможность вставлять H264 с автовоспроизведением БЕЗ звука, при этом скрывать элементы управления плеера.
Читать полностью »
Вместо тысячи слов...
xZibit тоже рад, ведь здесь GIF вставлены в стикеры, чтобы быть вставлеными в GIF для КДПВ!
А теперь о подробностях реализации.
Читать полностью »
Сейчас 2019 год, и нам пора бы принять решение относительно GIF (нет, речь не об этом решении! Здесь мы никогда не договоримся! — тут речь о произношении в английском, для нас это не актуально — прим. перев.). GIFы занимают огромное количество места (обычно по несколько мегабайт!) что, если вы веб-разработчик, полностью противоречит вашим желаниям! Как веб-разработчик, вы хотите минимизировать вещи, которые пользователям нужно скачать, чтобы сайт загружался быстро. По той же причине вы минимизируете JavaScript, оптимизируйте PNG, JPEG, а иногда и конвертируете JPEG в WebP. Но что же делать со старичком GIFом?
Когда Банди с другом начинали работать над динамичным рогаликом Wizard of Legend, они понимали, что главная проблема — это недостаток опыта. У них не было связей, бюджета на маркетинг или экспертизы, которую могли бы использовать ветераны индустрии. Поэтому было важно начать рассказывать об игре как можно раньше.
Они быстро поняли, что gif-изображения точнее передают динамику игры и лучше привлекают внимание людей. За год они узнали много нового о том, как сделать гифку убедительной.
Читать полностью »
Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Всё время смущали вопросы простоты поддержки и применения, но в большей степени — пропускная способность решений. Хотелось, чтобы это было что-то простое в использовании и быстрое в работе. Готовые решения не подошли, и мы взялись делать свое.
Под катом расскажем, что из этого вышло, какие задачи решали, и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов. Этот пост — расшифровка доклада, который прозвучал на HolyJS 2017 Moscow. Видео можно посмотреть по ссылке, а почитать и посмотреть слайды — далее.
tl;dr
video хорошая идея, но есть недостатки: они не подгружаются предварительно, используют range запросы.img src =".mp4" в Safari Technology Preview.
Особая благодарность: Эрику Портису, Джеку Ноблу, Джону Дэвису, Дорону Шерману и Йоаву Вайсу.
Читать полностью »
Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.
Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.
Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Читать полностью »
Привет всем! Как то раз, я загорелся одной идеей: Что будет, если попробовать совместить создание видео и Виртуальную реальность, а именно, передавать движения, на виртуального персонажа и в дальнейшем иметь возможность записывать ролики. В итоге, вот уже третий месяц, длится разработка данного концепта. Я программист-самоучка, начинал все не имея какого-либо опыта в этой сфере, но благо, в интернете полно информации на все случаи жизни. Делается все на Unity, с использованием C#.
Вот небольшой шоукейс из того, что уже получилось:
Ваши движения передаются на виртуального персонажа.
Читать полностью »