В этом уроке я опишу, как сделать анимированный фон для аватара.

Откуда взялся робот, можно посмотреть в этом уроке: как сделать рамку аватарке

А как пользоваться анимацией, читаем здесь: Анимация.

Итак, мы имеем вот такого робота на сером фоне:


Но было бы неплохо добавить «жизни» бедолаге. Как это сделать? Не знаю, учили ли вы в школе физику или тоже прогуливали её, как и я, но именно там можно было узнать, что видимость движения может быть «двух видов». Первое – движется сам объект (при этом всё, что его окружает, стоит и не двигается). Второе – объект не двигается, но в движении всё, что вокруг. Самый яркий пример – сядьте в автобус, и посмотрите на «соседа». Вам будет казаться, что он не движется, а в движении то, что за окном позади него. Но мы, то знаем, что происходит на самом деле.

В моём случае робот – «главный герой», а героям драпать с «поля боя» не положено. Вывод? Анимацию нужно делать на окружение.

Начну с самого простого – «земля». Я сделал вот такую вот «плиту».


Для тех, кто сам не догадался как, подсказываю Rounded Rectangle Tool + Blending Options + Transformation. Но вообще можно поступить ещё проще. Песок, да да именно песок. Фильтр Noise творит чудеса.

Но раз уж мне не было лень делать эту плитку, то и описание я остановлю на ней. Следующим что я сделал, это размножил её (Ctrl+J) и выставил в ряд.

Чтобы было ясно, какая на самом деле длина полученной «ленты» я включил трансформацию объекта:


Это сделано специально, чтобы не задумываться потом о том «а хватит ли длины подвинуть её?».
Зачем задаваться этим вопросом, видно будет далее.

Если отмерить ширину одной плиты получается 18 пикселей.


Что это мне даёт, а даёт это мне следующее. Я хочу сделать анимацию в 6 кадров (это не принципиально, просто мне так захотелось). Делим 18 на 6, получаем 3 (Математику в школе я не прогуливал). Итого в каждом кадре моя плитка будет двигаться со скоростью 3 пикселя. Вы спросите для чего тогда такая длинная дорожка, если всего, лишь 3 пикселя (и двинется в итоге на одну полосу), а для того, чтобы в случае если мне захотелось двинуть побольше – я не задавался больше этим вопросом.

В уроке по анимации (2-м пунктом – это в самом низу) идёт описание того что я сделал. А пока, вуаля:


Краткий обзор, чтоже я такого сделал… Назову это «бесконечное движение» или «движение по бесконечности». Можно ещё назвать кольцевым движением. В прочем как не назови - принцип действия прост второй кадр идёт за первым, третий за вторым, четвёртый за третьим, пятый за четвёртым, шестой за пятым, а первый за шестым и заново.


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

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


Вариантов здесь несколько можно вспомнить геометрию, а именно что в окружности 360 градусов. Поделить это на 6 и получить поворот колёс на 60 градусов в кадр. Но т.к. геометрию я тоже прогуливал, то вспоминать я об этом не буду. Хотя причина кроется в другом. Колёса слишком маленькие поэтому достаточно их будет повернуть один раз на 180 градусов.

Таким образом, что я сделал? Продублировал слой с колёсами, выделил каждое колесо и повернул его на 180 градусов (нет, ну кому делать нечего могут извращаться и трансформировать на 60). А потом включил кадр с трансформированными колёсами на каждый чётный.


Что в итоге выйдет вот в такую картинку:


Могу согласиться, что анимация на этой аватарке «не фонтан», однако смею заметить, она логически оправдана, да и потом скорей всего у этого урока будет продолжение. Итак, вон, сколько написал, дайте передохнуть…

Оригинал статьи здесь: как анимировать фон аватару