От автора: в одной из статей я рассказывал про функцию steps() в CSS анимации и показал простенький пример ее применения (перемещение секундной стрелки в часах). Подобную технику можно применить и к более сложной адаптивной анимации, к примеру, для создания мультика с зацикленным идущим человечком.
Стэк
В обычной мультипликационной анимации эффект движения создается путем быстрого показа серии последовательных рисунков. В процессе проектирования и создания рисунки складываются в стопку, как в луковице, что позволяет художнику быстро их сравнивать. То же самое можно сделать, расположив рисунки на разных слоях в современной графическом редакторе наподобие Adobe Illustrator, как на рисунке 1:
Рисунок 1: Сложенные в стопку рисунки
Обратите внимание, что в процессе анимации двигаются все части рисунка: к примеру, голова человечка покачивается слегка вверх и вниз, придавая движения рисунку.
Я экспортирую рисунки в SVG, чтобы воспользоваться преимуществом данного формата (конечный размер оптимизированного файла чуть больше 13Кб) – низким весом файла. Подобную технику можно использовать и с растровыми изображениями.
Ходьба
Немного изменим метод: отдельные рисунки расположим горизонтально наподобие пленки диафильма, рисунок 2:
Рисунок 2: Рисунки расположены в одинаковые кадры
Последовательность не изменилась, только теперь рисунки читаются слева направо.
Чтобы расположить рисунки горизонтально в Illustrator необходимо выбрать все объекты на слоях и выполнить Object / Transform / Move. Значения увеличиваются и должны быть кратны значению исходной ширины холста.
Холст расширится для расположения всех рисунков в горизонтальном направлении. Каждый кадр занимает 250 х 320 пикселей.
Шаг
Наша следующая задача – быстро последовательно двигать изображения, как на пленке фильма. В идеале нужно анимировать viewBox и перемещать его от кадра к кадру, но, к сожалению, пока что мы не можем делать этого с помощью CSS. Поэтому мы создадим контейнер с соотношением сторон одного из рисунков, добавим в него пустой блок, к которому применим SVG с помощью свойства background-image:
|
1 2 3 |
<div id="walk-container"> <div></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#walk-container { display: inline-block; position: relative; width: 20%; padding-bottom: 30%; vertical-align: middle; } #walk-container > div { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(walk-sequence.svg); background-repeat: no-repeat; } |
Так вышло, что техника контейнер в контейнере так же подходит для создания адаптивного SVG в IE9 — 11. По умолчанию внутри контейнера будет видна вся SVG пленка. Необходимо увеличить изображение, чтобы в рамку влезал только один кадр. Нужное нам значение – количество кадров, умноженное на 100 и выраженное в процентах:
|
1 2 3 |
#walk-container > div { background-size: 800%; } |
Теперь необходимо двигать пленку внутри ограниченного пространства #walk-container. Т.е. нам нужно двигаться к концу пленки, это можно сделать с помощью CSS keyframe анимации путем изменения позиции фонового рисунка:
|
1 2 3 |
@keyframes walkanim { to { background-position: 100% 0; } } |
Запустить анимацию можно с помощью:
|
1 2 3 |
#walk-container > div { animation: walkanim 2s infinite; } |
Результат слегка не тот, что мы хотели. Пленка двигается внутри контейнера.
Ходьба на месте
Нам необходимо добиться мгновенной анимации между кадрами. Для этого нам потребуется разбить анимацию на отдельные шаги. Т.е. каждый кадр будет показываться только один раз без плавных переходов между кадрами. Вызов нашей анимации выше нужно изменить:
|
1 2 3 |
#walk-container > div { animation: walkanim 1.4s infinite steps(7); } |
Обратите внимание, что количество шагов меньше количества кадров. Длительность анимации зависит от количества кадров в пленке, с ней придется поэкспериментировать.
Идем дальше
На данный момент у нас фигурка, марширующая на месте. Придать ощущения движения можно, если перемещать фон вместе с персонажем – представьте себе обычный субботний утренний мультик – но в нашем случае нам необходимо, чтобы персонаж шел от левого края до правого по всей ширине экрана. Для этого нам нужно совместить нашу анимацию с другой техникой. Новая анимацию с помощью свойства translate будет изменять внешний контейнер в процентах:
|
1 2 3 4 |
@keyframes stroll { from { transform: translateX(-100%); } to { transform: translateX(500%); } } |
Время трансформации будет зависеть от того, как вы хотите анимировать рисунок: очень быстро – тогда будет казаться, что рисунки двигаются с ураганной скоростью, или слишком медленно – тогда будет казаться, что ноги человечка прилипают к полу, как ко льду.
|
1 2 3 |
#walk-container { animation: stroll 60s linear infinite; } |
Я не хотел, чтобы наш человечек дергался в начале анимации или наоборот замедлялся в конце, поэтому я использовал линейную easing функцию анимации.
Заключение
Как только вы поймете принцип работы данного метода, вы сможете использовать для создания самой разнообразной сложной анимации на веб-страницах. Об этом я расскажу в следующих статьях.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
