Также смотрите другие статьи серии "Как визуализировать и анимировать (геофизические) модели":

• Вводная статья со списком используемого программного обеспечения
• Показываем исходные данные
• 3D анимация и визуализация 4D данных
• Информативность визуализации
• Воксельные модели и сетчатые поверхности

Для визуализации анимированных 3D результатов без симуляции реальных процессов используются различные эффекты прозрачности и движения. При выполнении 3D симуляции — моделировании динамических процессов — нам необходимо уметь показывать 4D результаты. Когда анимированный результат визуально достаточно близок к результату симуляции, его нередко так и называют; в любом случае, во избежание ошибочной трактовки результатов необходимо ясно указывать используемые для визуализации данные и методы.

Небольшой список полезных советов от опытных аниматоров, которые помогут улучшить и упростить работу с анимацией.

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

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

Когда мы работаем с коллекциями и их отображением, перед многими из нас часто
встает выбор между ViewPager (теперь ещё и ViewPager2) и RecyclerView. Эти
компоненты похожи друг на друга по области применения, но серьезно отличаются
интерфейсом и реализацией. Начиная с support library 24.2.0 границы между
данными компонентами стали ещё более размытыми, т.к. появился вспомогательный
класс SnapHelper для автоматического доведения сhildView до
определенного положения на экране, и без устаревшего ViewPager стало проще
обходиться. С недавним релизом ViewPager2, казалось бы, о старом ViewPager и о
практиках его имитации вообще можно забыть (ViewPager2 — это по сути
RecyclerView с дополнительными вспомогательными классами, он позволяет
практически идентично повторить поведение ViewPager и сохраняет совместимость со
старым api).

Так ли это на самом деле? Лично для меня всё оказалось не так просто. Во-первых,
в классическом RecyclerView отсутствует интерфейс PageTransformer для
анимирования сhildView в зависимости от позиции (далее по тексту используется
понятие «позиционная анимация»). Во-вторых, неприятными сюрпризами долгожданного
ViewPager2 оказались модификатор класса final, который ставит крест на
переопределении метода onInterceptTouchEvent (компонент мало пригоден для
вложения горизонтальных списков в вертикальные), и приватность поля
recyclerView.

Итак, столкнувшись в очередной раз с трудностями позиционной анимации при
отображении коллекций с помощью RecyclerView и поковырявшись в ViewPager2 и
MotionLayout, я подумал, что позаимствовать принцип работы
ViewPager.PageTransformer для классической реализации RecyclerView а-ля
ViewPager2 не самая плохая идея.

Привет, Хабр! Представляю вашему вниманию перевод статьи «5 Reasons Motion Graphics Help You Connect With People» автора Katy French.



Оригинал статьи: Katy French | Перевод статьи сделал моушн дизайнер Игорь Царёв

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

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

Хорошо, но что такое моушн дизайн?

Касательного этого формата может возникнуть некоторая путаница. Это что, видео? Это что, мультики? В основном, моушн дизайн – это термин нашей индустрии для анимированного видео. Это могут быть 2D-анимации, 3D-рендеринги или GIF-файлы.

Перед одной из команд — создателей магического шоу мирового уровня — компанией Клипс Медиа Групп была поставлена задача создать больших аватаров, которые бы повторяли движения актеров на сцене. Для этого нужно было заснять движения актеров (или по-другому замокапить – от англ. — motion capture), как это делают в фильмах, и далее передать аниматору, который нарисует 3D персонажей и заставит их повторять движениях актеров. В этой давно известной и, казалось бы, понятной задаче было одно НО, и это – условия в которых должен был осуществляться захват движений… Только представьте: Ночь. Съемочный павильон.

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

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

Я уже представляю толпы людей, которые закидают меня тапками, ведь и так понятно “менеджер зло”, “убийца креатива” и вообще ненужное звено в процессе… Но это статья о том, как менялось мое воспринимание менеджерского состава на проекте, как я учился различать “свой-чужой” и главное, как я дорос до понимания роли Project manager.

«Тогда-то мы и заметили это впервые, на примере Вуди».

«Ларри Катлер зашёл в каталог и как раз говорил об установке исправления для Вуди или его шляпы. Он посмотрел в каталог, и там было около 40 файлов, потом заглянул ещё раз, а там осталось всего четыре».

«Затем мы увидели, что начали пропадать последовательности кадров, и подумали: „Боже мой!“»

«Я схватил телефонную трубку… „отключайте машину!“»

Так Орен Джейкоб, бывший главный технический директор Pixar, тогда работавший помощником технического директора Toy Story 2, вспоминает момент, когда они обнаружили, что фильм удаляется с серверов компании после выполнения ошибочной команды, уничтожая два месяца и сотни человеко-часов работы.

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

Мне нравился стиль статей и иллюстраций старых номеров журналов, и хоть я не художник и не аниматор, а любитель-программист, лет десять назад я попробовал сделать схематический мультик о необыкновенной девочке по загадке из раздела "Квант для младших школьников":

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

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

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

Вау-эффекта в играх можно достигнуть не только неожиданными механиками или плоттвистом, но и анимацией — в мобильных проектах на последнем часто делается особый акцент. Поэтому решил поделиться интересным переводом материала по 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.