Что такое анимация: руководство по ее истории и современному использованию в дизайне

Статьи по дизайну

В жизни каждого был момент, когда анимация была просто самой крутой вещью, которую вы когда-либо видели. Был ли это фильм Диснея в детстве или, может быть, кат-сцена 3D-игры, которая поразила вас, всегда было что-то впечатляющее, когда воображаемые персонажи двигаются и действуют как в реальной жизни.

И не думайте, что власть осталась незамеченной графическими дизайнерами.

Короткая анимация, выделяющая момент для чемпионата мира по футболу 2018 "width =" 1080 "height =" 1080 "/> <figcaption> Дизайн šaška ™ </figcaption></figure> <p> В цифровую эпоху анимация может сделать больше, чем просто развлекать детей с помощью мышки, управляющей лодкой. Это эффективный инструмент для визуального общения. Конечно, он предлагает совершенно новую среду для выражения и творчества, но на более практическом уровне движение анимации привлекает больше внимания чем статичные изображения. И, учитывая ограничения на отснятый материал, иногда лучше всего работает анимация прыгающего мяча. </p> <p> В этой статье мы даем всеобъемлющий обзор анимации. Мы обсуждаем анимацию для дизайнеров и даем некоторые приемы из расцвета мультфильмов — столь необходимое обновление для современной эпохи. Мы также продемонстрируем деловую сторону анимации, объяснив, как она может улучшить как UX вашего сайта, так и эффективность кампаний цифрового маркетинга. Так что без дальнейших церемоний, давайте двигаться! </p> <h2> Что такое анимация? <br /> — </h2> <p> Анимация — это захват последовательных статических изображений — рисунков или фотографий неодушевленных объектов — и их воспроизведение в быстрой последовательности, имитирующей движение в реальном мире. Если вы когда-нибудь видели флипбук, вы знаете, как он работает. </p> </p> <p> Но, скорее всего, когда вы спрашиваете «что такое анимация?», Вам нужно нечто большее, чем техническое определение. Откуда это? В чем суть апелляции? </p> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'> <!-- Yandex.RTB R-A-268541-2 --> <div id=

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

.

Одна из первых анимаций на фильме была фактически написана вручную французским художником и изобретателем Шарлем-Эмилем Рейно на его праксиноскопе — одном из первых этапных изобретений, которые привели к пленочной камере.

Анимация "Ходячая звезда" "width =" 800 "height =" 800 "/> <figcaption> Стробоскопический диск профессора Штампфера. Via Wikimedia Commons. </figcaption></figure> <p> Для первой части 1900-х годов художники со всего мира экспериментировали с анимацией, например, недавно обнаруженный <em> Кацудо Шашин </em>датированный 1907–1911 годами, который, как говорят, предшествовал большей части западной анимации. Однако анимация рассматривалась в основном как новинка до эпоха Уолта Диснея в 1920-х годах, когда звук начинал воплощаться в кино. <em> Steamboat Willie </em> (1928), «флагманский» мультфильм Диснея, был не первым мультфильмом со звуком, но он был одним из самый популярный в то время. </p> <p> К 1930-м годам другие студии поняли, что есть деньги, которые можно заработать с помощью анимации, которая послужила стимулом для запуска Warner Bros. Looney Tunes и Merrie Melodies. В 1930-х годах произошло дружеское соперничество между Микки и Багсом, известное сейчас как Американский золотой век анимации, которое завершилось мощной игрой Диснея <em> «Белоснежка и семь гномов», </em> — первым полнометражным фильмом, который будет сделан <em> полностью </em> рисованных изображений. </p> <p> Остальное уже история. С популяризацией цветного телевидения в конце 1950-х годов на сцену вышла еще одна американская пионерка анимации — Ханна-Барбера. После культурной революции 1960-х годов анимация была выбрана для взрослых, наиболее известным из которых был кот «Fritz the Cat» <em> (19459004) (1972), созданный по мотивам легендарного художника комиксов Роберта Крамба. Наконец, в 1990-х годах компьютерные изображения (CGI) могли конкурировать с рисованной анимацией, популяризированной первым полностью CGI-фильмом <em> Toy Story </em> (1995). </p> <p> Учитывая широкую историю анимации, мы видим, что ее привлекательность также широка. Конечно, детям это нравится, потому что большинство детских историй рассказывают о говорящих животных, чайниках или визуальных образах, которые иначе невозможно воплотить в жизнь. </p> <figure data-id= Плакат Toy Story "width =" 1200 "height =" 1800 "/> <figcaption> Rewatch Toy Story (1995) — первый в мире фильм со 100% компьютерной графикой все еще выглядит лучше, чем некоторые современные графики, сделанные более чем в 20 годы спустя Via Pixar </figcaption></figure> <p> Но чем сложнее становятся методы анимации, тем и обсуждаются темы, которые они обсуждают. Хотя CGI используется практически в каждом фильме сегодня, даже полностью анимированные функции могут понравиться взрослым — просто посмотрите на популярные анимационные ситкомы, такие как <em> The Simpsons </em><em> Family Guy </em> или <em> South Park </em>. </p> <p>.</p> <p> Возможно, самая большая сила не в том, что он обращается к разным группам, а ко всем группам одновременно. Анимация позволяет художникам вызывать это детское удивление и страх не верить нашим глазам, а использовать эту силу для более зрелого рассказывания историй и даже бизнеса, как мы объясним ниже. </p> <p> Как эта визуальная техника может понравиться как нашему внутреннему ребенку, так и нашему проницательному взрослому? Достаточно взглянуть на практически любой фильм <em> Pixar </em>. Это безопасное место — вы собираетесь сказать мне, что у вас не было туманных глаз в течение первых десяти минут <em> Up </em>? </p> <h2> Обзор анимации для бизнеса: Looney Tunes для финансовых благ <br /> — </h2> <p> Помимо кино и телевидения, анимация становится любимой техникой бизнеса в цифровом пространстве. В частности, анимация улучшает дизайн веб-приложений и цифровых маркетинговых кампаний благодаря своим практическим преимуществам так же, как и развлекательный фактор. </p> <p> Движущаяся графика (то есть анимация таких элементов, как типографика, значки, изображения на месте и т. Д.) Предназначена для объяснения концепций с использованием движения, таких как анимированные объекты в веб-дизайне. Хотя анимационная графика не так сосредоточена на рассказывании историй, как анимационные, она все же воплощает в себе многие преимущества анимации, но по-другому. Размещение движущейся графики в нужных местах на веб-сайте может фактически улучшить работу вашего сайта, не говоря уже о вторичных восхитительных преимуществах: обучении посетителя тому, как использовать сайт быстро, эффективно и визуально. </p> <figure data-id= Движущаяся графика для сайта криптовалюты "width =" 940 "height =" 940 "/> <figcaption> Дизайн Janos Nyujto </figcaption></figure> <p> Допустим, вы только что добавили блестящий новый функция, но аналитика показывает, что никто не щелкает по ней. Возможно, проблема в том, что они этого не видят — обычные пользователи настолько привыкли к тому, как выглядит экран, новое дополнение может остаться незамеченным. Быстрое исправление: добавьте небольшую анимацию к новая функция, будь то перемещение значка или пульсирующая точка уведомления. </p> <p> Использование подобной анимации может оказать большое влияние на UX. Вы можете добавить анимированные изображения к наиболее популярным параметрам страницы, чтобы пользователи могли их видеть, если они им нужны. Вы можете обратить больше внимания на призывы к действию, чтобы повысить конверсию. Вы можете использовать анимацию для подтверждения действия (т. Е. Кнопки, которая перемещается при нажатии). Движущаяся графика может даже добавить немного веселья, как и в случае с пасхальными яйцами, которые перемещаются, когда пользователи наводят на них курсор. </p> <p> Одним из лучших преимуществ движущейся графики является информирование пользователей о причинах и следствиях, особенно с помощью управления жестами на мобильном устройстве. Подумайте о культовом перелистывании Tinder — анимация перетаскивания страницы влево или вправо усиливает иллюзию интерактивности. Такое ощущение, что вы на самом деле что-то двигаете. Представьте себе, если при пролистывании экран просто моргнул и загрузил новый профиль. Приложение не будет таким веселым. </p> <p> Есть еще много способов использовать анимацию для бизнеса, но рассмотрим ниже некоторые распространенные примеры: </p> <figure data-id= Объяснительная видео анимация "width =" 800 "height =" 800 "/> <figcaption> Дизайн SB.D </figcaption></figure> <ul> <li> <strong> Видео-разъяснители </strong> — одно из самых популярных применений анимации в современном бизнесе, анимированные видеоролики-разъяснители добавляют игривость к скучным, непривлекательным обучающим видео. Компании могут объяснить тонкости своих услуг, не будучи скучным. Единственным недостатком является то, что эта тенденция стала настолько популярной, что предприятия должны выбрать более экспериментальные и уникальные стили анимации, чтобы выделиться. </li> <li> <strong> Загрузка страниц </strong> — Никто не любит смотреть на пустой экран. Анимации при загрузке страницы не только снижают время загрузки и риск отскока пользователя, но и дают возможность показать индивидуальность вашего бренда или рассмешить пользователя. Иногда люди запоминают анимацию загрузки больше, чем сам сайт! </li> <li> <strong> Переходы </strong>. Любой, кто использовал старый компьютер, знает, как это ужасно, когда новые окна открываются без какой-либо церемонии. Анимированные переходы — смахивание, вытирание, постепенное исчезновение градиента, усадка и т. Д. — влияют на биологию человеческого глаза и делают визуальные изменения как можно более плавными, добавляя общее погружение сайта или приложения. Даже небольшие визуальные изменения, такие как выпадающие меню, выигрывают от небольшой анимации. </li> </ul> <figure data-id= Графика движения для веб-сайта ручного инструмента "width =" 1000 "height =" 625 "/> <figcaption> Дизайн Яноша Ньюджто </figcaption></figure> <ul> <li> <strong> Микровзаимодействия </strong> —Движущаяся графика имеет множество преимуществ UX. Если у вас возникли проблемы с дизайном интерфейса, добавление анимированных микровзаимодействий может заполнить трещины в вашем UX. Например, добавление анимированного эффекта к призыву к действию может улучшить конверсию. </li> <li> <strong> Видео из социальных сетей </strong> — Сердце анимации — развлекать и рассказывать историю, поэтому иногда вам следует делать анимированные видео только ради них самих. Создание анимированного видео для социальных сетей может помочь мелким брендам заметиться и помочь крупным брендам выделиться в каналах своих подписчиков. </li> </ul> <figure data-id= HTML5-анимация с движущейся графикой "width =" 960 "height =" 960 "/> <figcaption> Дизайн: Мария Дзиадзюлия </figcaption></figure> <ul> <li> <strong> Реклама </strong> — Рекламные объявления также извлекают выгоду из привлекающей внимание анимации. Особенно рекламные баннеры, которым нужно как можно больше магнетизма, чтобы противостоять баннерной слепоте. С правильным стилем анимации вы обязательно преобразуетесь — просто спросите у Launchpeer, который доказал это своей анимированной рекламой в Instagram. </li> <li> <strong> Анимированные логотипы </strong>. В то время как ортодоксальная реклама диктует «никогда не меняйте свой логотип», современные эксперты по брендингу говорят, что анимация является исключением из правил. Адаптивные и анимированные логотипы — логотипы, которые меняются в зависимости от того, как и где они используются, — оказались более эффективными, чем статичные. </li> </ul> <p> Но пока мы только что говорили о теории использования анимации. Давайте рассмотрим конкретные типы анимации и то, как вы можете их использовать. </p> <h2> Типы анимации <br /> — </h2> <p> Начнем с объяснения, что «анимация» — это действительно общий термин для обозначения множества различных методов добавления движения к изображениям (или неодушевленным объектам). Хотя есть и другие, вот четыре из них, которые дизайнеры находят наиболее полезными: </p> <figure data-id= Традиционная рисованная анимация "width =" 328 "height =" 255 "/> <figcaption> Анимационный тест. Disney, via webneel. </figcaption></figure> <p> <strong> 1. Традиционная анимация </strong> — каждый кадр создается индивидуально, а затем запускается последовательно для иллюзии движения. Это исторический корень анимации, но его стоимость и временные обязательства являются причинами, по которым аниматоры разработали более современные методы. </p> <p> <strong> 2. Двухмерная векторная анимация </strong>. Более современное программное обеспечение поддерживает традиционную анимацию. Принцип тот же, но Flash и другие инструменты векторной анимации генерируют множество отдельных кадров на основе входных данных аниматоров. </p> <p> <strong> 3. 3D анимация (CGI) </strong> — совершенно новый подход к анимации, когда компьютеры генерируют все изображения, а аниматоры вводят движение и углы. Говорят, что анимация CGI ближе к марионеткам и традиционной анимации — аниматоры больше внимания уделяют управлению движениями и оставляют визуальные эффекты на усмотрение компьютера. </p> <p> <strong> 4. Остановить движение </strong> — отдельные кадры захватываются путем манипулирования и фотографирования реальных объектов; наиболее известный как глина, но его можно использовать не только с глиной, как вы можете видеть ниже. Несмотря на то, что такие же дорогостоящие и трудоемкие, как и традиционные анимации, конечные результаты часто имеют уникальный и бесценный вид. </p> <figure data-id= Love Goodly gif для социальных сетей "width =" 600 "height =" 600 "/> <figcaption> Design by agnes design </figcaption></figure> <p> Стиль, который вы выбираете, зависит от ваших целей, индивидуальность бренда и бюджет. Создание видеороликов, рассказывающих о стоп-движении, может помочь вам выделиться из моря общих, но создание интерфейса остановки-движения для вашего веб-сайта … возможно, не так уж много. </p> <p> К настоящему времени у вас должно быть представление о том, как анимация может принести пользу вашему бизнесу, и, возможно, даже несколько планов по ее использованию. Но анимации недостаточно — это должна быть хорошая анимация. И за советы о том, как сделать качественную анимацию, кого лучше спросить, чем аниматоров Диснея во время золотого века кинокомпании. </p> <h2> Анимация для дизайнеров: оцифровка 12 заповедей Диснея <br /> — </h2> <p> В 1981 году два ведущих аниматора Диснея Фрэнк Томас и Олли Джонсон написали то, что многие считают библией анимации, <em> Иллюзия жизни </em>. В этой книге собраны знания аниматоров Диснея с 1930-х годов, и они призваны дать аниматорам прочную основу для их творчества, затрагивая такие области, как копирование физической реальности, эмоционального выражения и дизайна персонажей. </p> <p> В основе книги лежат «12 основных принципов анимации». Хотя этот список лучших практик был предназначен для традиционной анимации, большинство из них остаются такими же сильными в цифровую эпоху… с несколькими обновлениями тут и там . </p> <h3> 1. Сквош и растяжка </h3> <p> Как объект реагирует, когда он касается другого объекта, — как он сжимается и растягивается, — сообщает о своей жесткости и рисует лучшую картину в сознании зрителя. Подумайте о том, как резиновый шарик давит при ударе о землю, а не как шар для боулинга <em> не </em>. </p> <p> Этот эффект может быть преувеличен для комического эффекта или реально поддержан для более реалистичных анимаций. Одно золотое правило для обоих стилей заключается в том, что общий объем объекта никогда не меняется, он просто перераспределяется. </p> <figure data-id= Анимированный GIF-файл облачной технологии для Microsoft "width =" 1000 "height =" 1000 "/> <figcaption> Имитируйте движение, заставляя фигуры сжиматься и растягиваться, как этот подпрыгивающий эффект, разработанный Мэрией Дзиадзюлией </figcaption></figure> <p> Этот принцип остается в силе и при работе с абстрактными объектами в цифровом пространстве, например, с прыгающими иконками. Вы можете выбрать любую точку на спектре между мультяшной и реалистичной, если вы учитываете эту реальную закон жизни природы. </p> <h3> 2. Предчувствие </h3> <p> В реальной жизни люди и вещи не просто движутся внезапно и без предупреждения. Прежде чем кто-то наносит удар, они заводят руку; прежде чем прыгнуть, они согнуть свои колени. Если ваша анимация происходит без ожидаемого действия, она может показаться слишком внезапной и резкой — другими словами, фальшивкой. </p> <p> Для веб-дизайна это означает дополнительный акцент на состояние перед анимацией. Например, если вы хотите анимировать нажатие кнопки, вам нужно спроектировать саму кнопку так, чтобы она была поднятой или «нажимной». </p> <h3> 3. Балетмейстер </h3> <p> Этот принцип заимствован из театра: постановка — это то, где актеры размещаются на сцене для максимального эффекта. С точки зрения аудитории, действия в передней части сцены кажутся более значительными, чем в задней части. </p> <p> Анимация, однако, более кинематографична, чем театр, поэтому этот принцип может также учитывать освещение и углы обзора. Для онлайн-анимации рассмотрите возможность добавления теней или смещения угла для достижения наилучшего вида. </p> <h3> 4. Прямой вперед против позы, чтобы позировать </h3> <p> Этот принцип относится к методу, используемому для анимации — начиная с начальной позы и создания последовательной, вместо создания ключевых поз во всей последовательности, а затем «заполняя» кадры между ними. </p> <p> В большинстве компьютерных анимаций используется подход позы к позе, поскольку компьютер генерирует «промежуточные элементы». Однако, если вы страдаете от блока дизайнера, прямой метод может помочь вам найти идеи. </p> <figure data-id= Анимация: Mbappé "The Gazelle" Running "width =" 1080 "height =" 1080 "/> <figcaption> Дизайн Kid Mindfreak </figcaption></figure> <h3> 5. Выполнить сквозное и перекрывающее действие </h3> <p> Они относятся к двум различным, но связанным принципам для захвата реализма. «Выполнение» имеет дело с инерцией и концепцией, согласно которой, когда тело в движении прекращает движение, некоторые части продолжают следовать. Если бегущая женщина в платье внезапно останавливается, части платья будут продолжать двигаться вперед благодаря импульсу. </p> <p> «Перекрывающееся действие» относится к тому, как разные части объекта движутся с разной скоростью — когда мы идем, наша левая сторона и правая сторона выполняют свои собственные функции и редко бывают идеально синхронизированы. </p> <p> Обе эти концепции следует учитывать и для абстрактных объектов. Это маленькие росчерки, как это, что можно добавить, что «кое-что лишнее,» и не в состоянии объяснить это делает вашу анимацию неестественными и роботизированная. </p> <h3> 6. Медленно и медленно </h3> <p> Это относится к техническому аспекту анимации. Для начала вы можете замедлить действие в анимации, добавив больше кадров, и наоборот. Поэтому, когда объект ускоряется и замедляется, вы хотите добавить больше кадров, а в середине действия вы хотите использовать меньше кадров. Это заставляет действие увеличиваться и уменьшаться. </p> <h3> 7. Arc </h3> <p> В попытке создать более естественное движение, анимируйте движение по траектории дуги. В любом случае, большинство объектов в реальном мире имеют тенденцию двигаться по дугам — рассмотрим Витрувианского Человека да Винчи. Создание движения вдоль траекторий дуги может показаться очевидным, но если вы забудете, ваша анимация будет казаться слегка «выключенной». </p> <p> Хорошая новость заключается в том, что некоторые программы для анимации позволяют вам самим устанавливать линии движения, поэтому с помощью правильного инструмента этот принцип легко применить. </p> <h3> 8. Вторичное действие </h3> <p> Этот принцип немного сложнее, чем другие, потому что он предполагает установление баланса. Идея состоит в том, что когда часть объекта движется, обычно движутся и другие части. Когда вы идете по улице, вы не смотрите прямо в глаза; Вы смотрите вокруг, киваете, моргаете и т. д. Эти второстепенные действия могут сделать вашу анимацию более реалистичной, но при этом оставляют их тонкими, чтобы они не отвлекали от основного действия. </p> <figure data-id= gif-анимация футболиста / футболиста "width =" 1080 "height =" 1080 "/> <figcaption> Design by maneka </figcaption></figure> <p> Этот принцип похож на« Follow Through "Выше, но вторичное действие не обязательно связано с основным действием. Вы можете увидеть и то, и другое в примере выше: вторичное действие — мигание субъекта, последующее — то, как его туловище слегка отскакивает, когда его ноги упал на землю. </p> <h3> 9. Сроки </h3> <p> Как мы уже говорили выше, добавление кадров к анимации замедляет ее, а удаление — ускоряет. Аниматоры должны особенно осознавать это как способ сообщать такие вещи, как вес, ловкость или даже личность в случае выражения лица. </p> <p> Другими словами, не оставляйте скорость анимации на волю случая. Подумайте о времени или реальных объектах и ​​соответственно увеличьте темп анимации. </p> <figure data-id= Загрузка анимации для приложения The Game Zone "width =" 750 "height =" 1334 "/> <figcaption> Design by ogld </figcaption></figure> <h3> 10. Преувеличение </h3> <p> Даже самые реалистичные анимации все еще остаются фантазиями … и именно поэтому мы их любим. Анимация позволяет художникам преувеличивать реальную жизнь ради эффекта — просто посмотрите на любой мультфильм Тома и Джерри. Не стесняйтесь использовать преувеличение, чтобы получить желаемое количество глупостей. Например, посмотрите на колеса на этом анимированном экране загрузки, не говоря уже об отдельных вагонах в колесе обозрения. Не преувеличивая, вы могли бы также снимать живое видео. </p> <h3> 11. Сплошной рисунок </h3> <p> Рисуя свое имя из сплошной геометрии, сплошной рисунок означает учет трехмерного пространства. Особенно когда речь идет о двухмерных вариантах анимации, может быть легко забыть обо всех трех измерениях (а некоторые мультфильмы игнорируют их напрямую, поэтому редкость видеть персонажей Симпсонов прямо на экране так нервирует). </p> <p> В частности, <em> Иллюзия жизни </em> предостерегает от создания персонажей, левая и правая стороны которых идентичны. Такие упущения могут рассеять погружение. </p> <h3> 12. Привлекательность </h3> <figure data-id= Логотип и анимированное вступление для певицы, автора песен и исполнителя Catherine Forte "width =" 540 "height =" 540 "/> <figcaption> Дизайн bubupanda </figcaption></figure> <p> Более художественный Если вы беспокоитесь, а не технические, вы хотите, чтобы субъекты вашей анимации были привлекательны, чтобы их стоило наблюдать. Это может быть что-то базовое, например, яркий цвет, или что-то более креативное, например, широкие глаза аниме. Дело в том, что никто не хочет смотреть анимацию о чем-то мягком. </p> <p> В приведенном здесь примере представлен очаровательный и уникальный стиль, который сочетает в себе реализм с мультфильмами, придавая ему привлекательность «я раньше такого не видел». Это также полезно для бизнеса, учитывая, что это логотип для реального человека. </p> <h2> Реализуйте свои проекты с помощью анимации <br /> — </h2> <figure data-id= 99designs анимация в социальных сетях "width =" 600 "height =" 600 "/> <figcaption> Дизайн Maryia Dziadziulia </figcaption></figure> <p> Независимо от того, что анимация является вовлеченным процессом. Рисование одна хорошо сделанная картина достаточно сложна, не говоря уже о тысячах, поэтому анимация — это дисциплина на протяжении всей жизни, а не работа художников на выходных. </p> <p> Но это дисциплина, которая стоит усилий. Мало того, что анимация имеет явные преимущества для бизнеса и дизайна, это поистине волшебная форма искусства, которая может перенести любой мирский проект на высоту воображения. Попробуйте анимацию, и вы удивитесь, как вам когда-либо удавалось сидеть неподвижно в мире статического дизайна. </p> <div class=

Хотите привести свой бренд в движение?
Найдите дизайнера для создания анимации сегодня!