Компьютерная анимация *

Меня зовут Иван Стародубцев, я автор курса для новичков «Лучший по Python» на Stepik. Он не просто так называется: за год его прошли почти 30 тысяч учеников, которые оставили 3,8 тысячи отзывов со средней оценкой 5 звёзд. Это курс, написанный максимально простым языком в формате диалога, без снобизма и математики. Вместо скучных формул там интересные задачи из жизни, а уже на второй неделе студенты пишут первые игры.

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

Работа иллюстратора на 100–150 картинок стоит 300–450 тысяч рублей. Это дорого, долго и негибко: захотел добавить новую сцену — снова договариваешься, ждёшь, платишь. Поэтому я решил выстроить собственную схему по производству иллюстраций на нейросетях. Сегодня расскажу, как это работает и, главное, как помогает студентам.

Команда Python for Devs подготовила перевод статьи о Manim — Python-инструменте для создания наглядных математических анимаций в стиле 3Blue1Brown. Разбираемся, как с помощью кода визуализировать уравнения, графики и абстрактные идеи так, чтобы они были понятны коллегам, менеджерам и студентам.

Скорее всего, вам доводилось слышать о градиентном шуме, вернее, о той его версии, которая называется шум Перлина и описывает одну конкретную реализацию, сопряжённую с различными оптимизациями на уровне ЦП. Поскольку это невероятно мощный инструмент для творческой работы, он используется практически везде: при создании визуальных эффектов, видеоигр, процедурно-математического искусства и т.д. Да, как следует настроить его — порой тонкая работа, и неисправная реализация на первый взгляд всё равно может выглядеть хорошо или интересно. В конце концов, «смотрится неплохо, а я художник, я так вижу».  

Чтобы глубже и результативнее понять градиентный шум, мы сначала изучим его одномерную версию (в литературе этот случай обычно не рассматривается), а затем медленно пойдём вверх по лестнице измерений в сторону усложнения задачи. Эту тему мы будем рассматривать с точки зрения графического процессора (GPU), а не с точки зрения обычного ЦП. Все примеры кода и анимации, приведённые в этой статье, реализованы на WebGL2/GLSL (надеюсь, это будет не слишком сильно сказываться на производительности). Примеры должны работать на большинстве современных устройств.

Всем привет! На связи Олег Зильберг, дизайн-директор AGIMA. Каждый год мы выпускаем шоурил — короткий ролик, в котором показываем наши лучшие проекты за последнее время. Но в этот раз мы решили отойти от стандартов этого жанра и придумать что-то кардинально иное.

По сути, мы сделали трейлер к несуществующему фильму, который получил название Decoders. Он рассказывает о расшифровке послания из космоса. Но спойлерить не буду, смотрите сами:

Команда JavaScript for Devs подготовила перевод статьи о новом CSS-правиле @starting-style — инструменте, который обещает упростить анимацию появления элементов. Но всё ли так гладко? Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.

Как фанату экстремального вокала мне повезло работать с рок‑исполнительницей, которая ещё и поёт на языке рока — английском. За последние месяцы у Anne Clainoire вышло два клипа: видео, полностью созданное ИИ, и видео со сложной съёмкой в нескольких студиях, в том числе на подводной локации. Их мы и будем сравнивать.

«You are enough» вышел 26 июня 2025. Трек сфокусировался социальных проблемах: манипуляциях общественным мнением, психологическом давлении и необходимости в этих условиях выжить и остаться собой. Кадры в духе гротескно‑красной «Суспирии» Ардженто создал ИИ по промптам самой певицы. Ни одного кадра снято вживую не было — только чистое сияние искусственного разума.

Релиз »Hot Tub» состоялся 13 августа. Тут была классическая съёмка в студии, нанятые актёры, была арендована локация с глубоким бассейном, в котором исполнительнице предстояло «парить» несколько часов, будучи привязанной к специальным грузам. Сюжет клипа многоуровневый: лирическая героиня засыпает, таинственный гид проводит ее до той самой ванны из названия. Там она снова засыпает и погружается уже в свои истинные переживания, видимо, в подсознании. Мы можем долго гадать, были ли это отсылки к «Началу» вкупе с «Алисой в Зазеркалье» или мифические нотки Аида и Персефоны... Энн оставляет свободу интерпретации своим зрителям, так что любая наша трактовка имеет право на существование.

Из компьютерного в сингле только мотыльки, которые летят на пламя: они символизируют борьбу со страхами и переживаниями. Так что ни один «сгоревший» мотылек в ходе съемок не пострадал.

Множество Мандельброта - является одним из самых известных фракталов, в том числе за пределами математики, благодаря своим цветным визуализациям. Я этим занимаюсь 20 лет. Несколько вещей интересны. Вот они.

Первая - множество Мандельброта идеальное - самостоятельное нематериальное начало, существующее вне пространства и времени. Вот так. Проверить никак. Пусть не веру. То есть пусть в совсем другом веке, в другой галактике. Пусть он другой мозг. А множество одинаковое. Оно минует абсолютно все. Все миллиардов световых лет...

Вооружившись игровым движком Unity, я написал техническое демо, в котором пытаюсь наложить кубические воксели Minecraft на шарообразное тело (планету). Планета генерируется процедурно, и её можно полностью разрушить. Игроки могут расставлять или убирать разные блоки, которых насчитывается более 20 типов.

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

Веб-анимация вносит большой вклад в улучшение пользовательского опыта. Простые анимации из меняющихся картинок создать несложно. Но иногда возникают более интересные задачи — например, «оживление» персонажа.

Меня зовут Маша, я дизайнер в Selectel. В этой статье расскажу, как создать сложную анимацию с использованием Lottie и After Effects. Будет полезно дизайнерам и начинающим разработчикам.

Анимация уже давно стала стандартным инструментом в дизайне и способна выполнять самые разные задачи: обеспечивает плавность и приятную отзывчивость — как в современных ОС (например, дизайн-система Android Material 3 или Apple, которые используют принципы Springs), транслирует голос бренда и становится частью айдентики (CashMoney, Instagram, Plex), добавляет продуктовым сценариям эмоциональность и значимость. Недавно и перед нашей командой встала задача «оживить» некоторые из них. 

Меня зовут Саша Гончаров, я моушен-дизайнер в 2ГИС. По просьбе продуктовых дизайнеров я подключился к работе над анимацией интерфейсов. В этой статье вместе с разработчиком Сергеем Львовым расскажем, на что стоит обращать внимание при создании интерфейсных анимаций, какие технические нюансы важно учитывать и как мы достигаем желаемых эффектов. Материал будет полезен моушен-дизайнерам, которые хотят работать с интерфейсами, а также разработчикам, интересующимся особенностями рендеринга объектов на карте.

В области графических форматов в последнее время произошло много интересных событий. Вышла новая спецификация PNG с официальным утверждением формата анимированной графики APNG, хотя его поддержка в браузерах реализована уже довольно давно.

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

Привет всем читателям замечательного Хабра! Может кто-то из вас припомнит мою статью, вышедшую в конце 21-го года. Тогда я спешил поделиться первым опытом создания мультфильма, про волка-кулинара и его «мишленовскую» яичницу :-) Признаюсь, что пользователи Хабра оказались самыми благодарными зрителями и читателями, такого большого фидбека я не получал ни с одной из социальных сетей. Огромная вам благодарность. После такой доброжелательной реакции, я захотел делать продолжение и строил радужные планы.

Кейс из жизни: мини-приложения, анимированные обложки, внешние команды — и одна на вид «валидная» анимация, которая кладет все приложение. Рассказываем, как мы научились воспринимать Lottie-файлы не как медиа, а как исполняемый код — и почему это улучшило стабильность всей системы.

Мне периодически хочется донести какие-то идеи через визуальные образы - видео фрагменты, встроенные в голосовое объяснение. Но в редакторах анимаций это делать очень трудоемко.

На днях до меня дошло - можно дать ИИ задачу с желаемой анимацией, и он создаст это в виде html+css+js кода. Потом записать эту страницу на видео и использовать её уже в CapCut, встроив в повествование как визуальный элемент.

Пока большинство разработчиков гонятся за технологиями и всё больше интегрируют нейросети в свой рабочий пайплайн, предлагаю обратиться к прошлому и поговорить о ротоскопировании — методе мультипликации, созданном ещё в начале XX века. А также о том, как, используя эту технику, повысить качество арта и анимаций в своих играх, особенно если вы не очень хорошо рисуете.

В честь скорого выхода 27-го сезона анимационного сериала «Южный парк» мы решили вспомнить лучшие серии, которые затрагивают видеоигры и игровую индустрию. Создатели шоу Мэтт Стоун и Трей Паркер — настоящие гики, которые среди прочего очень любят игры. Однако любить — не значит не видеть многочисленные недостатки, которые можно обыграть в сатирическом ключе. А именно за это мы и ценим South Park.

Привет, Хабр! Анимации – это та самая вишенка на торте, которая превращает просто работающее приложение в нечто, чем приятно пользоваться, что хочется «потрогать». Но как сделать так, чтобы эта вишенка не превратилась в тыкву, тормозящую весь UI и съедающую батарейку?

За годы практики я перепробовал, кажется, всё: от простейших AnimatedContainer до замороченных кастомных решений с физикой и глубокой интеграцией с Rive. И сегодня я хочу поделиться с вами этим опытом, собрав в одном месте всё, что нужно знать о создании анимаций во Flutter в 2025 году. Это будет настоящий лонгрид-энциклопедия, так что заварите кофейку или что покрепче!

Мы пройдемся по основам, заглянем под капот продвинутых техник, разберем популярные пакеты и, конечно же, поговорим о том, как не убить производительность и добиться заветных 60+ FPS. Вся информация и ссылки тщательно проверены и актуальны (насколько это возможно предсказать) на июнь 2025 года. Поехали!

Любители аниме, ликуйте. Принесли в качестве рекомендации очередной шедевр, хотя вы наверняка уже могли его видеть. Качественное чтение с хронологией мира японской анимации, как и обещано в заголовке, лаконичные главы и привкус ностальгии — вот главное о книге. Ощутить это можно, даже просто прочитав введение и пару-тройку глав.

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