Виды анимации элементы анимационных программ

Что такое анимация? На первый взгляд движущиеся картинки и гифки — ничего серьезного, баловство. Но давайте посмотрим, что они могут дать владельцу сайта и вашему бизнесу в целом.

От слова “душа”

Слово “анимация” происходит от латинского “анима”, то есть “душа”. Проще говоря, анимация поможет вдохнуть душу в страницы вашего сайта, сделать его более живым и понятным для пользователя.

Пару десятков лет назад, на заре веб-анимации, простейшие гифки, мигающие изображения и танцующие человечки использовались в декоративных целях — чтобы развлечь пользователя да и просто отличиться от конкурентов. Сейчас анимационные эффекты приносят пользу — а именно улучшают юзабилити сайта. Совсем недавно мы писали про UX/UI дизайн, который направлен на то, чтобы пользователю было удобно и приятно. Анимация — часть этого дизайна. Чем же она полезна?

1. Привлекает внимание посетителя к важным деталям. Например, анимацией можно выделить главную информацию, в интернет-магазине — привлечь внимание к товарам, которые нужно продать в первую очередь. Или отделить категории товаров в меню, чтобы пользователь не запутался.
2. Обеспечивает навигацию. Куда интереснее бродить по сайту в сопровождении анимированных подсказок, чем разбираться в навигации в гордом одиночестве. Веселые изображения помогают разобраться в структуре сайта — подсказывают, куда идти и что где находится.
3. Выражает эмоции. Хороша анимация и для оценки действий пользователя. Например, при регистрации на сайте посетитель все сделал правильно — появляется анимация, имитирующая крепкое рукопожатие. Где-то ошибся — получите эффект тряски, который обозначает отрицательное покачивание головой.
4. Вызывает эмоции. Качественная анимация заставляет человека улыбнуться, рассмеяться, способна вызвать чувство удовлетворения или, наоборот, сожаления (например, если товара нет в наличии).
5. Отражает характеристики предмета. В нашем случае — сайта или отдельного товара. Google даже ввел понятие “материальный дизайн”, который дает понятие природы объекта и рассказывает, какой он: большой или маленький, легкий или тяжелый.
6. Мотивирует на совершение целевых действий и повышает конверсию. Допустим, человек регистрируется на сайте. Процесс регистрации составляет 3 шага. Когда первый шаг пройден, появляется анимация, которая подбодряет и заставляет идти дальше, до конца. Когда и второй шаг позади — анимация меняется, словно говоря: осталось совсем немного! Конечно, и без анимации пользователь сам способен пройти регистрацию, но многие пользователи бросают начатое и уходят с сайта. Вот им-то анимация и сможет помочь.

Как отличить плохую анимацию от хорошей?

Виды анимации

1. Анимированные объекты

Самый простой вариант, который вы наверняка встречали на разных сайтах. Это отдельные изображения и объекты, которые показываются пользователю. Например, движущийся курсор, плавающая кнопка “вверх”, кнопки призыва к действию, меняющие цвет, и так далее. Раньше было модно использовать кричащие кислотные цвета — видимо, для того, чтобы бить прямо в глаза посетителям.

12 принципов анимации. Русская озвучка. (Все серии)

Сейчас тенденции меняются — в моде простой лаконичный дизайн, сдержанные натуральные цвета, четкие большие шрифты. Подробнее об основных трендах веб-дизайна читайте в нашей статье.

2. Анимированные изображения

Самый простой пример — анимированные рекламные баннеры на сайте. Они могут вести на карточки товаров, внутренние страницы, блог или перенаправлять посетителя на другой сайт — который заказал у вас рекламу.

Еще пример — слайд-шоу из фотографий. Обычно используется на сайтах, где одним из продающих элементов являются фотографии. Например, женская одежда, украшения, виды заморской природы и достопримечательностей, которые предлагает туристическое агентство. Современные возможности анимации позволяют сделать самые различные слайдеры: во весь экран, с 3D-эффектами, адаптивные (которые просматриваются с любых мобильных устройств) и другие.

3. Анимированный текст

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

Все эти виды анимаций могут быть разные по оформлению и действию. Вот основные приемы анимации:

• мигание;
• фокусировка;
• изменение цвета;
• вращение;
• вспышка, пульсация;
• покачивание;
• скольжение;
• комбинированные варианты и другие.

Стратегии анимации

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

1. Анимация ожидания

Подходит для действий, которые занимают определенное количество времени. Например, процесс регистрации, скачивание с сайта PDF- или Eksel-документа, совершение оплаты. Если не показывать пользователю, что действие выполняется, он может запаниковать и нажимать на все кнопки подряд. Анимация же словно говорит: спокойно, ребята, все идет по плану, осталось подождать еще немного.

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

2. Анимация повествования

Сторителлинг — прекрасный инструмент маркетинга. Это когда вместо обычной рекламы придумываешь историю, связанную с вашей компанией, товарами, покупателями. Людям интереснее читать жизненные ситуации, нежели смотреть стандартные фото товаров и призывы купить.

Не обошел сторителлинг стороной и анимацию. С ее помощью тоже можно рассказать историю — только не текстом, а картинками, гифками, короткими мультфильмами. Происходит это так: человек заходит на сайт, прокручивает курсором страницу вниз и запускает анимацию, которая повествует об истории создания компании, вариантах использования товаров и услуг, преимуществах вашего бизнеса. Вот, например, как рассказывает о своем продукте Mac Pro. Воистину, лучше один раз увидеть, чем десять раз прочитать текстовое объяснение.

3. Анимация подтверждения

Самый простой вариант, который не несет продающей цели, лишь вызывает необходимые эмоции. Например, зашли вы на сайт интернет-магазина. Побродили по главной странице, решили остаться, открыли одну из категорий товара — появляется анимация, которая поздравит вас (“Ммм, ножи и вилки — отличный выбор!”). Добавили товар в корзину — еще одна анимация (“Поздравляем, теперь этот товар у вас в корзине!”) и так далее. То есть анимация как бы подтверждает каждое действие, фиксируя его в памяти посетителя и вызывая положительные эмоции.

Правила создания хорошей анимации

Как и в любом веб-дизайне, у анимации есть свои правила, которые нужно соблюдать.

1. Не увлекайтесь. И мигающие изображения, и рекламные баннеры, и анимированные истории на одном сайте — это все же перебор. Достаточно одного-двух элементов, чтобы привлечь внимание пользователя и облегчить навигацию. В противном случае вы рискуете получить прямо противоположный эффект: раздражение и уход с сайта.

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

2. Не повторяйтесь. Не используйте одну и ту же анимацию везде, на всех страницах. В первый раз это будет интересно, во второй — уже скучновато, в третий — утомительно. Пусть ваш дизайнер предложит больше вариантов.

3. Используйте анимацию на стратегически важных объектах: элементах, с которыми посетитель наиболее часто взаимодействует. Например, для интернет-магазина это форма заказа, корзина, категории товаров (и другие элементы продающего дизайна интернет-магазина). Для лендинга — кнопка call to action, для обычного сайта компании — раздел услуг и контакты.

4. Учитывайте целевую аудиторию. Важно понять, кто сидит по ту сторону монитора и заходит на ваш сайт. Анимация хороша для молодой аудитории: уж они-то оценят любой креатив и придут в восторг от современных решений. Люди постарше тоже положительно воспримут анимацию, но она должна быть более понятной и наглядной.

Если же ЦА вашего сайта — пожилые люди, делайте упор на анимацию ожидания, которая заботливо подскажет основные этапы действия и проведет посетителя прямо до конечной цели — регистрации, оставления контактных данных, совершения покупки.

5. Экспериментируйте. Любой хороший веб-дизайнер вам скажет: каждый элемент дизайна нужно сначала протестировать, а потом запускать в продакшн. Для этого составляется несколько предварительных вариантов и используются разные методы: А/В тестирование, карты маршрутов пользователей, специальные инструменты вроде UX Checklist, который определяет, насколько анимированные элементы соответствуют принципам UX-дизайна. Вариантов много, но суть одна: если тесты показывают, что пользователи негативно реагируют на анимацию, нужно заменить ее новой или вообще убрать от греха подальше, переключившись на другие элементы дизайна.

6. Заказывайте адаптивную анимацию. Изображения, тексты, другие объекты должны отображаться на любом носителе, будь то стационарный компьютер, ноутбук, планшет или смартфон. В наши дни более 60 процентов пользователей заходят на сайты и интернет-магазины с телефона. Зачем же лишать их такой радости, как анимация?

Да и вы будете знать, что отдали деньги не зря и полезные фишки увидят все ваши посетители, а не только пользователи ПК.

Как сделать анимацию на сайте?

Об этом вам расскажет веб-дизайнер, который наверняка знает все секретные места, где можно раздобыть шаблоны для создания анимации, умеет делать ее самостоятельно и интегрировать на сайт. Хотите поиграться сами? Не вопрос.

Если хотите сделать баннер, заставку, активные кнопки и прочие элементы дизайна — попробуйте разобраться в программе Sothink SWF Easy. Она предлагает шаблоны для альбомов, баннеров, кнопок навигации, а также большой сборник готовых вариантов анимации — включая фоны, иконки, картинки, flash-ролики и другие.

Если решили сделать гифку из видео — на помощь придет старый добрый “Фотошоп”. Надо открыть на Youtube видеоролик, скачать себе на компьютер, затем вырезать необходимый фрагмент (не больше 2-3 секунд) и открыть его в “Фотошопе”. Далее нужно импортировать кадры видео в слои и сжать изображение, чтобы меньше весило. А затем просто сохранить и наслаждаться эффектом.

Если “Фотошопом” вы не владеете — попробуйте специальные программы, например Giphy GIF Maker. Достаточно вставить ссылку на видео с “Ютуба” или другого хостинга в строку поиска на главной странице. Когда видео загрузится, выберите необходимый фрагмент, и программа начнет работу.

Сделали? Отлично. Теперь анимацию нужно интегрировать с сайтом. Это можно сделать с помощью нескольких проверенных способов:

• код HTML;
• код CSS;
• код JavaScript;
• gif-анимация;
• flash-анимация.

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

Главное, что вам необходимо помнить: анимация создана для того, чтобы сайт более привлекательным и полезным для клиента. На первом месте стоит красота и привлекательность для пользователя, и только потом — декоративные функции. Удачи в продажах!

Источник: www.idbi.ru

Виды анимации

«Здесь, тем не менее, мы оглядываемся назад, но не стоим на месте. Мы стремимся вперед, открываем новые пути, беремся за новые дела, потому что мы любопытны. и любопытство гонит нас по новым дорогам. Только вперед.» (Уолт Дисней)

О технологии анимации

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

Для начала, что бы не запутаться, мне хотелось бы выделить 3 основных критерия по которым можно судить об анимации: виды анимации, методы анимации и стили анимации. Для многих — это одно и тоже, но это не так! Виды анимации — это то, в каком виде или форме демонстрируется мультфильм (рисованный, кукольный и т. д).

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

Рисованная классическая анимация.

Один из самых интересных и распространенных видов анимации, это так называемая классическая анимация. Классическую анимацию делают рисуя на прозрачной пленке (или кальке) каждый отдельный кадр. Затем эти кадры собирают в специальной программе монтажа. Такая анимация очень живая, плавная, пространственная, но дорогая))). Примером такой анимации могут послужить мультфильмы студии «Дисней» и «Союзмултфильм».

Кадр из мультфильма «Белоснежка и семь гномов» студии «Дисней»

Перекладная анимация.

Старейший вид анимации. Суть этого вида анимации в том, что нарисованный на картоне или бумаге объект режется на отдельные кусочки и эти кусочки передвигаются (перекладываются) от кадра к кадру. Отсюда и название — перекладка! Многие считают такую анимацию примитивной, но в умелых руках такие мультфильмы могут получиться очень интересными.

Одним из самых ярких примеров перекладной анимации можно смело назвать мультфильм «Ежик в Тумане» режиссера Юрия Норштейна. «Ежик в тумане» был признан мировым сообществом САМЫМ ЛУЧШИМ МУЛЬТФИЛЬМОМ ВСЕХ ВРЕМЕН И НАРОДОВ. Вот тебе и перекладка. Вот тебе и примитивно.

Кадр из мультфильма «Ежик в тумане» режиссера Юрия Норштейна

Живопись на стекле.

А вот здесь примитивным анимацию точно не назовешь! Суть такой анимации в рисовании масляными красками по стеклу. Каждый кадр при этом — это живописная картина, которая видоизменяется мазками художника. Ярким примером такой анимации является произведение Александра Петрова «Старик и море», которое было удостоено премией «Оскар».

Кадр из анимационного фильма «Старик и море» режиссера Александра Петрова.

Кукольная анимация.

То же старинный вид анимации. Все куклы и декорации в кукольной анимации изготавливаются вручную, что делает ее такой же дорогой, как и классическая анимация. Тем не менее такой вид анимации очень популярен даже сегодня (несмотря на распространение компьютерной 3д анимации). Если сказать честно, то кукольная анимация мне в детстве не нравилась))) Но прозрение наступило, когда я увидел мультфильм Тома Бертона «Кошмар перед рождеством».

Кадр из мультфильма «Кошмар перед рождеством» режиссера Тома Бертона.

Пластилиновая анимация

Название пластилиновая анимация говорит само за себя. Добавлю только то, что пластилиновая анимация вышла из кукольной анимации и стала популярной у нас в России после появления мультфильмов «Падал прошлогодний снег» режиссера Александра Татарского.

Кадр из мультфильма «Падал прошлогодний снег» режиссера А.Татарского.

Компьютерная 2д анимация.

Хотим мы того или не хотим, но на смену старым видам анимации приходят новые. Компьютерную 2д анимацию почему-то принято называть Flash анимацией и это не совсем верно. Flash — это только одна программа. Можно назвать и другие мощные компьютерные программы для создания 2д анимации, например: After Effect, Anime Studi Pro, Toon Boom Studio и еще множество платных и бесплатных программ. В настоящее время компьютерной 2д анимацией занимаются почти все студии. Именно такую анимацию мы видим сегодня в сериалах по телевизору, в интернете, в казуальных компьютерных играх и т. д.

Кадр из анимационного сериала «Симсоны»

3д анимация.

3д анимация — вид мультипликации созданный на базе компьютерных 3д программ. Это самый молодой и самый перспективны вид анимации. С развитием компьютерных технологий стало возможным не только рисовать графику и анимацию в двухмерной плоскости (2д анимация), но и оживлять трехмерные формы.

Технология эта очень сложная, но если рассказать коротко, то процесс производства выглядит примерно так. Сначала рисуются концепт арты (любым способом), по этим рисункам создают трехмерную геометрию модели. Затем текстуры, которые надеваются на форму персонажа или объекта. Далее создают кости объекта и прикрепляют их к форме, что бы форма смогла двигаться.

Аниматоры получают подготовленную модель для движений и начинают ее оживлять. Чем лучше подготовлена модель, тем ее движения получаются естественнее и пластичнее. После создания анимации сцена визуализируется (переводится из 3д в обычную картинку). Яркими примерами такой анимации являются мультфильмы студии Пиксар.

Кадр из мультфильма «Рататуй» студии Пиксар.

Комбинированная анимация.

Комбинированная анимация — это совмещение любого из видов анимации с видеофильмом. Ранними примерами такой анимации могут быть: фильм «Кто подставил кролика Роджера», мультфильм «Приключение Капитана Врунгеля» и т. д. С развитием 3д технологии и компьютерных спецэффектов этот вид анимации встречается в художественных фильмах все чаще и чаще. Основной особенностью современной комбинированной анимация заключается в ее полной реалистичности.

Кадр из фильма «Мир юрского периода» режиссера Стивена Спилберга

Другие виды анимации.

Кроме перечисленных видов анимации существуют и другие, например: песочная анимация, лазерная анимация, фото анимация, игольчатая анимация и т. д. Однако, эти виды считаются менее популярными и в данной статье я позволил себе о них лишь упомянуть.

Виды анимации в студии Картонная Башня.

Наша студия анимации специализируется на производстве компьютерной 2д анимации. Благодаря гибким возможностям компьютерных программ мы можем создавать как перекладную, так и классическую анимацию одновременно. Так же нам по силам создание и 3д анимации. В качестве примера, вы можете посмотреть на 3 ролика из нашего портфолио:

1. Компьютерная 2д анимация в классической манере:

2. Компьютерная перекладная 2д анимация:

Источник: www.cartoontower.ru

Виды компьютерной анимации: чем отличаются от традиционной

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

Если говорить о высокотехнологичной анимации, то это не только хорошо знакомое всем 3D. Многие двумерные анимированные изображения также создаются на компьютере, просто вы об этом не догадывались. Подробнее о компьютерной анимации вы узнаете из нашего материала.

Общие понятия об анимации

Анимация, от лат. animare (оживлять), это вид искусства, основанный на создании произведений покадровой съёмкой каждой сцены или кадра. Синонимом анимации является мультипликация. Этот термин тоже пришёл из латыни (multiplicatio означает размножение, умножение).

Кадром в анимации любого вида (компьютерной и т. д.) является нарисованное изображение последовательных стадий движения целых объектов или их отдельных элементов.

Если просмотреть все кадры друг за другом, то возникнет иллюзия, что статичные персонажи или предметы ожили, задвигались. Чтобы добиться эффекта плавного и естественного изменения их очертаний, цвета, положения, кадры должны сменять друг друга с частотой от 11-16 в секунду. Для кино эта частота составляет 25 кадров в секунду, для телевидения ещё больше — 25-30.

Этот принцип анимации был открыт задолго до зарождения кинематографа. Изобретателями начала XIX в. (например, Жозефом Плато, физиком из Бельгии) использовался вращающийся диск или лента, покрытая рисунками, в сочетании с системой зеркал и источником света — фонарём. Изображение проецировалось на экран.

Что же касается рисованной анимации, то она появилась в конце того же века. Первые в мире мультфильмы были сняты американцем Джеймсом Стюартом в 1900-1907 гг. (это были анимационные ленты “Комические выражения смешного лица”, “Волшебные рисунки”, “Отель с привидениями”). В России мультипликация появилась чуть позже, в 1911-1913 гг., а годом выхода первого мультфильма в Белоруссии стал 1927 (мультик назывался “Октябрь и буржуазный мир”).

Представляете, каких трудозатрат стоило создание мультфильма до появления компьютерной анимации? Ведь все кадры (фазы движения) надо было отрисовать вручную! Например, пятиминутный мультик с частотой 24 кадра в секунду — это в сумме 7200 кадров, причём во многих из них есть повторяющиеся детали, которые надо скопировать почти без изменений.

В 20-х гг. XX в. технологию анимации упростили: все фрагменты, которые менялись и двигались, вынесли на прозрачные плёнки из целлулоида, наложенные поверх статичного фона. Этим нехитрым способом труд художника-аниматора хоть немного механизировали. Впоследствии данный вектор развития мультипликации воплотился в компьютерной анимации разных видов.

Компьютерная анимация предполагает прорисовку лишь отдельных опорных, или ключевых, кадров. Все промежуточные кадры автоматически генерируются программой. Чтобы анимация каждого движущегося элемента была независимой, для каждого персонажа заводят отдельный слой (наподобие тех самых плёнок, используемых на заре мультипликации) и свой графический объект.

Виды компьютерной анимации

Компьютерная графика существует уже довольно давно. Графические системы с полным функционалом использовались ещё в 1960-е. На сегодняшний день термины “компьютерная графика” (КГ) и “компьютерная анимация” (КА) не являются синонимами: КГ включает в себя весь спектр работ со статичными картинками, а КА — работу только с изображениями, динамически меняющимися. Но оба вида искусства объединяются под аббревиатурой КГиА.

• Computer graphics означает отображение, вывод, ввод, редактирование, изменение графических объектов посредством компьютера.
• Computer animation — это «оживление» картинок на мониторе, создание динамических изображений с помощью ЭВМ.

Источник: gb.ru