Как сделать классную анимацию
10 программ для создания крутой анимации
С этими утилитами сделать собственный мультфильм не так сложно, как кажется.
1. Moho
Один из лучших профильных инструментов для работы с векторной 2D-анимацией и мультипликацией. Moho позволяет рисовать на графическом планшете, делать раскадровки и послойно обрабатывать объекты во встроенном графическом редакторе. Утилита имеет библиотеку визуальных объектов и персонажей, обеспечивает реалистичную физику, а также интегрирована с движком Unity.
2. Adobe Animate
Мощная программа для веб-дизайна из пакета Adobe, которая позволяет создавать векторную графику и анимацию. С Animate одинаково легко как обработать готовое изображение, так и нарисовать с нуля. Приложение поддерживает наложение звука, 3D-модели, скрипты ActionScripts и, конечно, интеграцию с другими продуктами Adobe. После экспорта контент можно использовать на сайтах, в онлайн-видео или играх.
3. Synfig Studio
Довольно простой в использовании редактор 2D-анимации с открытым исходным кодом. Synfig позволяет создавать мультипликацию, применять фильтры, эффекты затенения и морфинга. Есть поддержка скелетной анимации. Очень удобно, что готовый материал можно отрендерить позже или вообще на другом компьютере.
4. Cinema 4D
Профессиональное решение для создания 3D-объектов, анимированной графики и реалистичных рендеров. Cinema 4D отличается простым интерфейсом, в котором легко разобраться даже новичку. Программа поддерживает процедурное и полигональное моделирование, а также имеет различные пакетные модули на все случаи жизни, включая визуализацию сцен, симуляцию динамики объектов, анимации персонажей и другое.
5. Pencil2D
Минималистичное приложение с открытым исходным кодом для работы с простой 2D-графикой. Позволяет на ходу рисовать персонажей и анимировать их, не усложняя творческий процесс. Легко обрабатывает как векторную, так и растровую графику, умеет добавлять эффекты и фильтры. Содержит полезные подсказки и примеры, которые помогут освоиться начинающим художникам.
6. OpenToonz
Профессиональный программный комплекс для рисования двухмерной анимации, который использовался при создании «Футурамы», «Унесённых призраками» и «Губки Боба». OpenToonz позволяет переносить изображения с кальки, имеет большой набор инструментов и эффектов для рисования, а также может похвастаться удобной функцией скелетной анимации персонажей.
7. TupiTube
Простой инструмент для создания 2D-анимации, ориентированный на любительскую аудиторию и детей в частности. Главная особенность TupiTube — лёгкий процесс рисования, благодаря которому можно сделать мультфильм всего за несколько простых шагов. Есть встроенная библиотека ресурсов и поддержка экспорта готовой анимации в различные форматы.
8. Easy GIF Animator
Популярная программа, позволяющая делать несложные двухмерные анимации с последующим сохранением в GIF, AVI или SWF. Easy GIF Animator полностью оправдывает своё название. Приложение имеет интуитивный интерфейс и пошаговый мастер настройки, который упростит работу новичкам.
9. Toon Boom Harmony
Полнофункциональное решение для создания анимации, в котором осуществляется весь процесс от рисования до финального продакшена. Harmony умеет захватывать изображения с камеры, преобразовывать двухмерные объекты в 3D и сканировать раскадровки с кальки. Приложение поможет раскрыть творческий потенциал с помощью большого набора кистей, палитр и спецэффектов. Готовый результат легко сохранить в виде анимации или перенести в игровой движок Unity.
10. Pivot Animator
Очень доступный в освоении редактор, специализация которого — простые 2D-клипы с человечками-палочками. Программа позволяет самостоятельно конструировать персонажей, использовать спрайты, менять фон и добавлять различные эффекты. Словом, есть всё необходимое, чтобы за несколько минут создать забавный мультфильм в духе серии игр Stickman.
Как делать анимацию, которая нравится всем (даже пользователю)?
Привет читателям Хабра! Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA и сегодня я вам принес статью про… да, про анимацию. Знаю, на этут тему здесь не писал только ленивый. Знаю, сказать что-то новое об анимации сложно. И все-таки надеюсь, что эта статья окажется для многих полезной, а для кого-то — даже интересной.
Итак, начнем.
В наши дни анимацию используют все разработчики — к месту и не к месту. И анимация, использованная не к месту, может сыграть с сайтом злую шутку — вместо «запланированного» интереса со стороны пользователя вызвать скуку, непонимание и даже отторжение. Вот как раз о том, как правильно использовать анимированные элементы, мы и поговорим в этой статье. А еще — о том, как сделать анимацию качественной, добиться ее максимальной производительности и не потратить на это слишком много времени и сил. Немного о первом, в двух словах о другом и совсем чуть-чуть о третьем. Поехали!
Зачем вообще нужна анимация?
У каждого элемента сайта должно быть четкое назначение. В том числе и у анимации. Исходя из функций, можно выделить три больших группы анимированных элементов.
Далеко не все сайты загружаются мгновенно. Для того чтобы во время загрузки страницы пользователь не потерял к ней интерес и не подумал, что сайт безнадежно «завис», и нужна анимация ожидания. Самая распространенная анимация этого типа — preloader
Это элемент, который посетитель видит сразу после перехода на сайт, пока загружается содержимое страницы. «Прелоадеры» выполняют сразу несколько функций:
На прелоадере можно показать полезную информацию — подсказки или советы.
С помощью такого типа анимации можно показать этапы, требуемые для достижения цели, или показать последовательность действий.
Пример еще одного варианта использования анимации ожидания: последовательное заполнение страницы контентом при скролле вместо отложенной одновременной загрузки всех элементов. То есть, если на экране много «тяжеловесных» элементов, их лучше загружать по очереди, а не сразу — здесь и приходит на помощь анимация.
2. Анимация подтверждения
Такая анимация нужна, чтобы пользователь не сомневался, что действие на сайте успешно совершено, и понимал, что можно сделать дальше. Интерактивные элементы на странице могут менять форму, цвет, содержание — например, кнопка меню после нажатия может смениться на «крестик», указывающий на то, что теперь меню можно снова закрыть.
Анимация подтверждения применяется и для того, чтобы подсказать посетителю, с чем на странице можно взаимодействовать. Это актуально для мобильных версий сайтов — когда на устройстве нет курсора мыши, пользователю стоит заранее указать на интерактивные элементы с помощью простой анимации.
3. Декоративная анимация
Это мини-игры, нестандартный скролл страницы, видеовставки, параллакс. Нет, эта анимация не «просто для красоты». У нее вполне утилитарная функция — привлечь внимание пользователя к самому важному, заинтересовать в дальнейшем изучении сайта, вызвать тот самый wow-эффект. Декоративную анимацию важно использовать «к месту» и дозированно, она не должна перегружать страницу и отвлекать пользователя от ее содержания.
Какой бывает анимация?
Не будем перечислять устаревшие или редко используемые технологии. Упомянем только самые распространенные — и разберем их плюсы и минусы.
Тут наверное из снежной королевы кадр, где выбирались развилки
Самый простой и действенный способ «оживить» страницу
Почти тоже самое что и видео. По сути, показ за короткий промежуток времени набора отдельных изображений, что создает иллюзию движения.
Самые сложные, но и самые впечатляющие типы анимации. Это 2D- и 3D-анимация соответственно. 2D-рисование в Canvas сводится все к тому же покадровому принципу. WebGL дает возможность реализации 3D-графики при использовании Canvas. Часть кода на WebGL может выполняться непосредственно на видеокартах, что улучшает общую производительность.
Как сделать анимацию качественной?
А как повысить производительность?
И немного лайфхаков
Вот и всё. Хотя об анимации можно говорить еще долго. К примеру, мы могли бы рассказать о новинках мира анимации — о новых фильтрах и медиазапросах, или о появившихся совсем недавно продвинутых инструментах и технологиях, таких как Web Animations API. А вы хотели бы почитать о трендах в анимации? Если да, будем рады посвятить этой теме следующую статью!
12 бесплатных сервисов для создание видео, анимации, GIF-файлов
Продолжаем подборку полезных сервисов, которые можно использовать бесплатно. C их помощью вы добьетесь большего вовлечения аудитории, увеличения продаж и снижения стоимости привлечения лидов.
12 бесплатных сервисов для создание видео, анимации, GIF-файлов.
Продолжаем подборку полезных сервисов, которые можно использовать бесплатно. В среднем, успешные маркетологи пользуются 5 и более дополнительными инструментами. И добиваются большего вовлечения аудитории, увеличения продаж и снижения стоимости привлечения лидов.
На бесплатные пакеты некоторые сервисы вводят ограничения. Например разрешают создавать не более 5 видео или анимаций в месяц. Если вам необходимо больше, регистрируйтесь во всех сервисах и в каждом создавайте то количество, которое позволяет бесплатный тариф. В итоге получите достаточный объем контента для достижения маркетинговых целей.
Бесплатные сервисы для создания видео.
Это один из лучших бесплатных инструментов для создания видео-контента, если вы используете iOS или MacOS. Это приложение позволяет легко создавать и обмениваться видео, а также делать трейлеры в голливудском стиле. Просто выберите свои клипы, затем добавьте названия, музыку и эффекты.
Приложение позволяет добавлять музыку, звуковые эффекты и голоса за кадром к вашим видео. Также можно комбинировать и редактировать клипы и добавлять фильтры. Затем делитесь своими творениями в социальных сетях или по электронной почте. Это приложение доступно на iOS и Android.
Это самый интересный инструмент для создания визуального контента в нашем списке. Он использует искусственный интеллект и каким-то образом умудряется создавать видео из текста. Введите URL-адрес, например, вашей страницы в соцсетях, и программа создаст из контента на странице соответствующие видео, включая фотографии и музыку. Бесплатная версия позволяет создавать до 5 видео в месяц.
Это современный редактор изображений, GIF-файлов и видео. Интуитивно понятный с большим количеством функций и возможностей. Вы легко сделаете стоп-кадр, измените размер видео, отрегулируете яркость и контраст, внесете субтитры, уберете или добавите звук и многое другое. В бесплатной версии доступен полный набор функций, но есть небольшие ограничения. Здесь перечислены далеко не все возможности сервиса:
Бесплатные сервисы для создания анимации.
Хотя, в бесплатном пакете длительность роликов ограничена 2 минутами и недоступны некоторые функции, этот инструмент достоин вашего внимания. С помощью готовых шаблонов создание ролика студийного качества займет около 10 минут.
Очень простой редактор. Вы легко сможете создать анимированные ролики или видео и поделиться ими в соцсетях. Но на бесплатном тарифе вы не сможете скачать свои ролики. Они будут открываться на странице Biteable. Выбирайте готовые шаблоны, стили и звуки. Редактируйте их или создавайте свои собственные.
Доступно также как самостоятельное приложение. Создавайте захватывающие мини видео, которые автоматически прокручиваются вперед и назад, и делитесь ими с друзьями. В приложении только одна кнопка. Просто нажмите ее, и Boomerang сделает все остальное! Приложение снимет 10 фото подряд и создаст из них замечательное мини видео. Поделитесь им сразу на Facebook и в Instagram или сохраните и используйте позже.
Сервисы для создания гиф-анимации
Здесь можно загрузить серию изображений, и сервис самостоятельно создаст GIFку. Это простой онлайн GIF Maker с набором инструментов для редактирования анимированных GIF-файлов. Вы можете настроить порядок загрузки изображений, изменить размер, обрезать и применить некоторые эффекты..
GIFMaker.me позволяет свободно и легко создавать анимированные GIF-файлы, иконки и аватары на интернет-форумах, слайд-шоу и видео-анимацию с музыкой. Делайте это онлайн и без регистрации. Кроме того, вы можете изменить размер GIF-файла, перевернуть его, объединить два или более GIF-файлов в один или разделить GIFку на отдельные фреймы.
Это один из самых известных инструментов по созданию контента для социальных сетей. Просто загрузите фотографии или видео, установите скорость анимации и добавьте некоторые декоративные эффекты, и ваш GIF-файл готов к загрузке и публикации.
Это бесплатное приложение для IOS, которое позволяет вам превращать контент на вашем телефоне в GIF-файлы и делиться ими. Просто скачайте приложение, выберите видео или набор фотографий, которые вы хотите конвертировать. И всего через несколько кликов у вас будет стильный ролик для размещения в соцсетях.
Если вы хотите использовать созданный видеоконтент в email-маркетинге, прочитайте статью “Как добавить видео в письмо: уловки по повышению конверсии.” Ведь скопировать ссылку на видео и вставить ее в макет (html-код) не получится. Видео не будет проигрываться.
Хотя большинство почтовых сервисов поддерживает верстку писем в html, добавление ссылки на видео “напрямую” через iframe противоречит принципам безопасности рассылок. В статье даны пошаговые инструкции и ответы на вопросы о том, как вставить видео в рассылки так, чтобы в итоге получить хороший результат.
Как делать энергичную анимацию. Советы и техники от аниматора Skullgirls
Skullgirls – 2D файтинг, в котором каждый кадр анимации нарисован вручную.
Основные принципы и техники
Настольная книга аниматоров прошлого и современности – «Иллюзия жизни: анимация Диснея», выпущенная в 1981 году. Мультипликаторы студии Дисней Томас Фрэнк и Олли Джонстон изложили в ней «12 базовых принципов анимации», которые актуальны до сих пор. Мариэль делает акцент на некоторых из них.
В анимации самая важная задача силуэта – показать действие. Если персонаж атакует – зритель должен видеть его кулаки или занесенный меч. Если боец прикрывается от ударов – в силуэте должна прослеживаться защитная стойка. Читаемость особенно важна в динамичном файтинге, где игроку нужно мгновенно реагировать на происходящее.
Хотя персонажи Skullgirls дерутся немного непривычными способами, по силуэту легко определить, что они делают.
Упреждение
Многим простым движениям предшествует подготовительное действие, которое в анимации называется упреждением. К примеру: перед ударом по мячу футболист заносит ногу; тренер набирает полную грудь воздуха, чтобы дунуть в свисток.
Упреждение привлекает внимание зрителя к следующему движению персонажа. Этот прием создает контраст между статичной и атакующей позой, позволяет почувствовать вес и силу и удара.
Змей перед укусом раскрывает пасть. Всего один кадр упреждения улучшает читаемость движения.
В файтингах у персонажей разная длительность упреждения. Боец под контролем игрока должен быть более отзывчивым: мгновенно реагировать на нажатия клавиш и двигаться быстрее соперников. Упреждение для игрового персонажа длится меньше, чем анимация перед атаками оппонента. Игроку нужно иметь чуть больше времени для ответной реакции – защиты, бегства или контратаки.
Акцент на ключевых кадрах
Ключевые кадры или ключи показывают положение персонажа в начале и в конце действия. Они служат важным ориентиром в работе.
Анимация всех бойцов в Skullgirls построена вокруг ключевых кадров. Сначала рисовали позы персонажей для ключей, а затем добавляли промежуточные кадры. Этот метод позволяет сделать гладкий переход между позами, поскольку аниматор заранее знает, как будет выглядеть персонаж в крайних точках любого действия.
От качественного исполнения рисунков для ключевых кадров зависит читаемость движения. Поэтому силуэты персонажей на них должны быть максимально выразительными.
В анимации резких движений можно обойтись без использования промежуточных кадров. На примере выше между двумя ключевыми позами расположен лишь один кадр упреждения.
Сквозное движение
Это принцип работает на гармоничное восприятие картинки. Он применяется в анимации сложных объектов, чтобы показать способность различных частей персонажа двигаться с разной скоростью.
Принцип положительно влияет на читаемость действия, поскольку части уже остановившегося объекта – волосы, одежды, украшения – продолжают показывать вектор движения. Это помогает наладить связь между текущей и предыдущей позой персонажа, создать плавный переход и сделать интервалы между ключевыми кадрами интереснее.
Сквозное движение в некоторых ситуациях позволяет использовать меньше кадров для анимации действия. Аниматор может пропустить упреждение и сразу перейти к ключевому кадру. Сквозное движение дает понять зрителю о направлении движения.
Мазок и размытие
Эти приемы используются, чтобы показать быстроту и скорость. Они позаимствованы на заре анимации из комиксов и используются в 2D анимации до сих пор.
Рисунок с размытием занимает мало кадров, но в то же время содержит много информации для зрителя. Удачный мазок на рисунке позволяет определить характер выполняемого действия и позу персонажа в начале и в конце удара.
Пара мазков показывает скорость и направление движения, а их прорисовка не требует больших трудозатрат.
Художники по-разному изображают быстрое действие. Оно может быть представлено в виде полосы света, оставшейся от взмаха мечом, размытой или вытянутой конечности или многократного повторения движущихся частей.
На стоп-кадре этот момент выглядит забавно, а в движении — очень динамично.
Проскок
Эту технику аниматоры используют, чтобы показать резкое и энергичное действие с короткой амплитудой движения. Движущаяся часть тела «проскакивает» ключевую позу, а затем возвращается в нее, слегка напоминая маятник. Проскок можно сочетать с размытием и сквозным движением.
На примере проскок комбинирован с размытием.
А вот проскок в анимации удара бойца из Street Fighter 3.
Тут проскок дополнен сквозным движением рукава.
Аниматоры файтингов охотно используют этот прием, потому что он позволяет придать атаке визуальную силу. Анимация проскока при попадании слегка «залезает» на персонажа противника. Это усиливает ощущение воздействия, а у игрока не остается сомнений, что оппонент получил по заслугам.
Искажение анатомии
«Задача аниматора – передать эффект движения. Нет нужды делать каждый кадр отдельным произведением искусства. Не нужно бояться преувеличивать или утрировать, искажать привычную анатомию, если это может улучшить читаемость движения»
Мариэль Картрайт, ведущий аниматор Skullgirls.
Неестественно вывернутые суставы допустимы в промежуточных кадрах, если они работают на читаемость движения.
Эти позы физически невозможны, но они отлично передают динамику движения.
Даже идеально отрисованные кадры не сделают анимацию живой и привлекательной без правильной настройки длительности тайминга и спейсинга.
Чересчур быстрые движения бойцов не позволят игроку уловить происходящее на экране, у него не останется времени на ответную реакцию. Если действия слишком вялые – внимание зрителя будет рассеянным, он утратит интерес.
От тайминга зависит время перехода от одного ключа к другому, а от спейсинга – скорость этого перехода. Эти моменты проще уловить на наглядном примере.
Скорость и реалистичность перехода от одной ключевой позы к другой зависит от настройки спейсинга
Сравните две шкалы, показывающие динамику движения мячиков. Оба шарика перемещаются по шкале времени и совершают свой путь вверх и вниз за одинаковое время, но с разной скоростью.
Больше времени для ключей!
При работе над Skullgirls аниматоры заметили, что одинаковые интервалы между кадрами не всегда позволяют получить желаемую картинку. При сохранении равных интервалов между кадрами движения хуже считывались зрителем, и на их прорисовку требовалось большее время.
Разработчики могли экспериментировать и настраивать длительность каждого кадра отдельно, поскольку анимация в игре создавалась вручную. Решить проблему удалось благодаря выдерживанию небольших пауз на ключевых позах. Движения стали выразительнее, а трудозатраты художников – уменьшились.
В анимации слева между кадрами установлены одинаковые интервалы, и на секунду действия приходится 20 различных изображений. После настройки тайминга и спейсинга (справа) персонаж быстрее замахивается кулаком и чуть дольше задерживается в ключевой позе.
Хитстоп для весомости ударов
«Вы не сделаете чертовски хорошую игру без хитстопа»
Майк Займонт, ведущий дизайнер Skullgirls
Наблюдательный игрок в файтинги мог заметить, что персонаж игрока и его противник, получив повреждение, застывают на месте на доли секунды. Этот прием называется хитстоп и используется в большинстве 2D файтингов, чтобы сделать удары ощутимыми.
Длительность хитстопа зависит от силы атаки – чем она мощнее, тем дольше персонажи остаются застывшими.
Получая повреждение, персонажи ненадолго замирают в ключевых позах, чтобы игрок прочувствовал силу удара и обратил внимание на попадание.
Реакция на команды
Когда персонаж бездействует, он принимает позу ожидания. Она не статична – боец может переминаться с ноги на ногу, сжимать и разжимать кулаки. Переход из позы ожидания к действию и обратно – едва уловимый, но важный момент, на который стоит обратить внимание при создании анимации.
Персонаж не замирает, как статуя, даже когда игрок не трогает клавиши.
Как уже говорилось ранее, многим движениям в реальности предшествует подготовка или некоторая задержка. К примеру: бегущий человек не сразу набирает максимальную скорость и не сразу останавливается; перед прыжком нужно согнуть ноги и оттолкнуться от земли.
Если действовать в рамках законов физики, то движения в анимации будут очень реалистичны. Однако, стоит помнить об особенностях создаваемого продукта. В играх порой приходится жертвовать реализмом в угоду геймплея.
Игрок ожидает мгновенной реакции персонажа на команды, поэтому переход от состояния спокойствия к действию должен быть быстрым. Для этого аниматоры настраивают спейсинг – увеличивают интервалы между кадрами перед ключами действия и спокойствия.
Чему научились аниматоры, работая над Skullgirls?
Работа над файтингом продолжалась 4 года. За это время разработчики набивали шишки и учились на своих ошибках. Какие советы они дают начинающим и опытным аниматорам?
Тестируйте анимацию с самого начала
Уже на этапе эскиза персонажи Skullgirls получали анимацию ударов и спецприемов и были полностью играбельны. После тестовых боев аниматору передавали заметки и предложения по улучшению анимации. Художники продолжали работу параллельно с настройкой всех параметров. К концу правок персонаж был полностью отрисован и готов к финальным тестам.
Пайплайн разработчиков Skullgirls: грубый набросок, его анимация и тестирование, чистовой лайн, финальная анимация с учетом правок.
Разбивай движение на составные части
Аниматоры Skullgirls выработали собственный подход к анимации движений, позволяющий сохранить энергичность и плавность анимации, обойтись наименьшим числом кадров. Они разделяют каждое движение на 4 части:
· упреждение;
· размытие;
· атакующий ключ;
· возврат.
Атаку персонажа удалось уместить всего в 4 кадра.
Больше – не значит лучше
В погоне за супер-плавной картинкой можно нагромоздить излишнее количество деталей и кадров. Детали отвлекут внимание зрителя от самого действия, а лишние кадры сделают движение однообразным и скучным.
Анимация падения занимает 21 кадр, что очень много для Skullgirls. Движение слишком размеренное и содержит много ненужных деталей.
Фикс от аниматоров (немного на скорую руку).
Финальная версия стала короче на 6 кадров. Персонаж дольше задерживается в ключевых позах, уменьшено число промежуточных кадров. Благодаря этому движение выглядит эффектнее.
Движение содержит 45 кадров и занимает 12 мегабайт памяти. Оно “тяжелое”, ему не хватает энергичности и скорости.
Когда анимация удара стала короче на 16 кадров, ее вес уменьшился в три раза без ущерба для читаемости движений.
Аниматор, помни!
1. Даже самая крутая анимация не в силах надолго удержать интерес игрока, если у игры скучный геймплей.
2. Анимация должна соответствовать требованиям и ограничениям, накладываемым игрой. Работайте совместно с гейм-дизайнером.
3. Ключевые позы и силуэт – основа читаемых движений. Создавайте анимацию, отталкиваясь от ключей.
4. Каждое движение следует раскладывать на составные части.
Не знаете, что за игра Skullgirls? Мы писали о том, как разрабатывались игра и персонажи, какие принципы исповедовали создатели и что пошло не так на этапе релиза.