Как стать автором
Поиск
Написать публикацию
Обновить
7.4

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

Мультипликация при помощи компьютера

Сначала показывать
Период
Уровень сложности

Делаем крутой sticky-эффект для слайдера на React

Время на прочтение7 мин
Количество просмотров18K

Есть много разных библиотек для реализации слайдера со всеми возможными эффектами. Для React одни из лучших это: ReactSlick и Swiper. Но когда для моего проекта потребовался горизонтальный sticky-эффект, то ничего подходящего не нашлось.



В этой статье мы попробуем поэтапно создать такой слайдер, возможно он вам тоже понадобится!

Читать дальше →

Юзабилити карточки товара. Сценарий выгодный для бизнеса

Время на прочтение4 мин
Количество просмотров13K
Карточка товара

О чём пойдёт разговор?


Речь сегодня пойдет о юзабилити-оптимизации карточки товара. Возьмем реальный интернет-магазин и попытаемся улучшить UX существующего функционала. Поищем неэффективности в текущем интерфейсе, зная наперёд несколько актуальных проблем в продукте.

Каков план действий?


Внешний вид компонентов не меняем, т.е. остаемся в рамках текущего UI. Но можно воздействовать на типографику: размер и плотность текста менять разрешается. Будем использовать Axure для создания максимально реальной картины. То есть в арсенале будут все доступные приемы интерактивного прототипирования: интерфейсная анимация, смена состояний, смена текста внутри меток, динамическое сокрытие/показ объектов и т.п. Каждый прием будет рассмотрен отдельно ниже. Разрешается немного манипулировать, чтобы призвать пользователя к нужным нам действиям, которые требуются бизнесу.
Читать дальше →

Must-Have: 15 игровых спрайтов для дизайнера и художника

Время на прочтение2 мин
Количество просмотров25K
Создание игр – процесс трудоемкий и длительный. Но его можно ускорить с помощью готовых наборов ассетов, спрайтов, интерфейсов и массы других полезных ресурсов. Даже если вам просто нужны материалы для изучения какого-либо аспекта геймдизайна, в этом списке найдется то, что нужно.


Читать дальше →

5 советов по созданию впечатляющей моушн-графики

Время на прочтение4 мин
Количество просмотров20K
Светлана Шаповалова, редактор «Нетологии», перевела статью Кары Эберле о том, как создавать эффектную и качественную анимационную графику и что для этого нужно.

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


Flutter-Анимации 2025: Полный Гайд

Уровень сложностиСложный
Время на прочтение50 мин
Количество просмотров3.7K

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

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

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

Это похоже на новую религию, я заинтере...

Как уменьшить вес продуктовой анимации в 400 раз (без AI)

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров12K

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

В статье мы ответим на следующие вопросы: Какой формат анимации с растровыми элементами выбрать для использования в мобильном приложении? Как уменьшить вес файла и не потерять качество картинки? И как со всем этим связаны Lottie-анимации?

Читать гайд

Как создать каскадную анимацию, используя SCSS

Время на прочтение2 мин
Количество просмотров5.7K

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

Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого "вау-эффекта" нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.

Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.

Читать далее

Симуляция невесомости с помощью программы Cascadeur

Время на прочтение3 мин
Количество просмотров2.6K


Ранее мы исследовали, каким образом кошка разворачивается во время падения, чтобы приземлиться на лапы. Мы учли закон тяготения и провели наш эксперимент с ожидаемым исходом.

Но что будет, если полностью отключить гравитацию? Представьте: космонавт находится в невесомости, а поблизости нет предметов, от которых он мог бы оттолкнуться. Сможет ли он развернуться в нужную ему сторону, используя лишь движения собственных конечностей? Давайте посмотрим, как справятся с этой задачей физические инструменты Cascadeur.
Читать дальше →

音MAD (otoMAD) — безумие или искусство?

Время на прочтение8 мин
Количество просмотров5.6K

Интервью c авторами "The Glorious Octagon of Destiny", восьмиминутного ролика, на создание которого ушло почти два года. В производстве видео принимало участие около тридцати человек. Ролик является качественным образчиком otoMAD-культуры, набирающей мировую популярность.

Читать далее

Полируем UI в Android: StateListAnimator

Время на прочтение5 мин
Количество просмотров6.7K
Привет, Хабр! В преддверии старта курса «Android Developer. Professional» мы подготовили для вас перевод еще одного интересного материала.




Большую часть времени разработки нашего Android-приложения мы тратим отнюдь не на работу над пользовательским интерфейсом — мы просто накидываем вьюх и начинаем писать код. Я заметил, что большинство из нас не особо заботится о пользовательском интерфейсе. И я считаю, что это в корне неправильно. Разработчики мобильных приложений должны заботиться также и о UI/UX. Я не говорю «будьте экспертом в мобильном UI», но вы должны понимать язык дизайна и его концепции.

Ранее я написал статью о тенях в материальном дизайне и получил много хороших отзывов. Я хочу поблагодарить всех вас. «Освоение теней в Android» рассказывает о высоте (elevation) и тени (shadow) в Android. Там же я показал, как дополнял ими свою UI библиотеку с открытым исходным кодом. (Scaling Layout).

В этой статье я хочу усовершенствовать свою библиотеку с помощью StateListAnimator и шаг за шагом показать вам, как я это буду делать.

Стартовал открытый бета-тест Cascadeur

Время на прочтение2 мин
Количество просмотров3.2K


Со времени первого анонса Cascadeur в начале 2019 года уже более 18 000 пользователей приняли участие в закрытом бета-тестировании программы. У аниматоров, занимающихся разработкой игр и созданием фильмов, было более 12 месяцев, чтобы испытать в работе наш инструментарий.

Сегодня мы рады сообщить о запуске открытого бета-теста (ОБТ) своей анимационной программы для физически корректной анимации персонажей. Благодаря ОБТ протестировать и оценить ее возможности сможет более широкий круг пользователей.

Sol Levante: как делали аниме в 4K и HDR для сервиса Netflix

Время на прочтение13 мин
Количество просмотров6.1K


Аниме, часто отвергаемое как всего лишь мультики, — это разнообразные и сказочные сюжеты, живой стиль и изящная графика. Это форма искусства, которая за последние пятьдесят лет развивалась и росла в популярности, многообразии и сложности. Началось оно, вероятно, с расписных ламп в начале XX века, затем в 1970-х приобрело в Японии широкую популярность. Сегодня у зрителей есть выбор из сотен сериалов и полнометражных фильмов в стиле аниме со всего мира.

Наша команда Creative Technologies захотела повысить техническое качество картинки аниме, узнать, какие новые творческие возможности это может дать людям, и что потребуется для увеличения разрешения аниме с HD до 4К и ввода в инструментарий художников более широкой цветовой палитры в HDR (высоком динамическом диапазоне). Когда заходила речь о 4К, большая часть японских аниматоров просили одного и того же: бумагу большего размера! Однако художники студии Production I.G. считают, что будущее за цифровыми технологиями. Так родилась крупная и красочная коллаборация – и получившийся в результате работы короткометражный фильм Sol Levante доступен для просмотра на Netflix в 4K Dolby Vision и Atmos!

Можно ли в 1С не соблюдать технологию внешних компонент? Или Как поздравить коллег с помощью 1С?

Время на прочтение13 мин
Количество просмотров9.5K
Возникла тут идея поздравить нашего главного бухгалтера более-менее оригинально, например, с помощью ее любимой программы 1С? Но как?

После некоторых размышлений, пришла мысль использовать для поздравлений фоновое изображение в клиентской области обычных форм для конфигураций на 1С77–1С82 либо во внешнем окне для управляемых форм 1С82 и во всех случаях для 1С83. На нем вывести нужное сообщение и дать ссылки на поздравительное видео, как показано на рисунке.

Поздравление в 1С
Читать дальше →

Ближайшие события

Мультимедийная 3D реконструкция театральной постановки «Чайка» на сцене Александринского театра (17 октября 1896)

Время на прочтение6 мин
Количество просмотров9.6K
Университет ИТМО и Лаборатория Компьютерной Графики и Виртуальной Реальности (Санкт-Петербургский государственный университет аэрокосмического приборостроения) совместно с Александринским театром и Российским Государственным Институтом Сценических Искусств создали реконструкцию главной сцены Александринского театра (Россия, Санкт-Петербург).

image

Чтобы создать аутентичную виртуальную реконструкцию, были использованы как черновые зарисовки сцены и зрительного зала так и техническая документация сценического оборудования в разные периоды времени, а том числе документация реконструкции театра в 2006 году.

image

О процессе работы и результатах мы сделали доклад на конференции SGEM Vienna (http://sgemvienna.org/, Австрия, Вена), ниже публикуем перевод нашей статьи.

Читать дальше →

Нужен ли голос видеороликам

Время на прочтение3 мин
Количество просмотров7.5K
Всем привет! Недавно мы в Alconost сделали два видеотрейлера для мобильных игрушек примерно в одном стиле: эпические сражения, мечи, рыцари-викинги. Главное отличие между роликами — один с голосом диктора, второй — без.

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

Собственно ролики:



Читать дальше →

Эпилепсия и опасный контент

Уровень сложностиСредний
Время на прочтение2 мин
Количество просмотров1.9K

Мозг людей с эпилепсией похож на электрическую цепь с перегрузкой. Резкие вспышки света или мигание (3+ раз в секунду) вызывают «короткое замыкание» — приступ. Дизайн с такими эффектами становится буквально опасным».

Читать далее

Разрушение каменной башни в Блендер 3D

Уровень сложностиСложный
Время на прочтение6 мин
Количество просмотров4K

Задача: разрушить в Блендер 3D каменную средневековую башню.

На видео (0:33) можно посмотреть результат:

Читать далее

Настоящий эффект параллакса

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.4K

Parallax 3D

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

Читать далее

ReBoot: история первого в мире 3D-мультсериала «Повторная загрузка»

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров4.3K

Большинство людей полагают, что эра 3D-анимации началась с пиксаровского шедевра "История игрушек" в 1995 году. Однако это не так. Четырьмя годами ранее "ReBoot" уже с успехом продемонстрировал потенциал создания 3D-мультсериалов.

Идея создания первого полноценного компьютерного ТВ-сериала возникла благодаря Гэвину Блэру (Gavin Blair) и Яну Пирсону (Ian Pearson), профессионалам в области компьютерной анимации, которые в 1984 году совместно работали над клипом "Dire Straits" для композиции "Money for nothing". Однако, технологии того времени не позволяли им реализовать свою задумку, и они вынуждены были трудиться и ждать ещё 5 лет, чтобы создать необходимую программу и получить финансирование проекта.

Вспомним молодость

Как зародилась компьютерная графика

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров12K

В 1960-х и 70-х годах пионеры компьютерных наук Дэвид Эванс и пожизненный член IEEE Иван Е. Сазерленд возглавили разработку технологий, которые аниматоры используют и сегодня. Новаторские исследования, которые они проводили в Университете штата Юта в Солт-Лейк-Сити и в собственной компании Evans and Sutherland, помогли запустить индустрию компьютерной графики.

Читать далее