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

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

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

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

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

Хотим в общих чертах рассказать про первые достижения с deep learning в анимации персонажей для нашей программы Cascadeur.

Во время работы над Shadow Fight 3 у нас накопилось много боевой анимации — около 1100 движений средней длительностью около 4 секунд. Нам давно казалось, что это может быть хорошим датасетом для обучения какой-нибудь нейронной сети.

Однажды мы заметили, что когда аниматоры делают первые наброски идей на бумаге, то им достаточно нарисовать буквально палочного человечка, чтобы представить себе позу персонажа. Мы подумали, что раз опытный аниматор может хорошо выставить позу по простому рисунку, то вполне возможно, что и нейронная сеть справится. Из этого наблюдения родилась простая идея: давайте из каждой позы мы возьмем только 6 ключевых точек — запястья, щиколотки, таз и основание шеи. Если нейронная сеть знает только позиции этих точек, то сможет ли она предсказать остальную позу — позиции 37 остальных точек персонажа?

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

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

Всем привет! Мы — студия разработки Banzai Games. Рады наконец открыть здесь свой блог. Будем писать о наших технологиях, проектах и делиться историями из жизни компании. Первый материал — перевод интервью с основателем студии Евгением Дябиным, которое он дал коллегам из издания 80lv. В нем он рассказал о нашей программе для создания physics-based анимации Cascadeur и ее преимуществах перед mocap-анимацией.

11 июля (четверг) в 19-00 на Мансарде Rambler Group пройдет седьмой открытый RamblerFront& Meetup.

В программе встречи 3 доклада. Наши коллеги поделятся тонкостями работы с анимацией в web, расскажут о способах синхронизации вкладок браузера и порассуждают о миграции с монолитного web-приложения на SPA.

Подробнее о докладах:

В то время, когда видеоигры ещё находились в эпохе Pac-Man, аниматоры студии Disney Фрэнк Томас и Олли Джонсон перечислили в своей книге 1981 года «The Illusion of Life: Disney Animation» то, что сегодня считается базовыми правилами анимации — 12 основных принципов.

1. Сжатие и растяжение (Squash & stretch)
2. Сценичность (Staging)
3. Подготовка, или упреждение (Anticipation)
4. Использование компоновок и прямого фазованного движения (Straight ahead & pose to pose)
5. Сквозное движение (или доводка) и захлест действия (Follow-through & overlapping action)
6. Смягчение начала и завершения движения (Slow in & slow out)
7. Дуги (Arcs)
8. Дополнительное действие (Secondary action)
9. Привлекательность (Appeal)
10. Расчёт времени (Timing)
11. Преувеличение, утрирование (Exaggeration)
12. Профессиональный рисунок (Solid drawing)

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

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

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

В данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимацию (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.



Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.

«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)

Доброго времени суток, Хабр. Мы продолжаем цикл «Галоп Пикселя». Сейчас, находясь на старте 2019 года, можно с уверенностью говорить, что это не только цикл статей, но и многолетняя сага. Пространное повествование о пикселях, их жизни, способе их создания, приёмах и уловках в работе с ними. Мы не будем рассуждать о причинах первоначального «спринта», который затем превратился в многолетний марафон, ибо нет ничего более жизненного, чем сама жизнь. Кому нужны причины отсутствия или пауз, если можно просто вернуться к тому, что мы делали, в чём варились, и в чём, даст бог — будем наблюдаться и далее. В пикселях, конечно же!

Сегодняшняя публикация станет очередной, и возможно даже поворотной вехой в нашем повествовании. Наконец-то мы подошли к созданию полноценной анимации персонажей. Двумя предыдущими главами мы охватили анимацию света и тени, а также анимацию неподвижных персонажей (idle-animation) без ярко выраженных действий. Но сегодня наши персонажи пойдут, а в следующей части даже побегут, завоевав то, что уже давно их по праву рождения. Ещё один плодородный регион. И пройдут ещё одну точку, которая ознаменует окончание базового цикла. Наши пиксели наконец-то станут живыми.

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

Эту четырёхминутную короткометражку сделал студент из Нью-Йорка

Анимационные фильмы, созданные при помощи шлема VR, не являются особой новинкой. Но большинство из них – это отдельные сцены, зацикленные в повторяющуюся петлю типа анимированного GIF. Возможно, там двигается камера, выхватывает какие-то детали, но как таковой истории там нет. Но мультфильм Wired – это дело другое. Это один из первых анимационных фильмов, созданных в VR, содержащий несколько сцен и выраженную историю. Эта прекрасная короткометражка показывает жизнь мальчика, изучающего мир без беспроводных технологий. Он падает с кабеля, натянутого над огромными небоскрёбами, что заставляет местных жителей взглянуть вверх и насладиться небом.

Приветствую! Хочу вам показать один из способов, как реализовать свободное перемещение частиц в указанном диапазоне. Для выполнения этой задачи я буду использовать ReactJS. Но сам алгоритм все равно будет общим, и вы можете его использовать где угодно.

Создание связи игрока с персонажем, раскрытие подробностей его личности, чтобы он был для игрока уникальным — сложная задача, и как решить её всего несколькими простыми движениями?

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

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

Хотя очень немногие разработчики пришли к общему мнению о том, в каких играх есть наиболее запомнившиеся или интересные анимации ожидания (за исключением Earthworm Jim, которого, очевидно, любят все), они объяснили, почему из-за таких анимаций персонажи кажутся живыми, всего несколькими кадрами придавая своим мирам реалистичности.

Здравствуйте.

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



Для отрисовки я использовал javascript и canvas. Для каждого примера дана ссылка, где вы можете всё внимательно посмотреть. Можно заглядывать в исходный код, можно копировать себе — я не буду возражать. Материал вполне может пригодиться на занятиях и факультативах по физике, математике или информатике.

Итак, поехали.

NVIDIA PhysX, самый популярный в мире движок физической симуляции, отправляется в опенсорс.

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

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

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

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

Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.

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

Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.


Вот полная версия страницы.

Небольшая, но на мой взгляд очень полезная и интересная статья)

Некоторые делают это лучше чем другие, раскрывая психологию микро-анимации.



Микро-подталкивание — это своевременная небольшая анимация, которая побуждает пользователя выполнять «маленькую» задачу, которую они, возможно, забыли или не заметили.

Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.

Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



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