{"id":3975,"url":"\/distributions\/3975\/click?bit=1&hash=7a51e809b58a86b7ea96667de949aaf9244193fd91029f3a3a1c980f40244631","title":"\u0410\u0439\u0442\u0438 \u0432 \u0430\u0442\u043e\u043c\u043d\u043e\u0439 \u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0435 \u2014 \u044d\u0442\u043e \u0441\u043a\u0443\u0447\u043d\u043e. \u041c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","buttonText":"\u0412\u044b\u044f\u0441\u043d\u0438\u0442\u044c","imageUuid":"c22764b5-e280-52b2-a6db-af308d4d1709","isPaidAndBannersEnabled":false}

Как сделать плавную анимацию для абстрактного персонажа — краткое описание техники Статьи редакции

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

Пользователь Reddit под ником Sid Fish Games опубликовал короткое видео, в котором показал, как сделать плавную анимацию передвижения персонажей. Разработчик применил эту технику в собственном пошаговом проекте, в котором пространство поделено на ячейки.

Полное видео

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

Слева изначальный вариант, справа — финальный

Первый шаг — скопируйте начальный кадр анимации и откройте его в бесплатном графическом редакторе paint.net.

Примените к изображению эффект motion blur — размытие в движении
Поместите размытое изображение между начальным и конечным кадрами
Скопируйте первый кадр анимации и немного «сожмите» персонажа — уменьшите его длину, но увеличьте высоту
Также «сожмите» его лицо: это нужно для того, чтобы движение выглядело правдоподобным

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

Процесс создания частиц пыли
Финальная анимация
0
16 комментариев
Написать комментарий...
Андрей Торчинский

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

Ответить
Развернуть ветку
Александр Ткаченко

Гораздо полезнее! И что ещё лучше, доклад менее привязан к какой-либо частной ситуации. А пост достаточно странноватый и скупой для "туториала")

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Александр Ткаченко

Ничего не говорю про плохость, норм) Просто по одному из принципов анимации, здесь как-то преувеличен объём поста по сравнению с самим материалом) Думал, что здесь скрывается чего-то большее, а одной первой гифки может хватить)

Ответить
Развернуть ветку
Конь Геннадий

Я на всякий случай поделюсь данным видосом, так как для меня оказалось большой новостью, что многие мои друзья занимающиеся артом его не видели, а он очень интересный, даже банально для расширения кругозора:

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Mac Worm

Растягивать объект и его детали (например глаза-точки сделать линиями) по направлению движения. Например, как на гифке ниже, в частности движение копья.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
SoulRiets

Добавил в закладки ( ͡° ͜ʖ ͡°)

Ответить
Развернуть ветку
Vitaliy Bakal

Зачем было открывать aseprite, если тут просто добавили моушн блур и пыль, которые в 90% случаев делают програмно?

Ответить
Развернуть ветку
PiRaNiA koghs

Уу, Р*ддит.

Ответить
Развернуть ветку
Читать все 16 комментариев
null