Наверное, каждый пользователи в интернете сталкивался с картинками, которые меняются (или лучше сказать проигрываются, как видео файл). Такие картинки называют анимацией. Представляют они из себя файл gif, в котором сжаты поочередно проигрываемые кадры картинки (с определенным интервалом по времени).
Чтобы создавать такие файлы нужно иметь пару-тройку программ, немного свободного времени и желание. В этой статье я бы хотел подробно рассказать, как можно создавать такие анимации. Учитывая количество вопросов по работе с картинками, думаю, данный материал будет актуален.
Программы для создания gif анимаций
1) UnFREEz
Очень простая программа (наверное самая простая), в которой есть всего лишь несколько опций: задать файлы для создания анимации и указать время между кадрами. Несмотря на это, пользуется популярностью среди пользователей — ведь далеко не всем нужно все остальное, а анимацию в ней создать легко и быстро!
2) QGifer
Простая и функциональная программа для создания gif анимаций из различных видео-файлов (например, из avi, mpg, mp 4 и др.). Кстати, она бесплатна и полностью поддерживает русский язык (это уже что-то).
Как я делаю анимации, моё рабочее место (Анимация)
Кстати, именно в ней показан пример в данной статье, как создавать небольшие анимации из видео файлов.
Главное окно программы QGifer.
3) Easy GIF Animator
Эта программа одна из лучших для работы с анимацией. Она не только позволяет легко и быстро создавать анимации, но еще и редактировать их! Правда, чтобы воспользоваться всеми возможностями программы, придется ее купить…
Кстати, что более всего удобно в этой программе — это наличие мастеров, которые быстро и по шагам помогут вам выполнить любую из работ с gif файлами.
4) GIF Movie Gear
Эта программа позволяет создавать полноценные анимированые gif файлы, уменьшать и оптимизировать их размер. К тому же в ней можно легко создавать анимированные баннеры стандартных размеров.
Достаточно простая и имеет интуитивно понятный интерфейс, позволяющий быстро выполнять работу, даже начинающему пользователю.
Программа позволяет открывать и использовать в качестве кадров для создаваемой анимации файлы следующих типов: GIF, AVI, BMP, JPEG, PNG, PSD.
Может работать со значками (ICO), курсорами (CUR) и анимированными курсорами (ANI).
Как создать gif анимацию из фото и картинок
Рассмотрим по шагам, как это делается.
1) Подготовка картинок
В первую очередь, нужно заранее подготовить фото и картинки для работы, причем, в формате gif (когда в любой программе выбираете опцию « Сохранить как…. » — вам предлагается на выбор несколько форматов — выбирайте gif).
Лично я предпочитаю подготавливать фотографии в программе Adobe Photoshop (в принципе, можете использовать любой другой редактор, например бесплатный Gimp).
Подготовка картинок в Adobe Photoshop.
Важно отметить:
— все файлы картинок для дальнейшей работы должны быть в одном формате — gif;
Как Сделать Анимацию? (делюсь опытом)
— файлы картинок должны быть одного разрешения (например 140х120, как в моем примере);
— файлы нужно переименовать так, чтобы их порядок был такой, какой вам нужен при их анимации (проигрывании по порядку). Самый простой вариант: переименовать файлы на: 1, 2, 3, 4 и т.д.
10 картинок gif в одном формате и одного разрешения. Обратите внимание на имена файлов.
2) Создание анимации
В этом примере я покажу как сделать анимацию в одной из самых простых программ — UnFREEz (о ней чуть выше в статье).
2.1) Запустите программу и откройте папку с подготовленными картинками. Затем выделите те картинки, которые вы хотите использовать в анимации и перенесите их при помощи мышки в окно Frames программы UnFREEz.
2.2) Далее укажите время в мили-секундах, которое должно быть между кадрами. В принципе, можно поэкспериментировать, создавая несколько gif анимаций с разной скоростью проигрывания.
Затем нажмите кнопку создания — Make Animated GIF .
3) Сохранение результата
Осталось только задать имя файла и сохранить полученный файл. Кстати, если скорость проигрывания картинок вас не устраивает — то повторите шаги 1-3 заново, только укажите другое время в настройках UnFREEz.
Вот так сравнительно быстро можно создавать gif анимации из различных фотографий и картинок. Можно, конечно, было бы использовать более мощные программы, но для большинства этого будет предостаточно (по крайней мере я так думаю, мне точно хватает….).
Далее рассмотрим более интересную задачу: создания анимации из видео файла.
Как создать gif анимацию из видео
В примере ниже я покажу как сделать анимацию в популярной (и бесплатной) программе QGifer. Кстати, для просмотра и работы с видео файлами, вам возможно понадобятся кодеки — можете что-нибудь выбрать из этой статьи: https://pcpro100.info/luchshie-kodeki-dlya-video-i-audio-na-windows-7-8/
Рассмотрим, как обычно, по шагам…
1) Запускаем программу и жмем кнопку открыть видео (или сочетание клавиш Ctrl+Shift+V).
2) Далее нужно задать место начала и конца вашей анимации. Делается это просто: при помощи кнопок просмотра и пропуска кадра (красные стрелки на скриншоте ниже) находите начало своей будущей анимации. Когда начало найдено, щелкните на кнопке фиксаторе (помечена зеленым цветом).
3) Теперь просмотрите (или отмотайте кадры) до конца — до того момента, на котором ваша анимация закончиться.
Когда конец нашли — нажмите на кнопку фиксирования конца анимации (зеленая стрелка на скрине ниже). Кстати, учтите, что анимация будет порядочно занимать места — например, ролик на 5-10 сек займет несколько мегабайт (3-10МБ, зависит от настроек и качества, которое вы выберите. Для большинства пользователей подойдут параметры по умолчанию, поэтому я на их настройке в данной статье и не буду останавливаться).
4) Нажимаете на кнопку извлечения gif из заданного отрывка видео.
5) Программа обработает ролик, по времени — примерно один к одному (т.е. 10 сек. отрывка из вашего видео будут обрабатываться около 10 сек.).
6) Далее откроется окно для окончательного задания параметров файла. Можно пропустить часть кадров, просмотреть, как он будет выглядеть и пр. Рекомендую включить пропуск кадров (2 кадра, как на скриншоте ниже) и нажать кнопку сохранения.
7) Важно отметить, что программа иногда выдает ошибку сохранения файла, если в пути и названии файла будут русские символы. Именно поэтому, рекомендую файл назвать латиницей, и обратить внимание на то, куда вы его сохраняете.
Результаты:
Анимация из знаменитого фильма «Бриллиантовая рука».
Кстати , анимацию из видео можно создать и другим образом: открыть видео в каком нибудь проигрывателе, наделать скриншотов из него (почти все современные проигрыватели поддерживают захват кадров и создание скриншотов), а далее создать из этих фото анимацию, как рассказано в первой части данной статьи).
Захват кадра в плеере PotPlayer.
PS
На этом все. А как вы создаете анимации? Может есть способы еще более быстрого «анимирования»?! Удачи!
Источник: pcpro100.info
Всё о веб-анимациях в 2022
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.
Даже совершенно обычный сайт можно оживить анимацией:
Анимации делают работу с сайтом удобной и приятной. Например, когда пользователь совершает действие, ему можно показать какие-то изменения на странице, как здесь:
Автор — Аарон Икер, источник: dribbble.com
Анимированные страницы сглаживают переход между разными состояниями элементов интерфейса и создают эффект непрерывности происходящего. А необычный предварительный загрузчик увлекает посетителя на время загрузки страницы и снижает показатель отказов.
Способы создания анимаций
Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций:
- CSS-анимации,
- SVG-анимации,
- JavaScript-анимации.
CSS-анимации
Это самый простой способ анимировать объекты на странице. Он позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия.
CSS-анимации создают с помощью группы свойств animation . Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики:
- animation-name — имя анимации, можно задавать несколько имён через запятую;
- animation-direction — направление анимации;
- animation-fill-mode — состояние элемента до и после анимации;
- animation-play-state — управление состоянием: запуск или приостановка анимации;
- animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
- animation-delay — задержка начала выполнения анимации;
- animation-iteration-count — количество повторов анимации;
- animation-duration — длительность.
С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.
Автор — Дилан Бауманн, посмотреть на CodePen.
CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:
Создавать CSS-анимации можно и с помощью свойства transition. Но оно работает только при загрузке страницы, добавлении классов или изменении состояния, к примеру, hover .
Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.
CSS-анимации можно запускать при загрузке страницы или при определённом действии, но для этого иногда нужен JavaScript. Например, чтобы при открытии меню на мобильном кнопка бургера превращалась в крестик, нужно добавить ей соответствующий класс с помощью JS и для этого класса прописать изменения CSS-свойств.
Автор — Бенджамин Симье, посмотреть на CodePen.
С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:
Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.
SVG-анимации
Внутри SVG есть отдельный способ анимаций — SMIL. Это спецификация для анимаций, действующая только внутри векторной графики. В ней определяется набор новых тегов и их атрибутов, которые обеспечивают работу с частями SVG.
SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:
Или когда нужно заставить элемент двигаться по заданному пути:
А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:
JavaScript-анимации
Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.
Автор — Джереми Кэрис, посмотреть на CodePen.
Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.
Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».
Как оптимизировать анимации на сайте?
Чем больше анимаций на сайте, тем больше информации приходится обрабатывать браузеру. И чем сложнее анимации, тем медленнее отрисовывается страница. Поэтому важно выбирать правильные способы анимирования и не усложнять их. Например, если нужно просто вращать элемент вокруг своей оси, то лучше использовать animate и transform , а не подключать JS-библиотеку.
Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .
Таких тонкостей у анимаций много. Нужно их обязательно соблюдать, чтобы не превратить сайт в медленно работающего «монстра», от которого «убегают» пользователи.
Как создать простую анимацию?
Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет спецификация, переведённая на русский язык.
Попробуем вместе сделать простую анимацию — прыгающий мячик.
Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.
Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.
.ball < font-size: .9px; width: 60em; height: 60em; border-radius: 50%; position: relative; >.ball-bg < width: 100%; height: 100%; background: url(http://guthriesports.files.wordpress.com/2010/03/soccer_ball_6.jpg) no-repeat center; >
Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.
Теперь усложним анимацию: сделаем так, чтобы мяч прыгал. Для этого используем свойство transform и его значения:
- translate — для перемещения горизонтально и вертикально;
- scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
- rotate — придать дополнительное вращение при ударах.
У этой анимации будет больше ключевых кадров, потому что мы постараемся максимально подробно описать поведение мяча. Начнём с первого и последнего кадра. Потом добавим кадры, когда мяч должен ударяться об пол. Можно помочь себе и нарисовать с помощью CSS линию, чтобы видеть, обо что ударился мяч. При ударе об пол используем scale , чтобы сжать мяч.
Так как на следующих шагах scale не будет, мяч вернётся к исходным размерам.
Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.
.ball
Добавим промежуточные пункты, чтобы анимация смотрелась более правдоподобно. Получаем результат:
Итоги
Анимации помогают удивить пользователя и подсказать, как работать с вашим сайтом. Они также выделяют вас среди конкурентов: анимированные сайты легче запоминаются, на них хочется возвращаться вновь. При этом технические возможности для реализации любых анимаций сейчас на пике, потому что устройства стали производительнее и появилось множество специальных библиотек.
Однако анимации могут и отталкивать посетителей, если они замедляют загрузку страниц. Поэтому важно оптимизировать их и выбирать правильные способы анимации. Это пригодится почти любому фронтендеру, а научиться этому (и всему, что связано с анимациями) можно на курсе по анимациям от HTML Academy.
Источник: habr.com
Как сделать meme анимацию?
Все чаще и чаще на просторах Ютуба можно заметить видеоролики длиной 0,5-2 минуты, называемые meme. Художник, взявшийся за рисование меме, делает анимацию под определенную музыку. Зачастую он использует своего оригинального персонажа (ОС), с помощью графического планшета (или, порой, мышки) заставляет его двигаться.
Что такое meme animation? Прежде всего, meme — это анимации, нарисованные в графических редакторах (Paint Tool Sai, Photoshop, TV Paint, Adobe Animate CC и другие), под ритм какой-либо музыки. Это стало набирать обороты в популярности ближе к 2017 году, когда практически везде хоть кто-то да раз слышал о таком.
Но как же выглядят все эти ролики и для чего делаются?
Чтобы ответить на данный вопрос, стоит лишь разок глянуть на них. Как начинает «расти» мем? Для начала, один из художников делает оригинальную работу, добавляя к названию ролика «meme», а остальные перерисовывают её на свой манер. Правда, большинство таких просто берут основу и, не меняя ее, анимируют со своим персонажем (OC).
К примеру, можно взять подобный meme:
FireAlpaca
Эта программа похожа на прошлую своим функционалом. Её редко используют, но она заслуживает внимания.
Плюсы:
-наличие эффекта кальки (сверху кнопка «вид», а после «режим кальки»)
-автовоспроизведение покадровой анимации (тоже в меню «вид»)
Минусы:
-малое количество кистей
-отставание линии (в старых версиях)
-отсутствие векторного слоя
TVPaint
Программа, похожая на Adobe Flash, но к ней легче привыкнуть.
Плюсы:
-быстрое освоение
-покадровая анимация
-простой функционал
-добавление звуковой дорожки
Минусы:
-проблемы с экспортом (неправильно настроишь — изменится цвет)
-сдвиг картинки
Adobe Animate CC
Плюсы:
-огромный функционал
-покадровая и костяная анимация
Минусы
-платная версия
-ОГРОМНЫЙ ФУНКЦИОНАЛ
И, конечно, не обойдется без программ для монтажа:
Sony Vegas Pro 13
Одна из популярнейших программ, помогающая не только художникам, но и всем тем, кто хоть как-то связан с обработкой видеороликов.
Camtasia Studio 9.
Эта программа намного проще предыдущей, да и в ней есть все то, что понадобится для монтажа.
Виды анимации.
Так называемые меме анимации делятся на три категории:
-Флеш или костяная анимация
-Аниматик (animatic) или слайд-шоу.
А теперь стоит рассмотреть каждый вид.