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

Все знают, что кошка всегда приземляется на 4 лапы, как бы ее ни бросили. Этот вопрос давно занимал физиков, и было предложено несколько моделей того, как это кошке удается. Все эти модели достаточно приблизительны и обычно ограничиваются цилиндрами. Однако, команда программы для physics-based анимации Cascadeur попробовала смоделировать переворот кошки на более подробной физической модели.

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

Знакомимся с Web Animations API - 1

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи Charlie Gerard «Exploring the Web Animations API».

Знакомимся с Web Animations API

Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.

Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).

Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.

Давайте рассмотрим этот API на простом примере.
Читать полностью »

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

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

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

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

Реалистичная анимация персонажей в играх с помощью ИИ - 1

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

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

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

Привет! Мы тут в Playrix решили сделать свой Unity3D. А там есть Animator. В этой статье я  расскажу, как мы сделали его у себя и как он работает.

Анимационный граф состояний - 1

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

Как использовать прерывания в Unity Animator на полную - 1

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

До 1996 года веб был статичным и скучным. Но случайное создание технологии Flash превратило его в какофонию шума и цвета, в противоречивый продукт, предвещающий появление современного веба

Взлёт и падение Flash, раздражающего плагина, сформировавшего современный веб - 1

9 июня 2008 года, примерно через час после начала ежегодной презентации Apple на WWDC в Калифорнии, прорыв, которого ждал Роб Смол, появился из недр торта. На сцене присутствовал Стив Джобс, довольный собой больше, чем обычно. Сам Смол смотрел за трансляцией презентации из Лондона.

Торт размером со слона, украшенный аккуратными ягодками и увенчанный единственной зажжённой свечой, светился на экране слева от директора Apple. «Приближаясь к первому дню рождения iPhone, — говорил Джобс, повышая голос, — мы смогли вывести его на следующий уровень». Торт распался, и появился логотип. Аудитория покорно разразилась приветственными криками. «Сегодня, — выкрикнул Джобс, — мы представляем вам iPhone 3G!»
Читать полностью »

Эта запись девлога целиком посвящена моей системе анимации персонажей, она наполнена полезными советами и фрагментами кода.

За последние два месяца я создал целых 9 новых действий игрока (такие забавные вещи как блокировка щитом, уворачивание в прыжке и оружие), 17 новых носимых предметов, 3 набора брони (пластинчатый, шёлковый и кожаный) и 6 видов причёсок. Также я завершил создавать всю автоматизацию и инструменты, поэтому всё уже используется в игре. В статье я расскажу, как этого добился!

Модульные спрайтовые персонажи и их анимация - 1

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

Краткое описание

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

Разумеется, такие функции активно используются в 3D- и 2D-играх с пререндеренными спрайтами или в 2D-играх со скелетной анимацией, но насколько я знаю, существует не так много игр, совмещающих созданную вручную анимацию и модульных персонажей (обычно потому, что процесс оказывается слишком монотонным).
Читать полностью »

Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования. Тем фронтендером был Юрий Артюх (akella).

История одной анимации - 1

Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.
Читать полностью »

Музей русской эмиграции: как мы ставили датчик движения в граммофон и вообще добавляли технологий - 1

Недавно в Москве в Доме русского зарубежья им. А. Солженицына открылся Музей русской эмиграции (на Таганской). Если вы были в современных музеях, то знаете, что они всё меньше похожи на витрины антикварных магазинов и всё больше предлагают участвовать в экспозиции зрителям.

После событий 1918 года и последующей волны эмиграции за рубежом начала формироваться параллельная Россия с собственной культурной идентичностью. Многие наши соотечественники уезжали в Китай, Европу, Америку, Австралию, Африку. В общем, распространялись по всему миру.

Жизни эмигрантов «там» и посвящён музей:

  1. Почему многие были вынуждены покинуть родину. Как на новом месте сохраняли культуру.
  2. Какой вклад представители русской эмиграции первой, второй и третьей волны внесли в мировые науку, литературу, искусство и многие другие области.
  3. Что прямо сейчас происходит с русскими, живущими в других странах. В смысле как они там живут.

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

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


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