О библиотеке LottieFiles многие знают, но пробовать на практике не спешат. Статей на эту тему мало, поэтому я решила поделиться своим опытом создания анимации для мобильных приложений с помощью Lottie.
Рубрика «Компьютерная анимация»
Анимация в мобильных приложениях: тестируем Lottie
2019-05-13 в 16:08, admin, рубрики: android, iOS, lottie, lottiefiles, анимация в приложениях, библиотеки, дизайн мобильных приложений, интерфейсы, Компьютерная анимация, мобильные приложенияВсе об SVG анимации
2019-05-07 в 19:22, admin, рубрики: adobe illustrator, animation, css, SMIL, svg, анимация, векторная графика, Компьютерная анимация, морфинг, Работа с векторной графикойВ данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимация (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.
Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.
Читать полностью »
«Галоп пикселя — часть пятая» — Анимация персонажей. Ходьба
2019-03-25 в 19:34, admin, рубрики: animation, example, Gamedev, gamedevelopment, indiedev, lesson, photoshop, pixel-art, pixelart, sample, tutorial, weilard, Компьютерная анимация, обработка изображений, разработка игр
«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)
Доброго времени суток Хабр. Мы продолжаем цикл «Галоп Пикселя». Сейчас, находясь на старте 2019 года, можно с уверенностью говорить, что это не только цикл статей, но и многолетняя сага. Пространное повествование о пикселях, их жизни, способе их создания, приёмах и уловках в работе с ними. Мы не будем рассуждать о причинах первоначального «спринта», который затем превратился в многолетний марафон, ибо нет ничего более жизненного, чем сама жизнь. Кому нужны причины отсутствия или пауз, если можно просто вернуться к тому, что мы делали, в чём варились, и в чём, даст бог — будем наблюдаться и далее. В пикселях, конечно же!
Сегодняшняя публикация станет очередной, и возможно даже поворотной вехой в нашем повествовании. Наконец-то мы подошли к созданию полноценной анимации персонажей. Двумя предыдущими главами мы охватили анимацию света и тени, а также анимацию неподвижных персонажей (idle-animation) без ярко выраженных действий. Но сегодня наши персонажи пойдут, а в следующей части даже побегут, завоевав то, что уже давно их по праву рождения. Ещё один плодородный регион. И пройдут ещё одну точку, которая ознаменует окончание базового цикла. Наши пиксели наконец-то станут живыми.
В виду большого размера этой части мы разобьем её на два этапа. Пятую и шестую главы «галопа». Всё будет происходить как обычно, с той лишь разницей, что шестую главу вам не придётся ждать ещё год или два. Всё что ей нужно, немного выстояться. Ей стоять, нам копать — за лопаты.
Details
2019-03-14 в 12:57, admin, рубрики: animation, details, javascript, webdevelopment, Компьютерная анимация, Программирование, Разработка веб-сайтовHow often do you get to 404 pages? Usually, they are not styled and stay default. Recently I’ve found test.do.am which interactive character attracts attention and livens up the error page.
Probably, there was just a cat picture, then they thought up eyes movement and developer implemented the idea.
Now user visits the page and checks out the effect. It’s cool and pleasant small feature, it catches, then user discusses it with colleagues or friends and even repeats the feature. It could be this easy, if not: Читать полностью »
Wired – анимационный фильм из нескольких сцен, нарисованный и анимированный в VR
2019-02-23 в 9:00, admin, рубрики: AR и VR, Wired, анимация, Компьютерная анимация, короткометражный мультфильмЭту четырёхминутную короткометражку сделал студент из Нью-Йорка
Анимационные фильмы, созданные при помощи шлема VR, не являются особой новинкой. Но большинство из них – это отдельные сцены, зацикленные в повторяющуюся петлю типа анимированного GIF. Возможно, там двигается камера, выхватывает какие-то детали, но как таковой истории там нет. Но мультфильм Wired – это дело другое. Это один из первых анимационных фильмов, созданных в VR, содержащий несколько сцен и выраженную историю. Эта прекрасная короткометражка показывает жизнь мальчика, изучающего мир без беспроводных технологий. Он падает с кабеля, натянутого над огромными небоскрёбами, что заставляет местных жителей взглянуть вверх и насладиться небом.
Читать полностью »
Что такое качественная idle-анимация? Разработчики делятся своими любимыми примерами
2019-02-05 в 4:28, admin, рубрики: earthworm jim, Street Fighter, super metroid, анимации, Дизайн игр, Игры и игровые приставки, Компьютерная анимация, ретроконсоли, старые игры
Создание связи игрока с персонажем, раскрытие подробностей его личности, чтобы он был для игрока уникальным — сложная задача, и как решить её всего несколькими простыми движениями?
Анимации ожидания (Idle animations), эти небольшие всплески движения, когда игрок ненадолго оставляет игру без внимания, очень легко обойти вниманием. Но при хорошей реализации они становятся важнейшим способом передачи тонких (или не совсем тонких) нюансов персонажей и атмосферы игры.
Поэтому сайт Gamasutra опросил множество разработчиков из игровой индустрии, чтобы узнать, какие idle-анимации им нравятся больше всего и что именно есть в них притягательного.
Хотя очень немногие разработчики пришли к общему мнению о том, в каких играх есть наиболее запомнившиеся или интересные анимации ожидания (за исключением Earthworm Jim, которого, очевидно, любят все), они объяснили, почему из-за таких анимаций персонажи кажутся живыми, всего несколькими кадрами придавая своим мирам реалистичности.
Читать полностью »
Красивая и познавательная анимация: случаи кругового движения и колебаний
2018-12-23 в 18:59, admin, рубрики: canvas, javascript, колебания, Компьютерная анимация, орбита, спирограф, фигуры Лиссажу, физикаЗдравствуйте.
В своей предыдущей статье я рассказывал, как я делал анимацию планет Солнечной системы для своего сына. Спасибо всем за оставленные там отзывы и «теплый» прием. Сегодня я подготовил еще несколько интересных анимаций, условно объединенных под тему «круговое движение и колебания». Другими словами, то, что описывается с помощью косинусов и синусов.
Для отрисовки я использовал javascript и canvas. Для каждого примера дана ссылка, где вы можете всё внимательно посмотреть. Можно заглядывать в исходный код, можно копировать себе — я не буду возражать. Материал вполне может пригодиться на занятиях и факультативах по физике, математике или информатике.
Итак, поехали.
Читать полностью »
Nvidia сошла с ума и открывает PhysX под BSD-3
2018-12-03 в 22:43, admin, рубрики: physx, высокая производительность, Компьютерная анимация, машинное обучение, разработка игр, робототехникаNVIDIA PhysX, самый популярный в мире движок физической симуляции, отправляется в опенсорс.
Мы делаем это потому, что симуляция физики — ключ к развитию игр и развлечений с высокой степенью погружения — оказалась намного более важной областью, чем мы когда-либо предполагали.
Симуляция физики — это область, где вместе сошлись искусственный интеллект, робототехника и компьютерное зрение, самоуправляемые автомобили и высокопроизводительные вычисления.
Как я делал анимации Солнечной системы для сына-второклассника
2018-11-11 в 10:35, admin, рубрики: javascript, svg, анимация, астероиды, астрономия, кометы, Компьютерная анимация, космос, планеты, Солнечная система, физикаКогда-то давно я получил высшее образование по физике. Позже еще самостоятельно выучился на веб-программиста. С тех пор я преимущественно работаю программистом, но продолжаю уделять время и физике, и технике (что-нибудь рассчитываю или конструирую), и науке в целом. Подобное «раздвоение» приносит интересные результаты. Оказалось, что некоторые факты в физике можно хорошо объяснить с помощью программирования.
Откуда вообще возник такой вопрос? У старшего ребенка в школе было занятие про планеты Солнечной системы. В целом, он их знает, и на вечернем небе мы видели некоторые (Юпитер, Марс, Сатурн). Но многие интересные факты остаются за пределами понимания. Не хватает наглядности, движения, может быть, интерактивности. Вот именно этот пробел в подаче материала я и захотел заполнить с помощью веб-программирования, следуя известной мудрости «лучше один раз увидеть, чем сто раз услышать».
Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.
Читать полностью »
Анимации для игры, грабли, шишки, костыли — Unity 3D, Anima 2D, Dragon bones, Spine
2018-10-23 в 17:10, admin, рубрики: Дизайн игр, Компьютерная анимация, разработка игрДисклеймер
Материал посвящен тем кто разрабатывает игры, хочет начать это делать, начинающим аниматорам, художникам и всем кто работает с Unity 3d.
Я приветствую объективную критику, я пришел сюда не учить, а учиться и буду рад подсказкам и советам от более опытных людей.
Начало работы с Unity
Итак, ты придумал игру, идею и упаковал ее адекватно(99% начинающих этого не делают), разработал игровые механики, формулы, задатки сюжета, разработал увлекательный геймплей, что дальше?
А дальше идет выбор — 2D или 3D проект. Конечно это должно быть сделано на этапе идеи, но бывают ситуации, когда после геймплейного прототипа появляются варианты и выбор. И это, черт возьми, самое ужасное что может случится, очевидно же 2D — проще для начинающих. Тут кроется вся боль и сама суть дальнейших страданий.
Читать полностью »