Анимация в html реферат

Обновлено: 08.07.2024

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

Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии по CSS-анимациям, который обычно доступен по подписке. Его описание размещено в конце топика.

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

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

В сегодняшней статьей мы рассмотрим каждый из двенадцати этих принципов и обсудим их возможное применение при создании веб-страниц. Все исходники CSS и HTML можно скачать на Codepen.

Сплющивание и растяжение

Этот эффект наиболее полезен при создании физических объектов (например, люди, часы или подпрыгивающие мячи).

Ожидание

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

Этот эффект можно использовать для того, чтобы сделать движения объектов на веб-странице более реалистичными. Само ожидание может быть реализовано, к примеру, в качестве лёгкого покачивания, которое позволяет пользователям понять, что происходит и помогает им легче следить за перемещениями объекта по экрану.

Фокусировка

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

В терминах веба это означает использование полупрозрачного затемнения для определённого контента. Наложение более тёмного слоя на существующую страницу и последующее размещение контента на переднем плане фокусирует на нём всё внимание пользователей.

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

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

Следование и захлёстывание

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

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

В вебе это обычно достигается комбинированием плавных переходов или CSS-анимацией с разной скоростью проигрывания.

Плавное ускорение и замедление

Объекты редко переходят мгновенно от состояния покоя сразу к максимальной скорости. Обычно на то, чтобы разогнаться им требуется какое-то время — так же, как и для того, чтобы остановиться. Без постепенного ускорения и замедления движения выглядят неестественно.

Используя функции плавности можно создавать ускоряющиеся и замедляющиеся анимации и даже более сложные эффекты (с помощью функции cubic-bezier ).

Замедление и ускорение делает объекты более реалистичными, но есть и ещё один момент: в жизни они редко двигаются по прямой, как правило движение идёт по изогнутой дуге.

Добиться такого движения по дуге с помощью CSS можно парой разных способов. Один заключается в совмещении нескольких анимаций. К примеру, анимация подпрыгивающего мяча может быть сделана с помощью движений объекта вверх и вниз, и второе движение совмещено с передвижением ещё и вправо. Таким образом получится, что мячик скачет по экрану.

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

Второстепенное действие

Время выполнения

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

В вебе добиться этого можно простым изменением значений animation-duration и transition-duration .

С помощью изменения длительности анимации можно выделить её среди контента веб-страницы или во время взаимодействия с пользователем.

Преувеличение

Этот приём часто используется для привлечения внимания к определённым действиям и придании им большей драматичности в мультфильмах. Волк, который пытается кого-то укусить открывает рот гораздо шире, чем обычно — так гораздо страшнее и внушительнее.

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

Объём

При работе с объёмными объектами необходимо учитывать правила перспективы — люди живут в трёхмерном мире, поэтому если что-то выглядит не так, как они ожидают, это кажется неправильным.

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

Привлекательность

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

Заключение

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

А теперь про курс по анимации

Как мы уже сказали в начале статьи, в продолжении темы публикации мы окрываем для бесплатного доступа один из продвинутых курсов HTML Academy, который посвящён анимации.

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

ГЛАВА 1. Анимация на w eb-страницах

Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Можно создавать простую анимацию на Web-страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям. Причем никакой модификации HTML-кода, кроме добавления соответствующих сценариев, не требуется (конечно, если соответствующие элементы на странице уже созданы).

Такая анимация может служить двум задачам. В простейшем случае она позволит оживить Web-страницы, сделать их привлекательнее, завлечь посетителя на сайт. (Количество посетителей — это единственная мера качества того или иного интернет-ресурса.) Также она позволит создать учебные пособия, которые можно выложить в Интернет или распространять на компакт-дисках. К несчастью, Web-дизайнеры мало используют такую интересную возможность.

Было сказано, что, кроме написания сценариев, собственно реализующих анимацию, и привязки их к определенным событиям, никакой особой переделки HTML-кода не требуется. Однако написание сценариев — задача, довольно сложная сама по себе. Мало того, что для этого нужно знать сам язык программирования JavaScript, следует хорошо представлять себе, как работают внутренние механизмы программы Web-обозревателя и как получить к ним доступ, чтобы использовать потом в своих нуждах. Кроме того, необходимо знать, как реализуется анимация, за счет чего элемент страницы будет казаться движущимся. И, конечно же, нужно иметь художественный вкус и — обязательно! — чувство меры.

Хорошо! С художественным вкусом и чувством меры проблем нет. Но есть проблемы с JavaScript и внутренними механизмами Web-обозревателя. Точнее сказать, мы не знаем ни того, ни другого. И все же очень хотим создать на своих страницах какую-нибудь, хотя бы простенькую, анимацию. Надо воспользоваться Dreamweaver. Он предоставляет очень удобный способ создания анимированных элементов без углубления в JavaScript и темные недра Web-обозревателя. Нужно просто указать траекторию движения того или иного элемента, после чего задать некоторые параметры — и сразу же получается результат. Dreamweaver сам создает необходимые JavaScript-сценарии и помещает их в HTML-код страницы.

Введение в Web-сценарии

Зачем нужны сценарии? Чтобы преодолеть ограничения HTML. He все, конечно, — только одно.

Так в чем же ограничивает нас HTML? Зачем понадобилось придумывать еще один язык? Нельзя ли обойтись без него?

В общем, можно. Для таких страниц хватит и "чистого" HTML. А как только вы захотите "научить" страницу взаимодействовать с пользователем, то есть сделать интерактивной, вы сразу упретесь в непреодолимую стену.

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

Собственно, HTML — и не язык программирования, а язык описания Web-страниц — и не более. Он описывает, как должна выглядеть информация в окне Web-обозревателя, только и всего. Причем, этот внешний вид жестко стандартизирован; Web-дизайнер, как уже понятно, значительно сильнее ограничен в своих возможностях, чем дизайнер-полиграфист. Особых вольностей на Web-страницах он не сделает. (Фреймы, таблицы разметки и каскадные таблицы стилей CSS снимают многие ограничения, но не все.)

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

Можно сказать, что любая Web-страница и так является интерактивной, так как реагирует на щелчки по гиперссылкам. Но это не интерактивность, а стандартное поведение, заданное HTML. Интерактивность - это когда в ответ на перемещение курсора мыши за ним "бежит" картинка, когда при щелчке на фотографии внизу появляется ее описание, когда прямо на страничке "тикают" цифровые часы. Вот это настоящая интерактивность: в первом и втором случаях страница реагирует на действия пользователя, а в третьем — на события внешней среды. (Здесь под внешней средой подразумевается операционная система; работающий в ней системный таймер заставляет идти нарисованные часы.) И обычный HTML не может ее обеспечить.

Чтобы преодолеть этот недостаток "чистого" HTML, были придуманы два пути.

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

Мы хотим сами задавать поведение элементов страниц в ответ на действия пользователя. Мы хотим сами контролировать их поведение, держать все нити управления в своих руках. HTML их нам предоставить не может; ограничения, обусловленные самой его природой, — стена, преодолеть которую невозможно. Однако, если стену нельзя перепрыгнуть, ее можно обойти.

Второй путь — внедрение в HTML-код особых программ, написанных на "классических" языках программирования, то есть описывающих поведение элементов. Такие программы называются сценариями (или скриптами от англ, script — сценарий). (Почему они так называются? Можете считать, что эти программы описывают сценарии поведения какого-нибудь элемента при наступлении того или иного события.) Эти программы помещаются в HTML-код с помошыо особого, специально для такого случая стандартизированного комитетом WWWC парного тега . Web-обозреватель, "расшифровывая" такой HTML-код, читает сценарии и либо выполняет их сразу же, либо "откладывает в долгий ящик", чтобы выполнить после наступления какого-либо события.

Именно после "открытия" второго пути в интерактивность всемирная паутина стала "живой", а многие Web-дизайнеры стали по совместительству еще и Web-программистами.

Для того чтобы писать сценарии, были специально созданы несколько языков программирования, называемых языками написания сценариев (или скриптовыми языками). Наибольшую популярность из них получили всего два: JavaScript и VBScript.

Язык JavaScript был разработан в фирме Netscape на основе известного "классического" языка программирования Java. Поэтому впервые поддержка языка JavaScript появилась именно в Web-обозревателе Netscape Navigator 2.0. Microsoft Internet Explorer начал поддерживать JavaScript с версии 3.0. Кроме того, в фирме Microsoft был разработан свой диалект JavaScript под названием JScript, отличающийся от "прародителя" только наличием нескольких новых команд. Поэтому эти два языка очень часто не различают, называя их одинаково — JavaScript.

Язык VBScript был разработан в Microsoft в качестве "адекватного ответа" на JavaScript. Этот язык поддерживается только Internet Explorer, начиная с версии 4.0. Из-за своей "несовместимости" VBScript не получил большого распространения в Web, но завоевал прочные позиции в серверном программировании, а именно, написании активных серверных страниц Microsoft ASP (см. главу 15). В настоящее время для написания Web-сценариев он практически не применяется.

Кроме JavaScript и VBScript, были попытки использования для написания Web-сценариев языков Perl, Python и некоторых других. Однако сколько-нибудь широкого распространения эти языки не получили.

В настоящее время практически везде для написания сценариев применяется язык JavaScript. Он достаточно прост для изучения и предоставляет разработчику весьма обширные возможности. Кроме того, написанные на нем программы невелики по объему, что актуально в эпоху безраздельного господства медленных каналов связи.

Для поддержки языка сценариев используется так называемый интерпретатор (или виртуальная машина) языка. Web-обозреватель выделяет сценарии из HTML-кода страницы и передает его на выполнение интерпретатору. Последний анализирует код сценариев, расшифровывает их и выполняет, передавая результат выполнения обратно Web-обозревателю.

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

Языки сценариев называются интерпретируемыми, так как написанные на них программы расшифровываются при каждом выполнении. Этим они коренным образом отличаются от компилируемых языков (C++, Pascal, Java и многих других). Написанные на компилируемых языках программы расшифровываются однократно и преобразуются в машинный код, который выполняется самим процессором компьютера, без помощи интерпретатора. Для такого преобразования используются специальные программы, называемые компиляторами. Конечно, откомпилированный код выполняется значительно быстрее, но специфика Web-программирования такова, что в нем могут применяться только интерпретируемые языки.

Ну, вот и все о языках программирования, на которых пишутся Web-сценарии. Теперь поговорим о том, как эти Web-сценарии выполняются.

Средства поддержки анимации 2D и 3D

. , все чаще присутствует на интернет - страницах. Также анимация очень широко используется на телевидении. Например . на веб-сайтах векторной анимации. Без Adobe Flash Player браузеры будут некорректно отображать веб-страницы .

Проектирование учебного мультимедийного комплекса

. современных компьютеров и Интернет (графических вставок, анимации, звука если необходимо и др.). - Наличием . увидеть на любой Интернет - странице. Так как ссылка на веб-страницу – это ссылка на внешнюю веб-страницу, то .

Анализ эффективности рекламы ПО ХимСтальКомплект в сети Интернет (2)

. объект рекламы, формировать и продвигать имидж. Анимация баннера привлекает внимание и позволяет с помощью . посещаемых страниц веб-сайта. Обычно баннеры служат гипертекстовыми ссылками на веб-сайт рекламодателя, или на веб-страницы .

Разработка Web-сайта ООО РПК Август на платформе CMS Joomla

. анимацию, что делает баннер более эффектным, привлекающим внимание и информативным. Баннер помещается на странице . быстро создавать динамические веб-страницы, максимально удобные для . Созданные с использованием PHP веб-страницы обрабатываются так же, как .

Microsoft Word-средства создания Web-cтраниц

. . Эти компоненты можно добавлять только на веб-страницы, размещенные на веб-серверах с подходящим программным обеспечением . (Active Graphics) – отображает все рисунки с анимацией, содержащиеся в теме. - Фоновый рисунок (Background .

Много лет назад веб-сайты были больше ориентированы на отображение информации для пользователей, не задумываясь о том, как создать визуальный опыт, чтобы сделать сайт более удобным для пользователя. За последние несколько лет многое изменилось: владельцы веб-сайтов теперь создают визуальные эффекты, чтобы удерживать пользователей на своем сайте.

Разработчики обнаружили, что люди склонны уделять больше внимания движущимся объектам из-за нашего естественного рефлекса замечать движение.

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

Примечание. Эффективная анимация позволяет установить прочную связь между пользователями и содержимым на экране.

Что такое веб-анимация?

Веб-анимация в основном просто заставляет вещи двигаться в интернете.

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

Когда все сделано правильно, анимация может добавить ценное взаимодействие, улучшить эмоциональное восприятие пользователей и добавить индивидуальности вашему интерфейсу.

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

В этой статье я покажу вам некоторые анимации, которых можно добиться с помощью HTML, CSS и JavaScript.

Какие свойства CSS можно анимировать?

Одно дело - знать, как анимировать, а другое - знать, что анимировать.

Некоторые свойства CSS можно анимировать, что означает, что их можно использовать в анимации и переходах.

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

Мы можем анимировать такие свойства, как фон, цвет фона, цвет границы, фильтр, гибкость и шрифт.

Вы можете получить полный список всех свойств, которые вы можете анимировать здесь.

Различные виды анимации

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

Советы по инструментам

Всплывающие подсказки - это текстовые метки, которые появляются, когда пользователь наводит курсор, фокусируется на элементе или касается элемента.

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

Hover

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

Это полезный способ показать, какие элементы доступны для нажатия.

Загрузка

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

Анимация в меню играет большую роль в UI / UX. Меню - это типы анимации, которые удивляют пользователя и делают их интерактивными, позволяя им видеть весь контент на странице.

Примечание: есть много других анимаций, таких как переход страницы, параллакс и т. д.

CSS анимация

До сих пор мы видели так много разных видов анимации, которые можно реализовать с помощью CSS, но я не объяснил, как это делается.

CSS позволяет нам анимировать элементы HTML без использования JavaScript.

Чтобы использовать CSS-анимацию, вы должны сначала указать несколько ключевых кадров для анимации. Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.

Для правильного понимания я объясню основные свойства, которые мы будем использовать.

CSS-анимация состоит из двух основных строительных блоков:

@keyframes

keyframes используются для обозначения начала и конца анимации (а также любых промежуточных шагов между началом и концом).

Он состоит из 3 основных вещей:

Название анимации: это просто имя, данное анимации, как показано на рисунке выше.
Этапы анимации: указывает этапы анимации. В основном это представлено в процентах, как показано на рисунке выше.
Стиль анимации или свойства CSS: это свойства, которые, как ожидается, изменятся во время анимации.

Свойства анимации

Как только @keyframes определено, свойства анимации должны быть добавлены для того, чтобы ваша анимация функционировала.

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

Свойства анимации добавляются к селекторам (или элементам) CSS, которые вы хотите анимировать.

Два свойства очень важны, чтобы заметить, как действует анимация. Они являются animation-name и animation-duration .

Есть и другие свойства, например:

animation-timing-function : определяет кривую скорости или темп анимации. Вы можете задать синхронизацию со следующими предопределенными параметрами синхронизации: ease , linear , ease-in , ease-out , ease-in-out , initial , inherit .
animation-delay : Это свойство определяет, когда начнется анимация. Значение определяется в секундах (с) или миллисекундах (мс).
animation-iteration-count : Это свойство указывает, сколько раз должна воспроизводиться анимация.
animation-direction : Это свойство CSS устанавливает, должна ли анимация воспроизводиться вперед, назад или поочередно вперед и назад между воспроизведением последовательности вперед и назад.
animation-fill-mode : Это свойство определяет стиль для элемента, когда анимация не воспроизводится (до начала, после окончания или и то, и другое).
animation-play-state : Это свойство указывает, запущена или приостановлена анимация.

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

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

Все свойства анимации добавляются в одно и то же свойство animation: в следующем порядке:

Примечание. Для правильной работы анимации необходимо соблюдать правильный порядок сокращений и указывать по крайней мере первые два значения.

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

Я решил добавить к рубашке очень маленькую анимацию, чтобы она могла привлечь внимание пользователей, как только они перейдут по этой ссылке.

Все, что я сделал, это применил свойство transform и перевел его по вертикали (вверх и вниз). Вы можете не торопиться, чтобы проверить код.

Почему именно JavaScript?

По мере прочтения вы можете начать спрашивать себя, почему в эту тему включен JavaScript. Теперь вы поймете почему!

Итак, почему именно JavaScript?

Мы используем JavaScript для управления анимацией CSS и делаем ее еще лучше с помощью небольшого кода.

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

С помощью CSS я могу заставить их дрожать:

В приведенном выше коде поле ввода будет перемещаться взад и вперед (слева направо) на 5 пикселей, а затем, наконец, вернется в исходное положение на 100% (мы используем свойство преобразования CSS для достижения этого, как показано в приведенном выше коде).

Затем мы добавляем свойства анимации к ошибке селектора CSS:

Следующее: как я узнаю, пусты ли эти поля и пользователь нажимает кнопку отправки?

Здесь на помощь приходит JavaScript. Мы используем JavaScript для управления нашей анимацией.

Шаг 1: проверьте, была ли нажата кнопка отправки формы.
Шаг 2: Выберите все поля формы.
Шаг 3: Убедитесь, что поля ввода пусты.
Шаг 4: Добавьте селектор CSS с помощью свойства JavaScript classList .

Примечание. Я добавил комментарии к коду JavaScript и CSS во встроенном коде, чтобы вы могли легко понять код.

Как только форма будет отправлена со всей необходимой информацией, некоторые пузырьки начнут скользить вверх. Это было достигнуто с помощью CSS-анимации.

Вывод

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

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

Областное государственное бюджетное

профессиональное образовательное учреждение

"Ульяновский педагогический колледж"

Преподавание в начальных классах очное обучение

студентка 1 курса 103 группы

Ипеева Фаина Сергеевна

Кузнецова Галина Александровна

Компьютерная графика 4

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

Компьютерная анимация 8

Программное обеспечение для создания компьютерной анимации 12

Список литературы 14

Цель работы: Изучить виды анимации. Познакомится с программным обеспечением для создания компьютерной анимации

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

Используя свободное программное обеспечение создать анимированный баннер для школьного сайта.

План изучения теории

Компьютерная графика. Виды компьютерной графики.

Компьютерная анимация. Виды компьютерной анимации. Форматы (расширение) файлов содержащие анимацию.

Программное обеспечение позволяющее создать компьютерную анимацию:

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

Основные области применения

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

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

Иллюстративная графика - это произвольное рисование и черчение на экране компьютера.

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

ВИДЫ КОМПЬЮТЕРНОЙ ГРАФИКИ

Двухмерная графика

Векторная графика

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

Изображение в векторном формате даёт простор для редактирования. Изображение может без потерь масштабироваться, поворачиваться, деформироваться, также имитация трёхмерности в векторной графике проще, чем в растровой. Дело в том, что каждое такое преобразование фактически выполняется так: старое изображение (или фрагмент) стирается, и вместо него строится новое. Математическое описание векторного рисунка остаётся прежним, изменяются только значения некоторых переменных, например, коэффициентов. При преобразовании растровой картинки исходными данными является только описание набора пикселей, поэтому возникает проблема замены меньшего числа пикселей на большее (при увеличении), или большего на меньшее (при уменьшении). Простейшим способом является замена одного пикселя несколькими того же цвета (метод копирования ближайшего пикселя: Nearest Neighbour). Более совершенные методы используют алгоритмы интерполяции, при которых новые пиксели получают некоторый цвет, код которого вычисляется на основе кодов цветов соседних пикселей.

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

Растровая графика

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

В растровом виде представимо любое изображение, но этот способ хранения имеет свои недостатки: больший объём памяти, необходимый для работы с изображениями, потери при редактировании.

Фрактальная графика

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

Фрактал — объект, отдельные элементы которого наследуют свойства родительских структур. Поскольку более детальное описание элементов меньшего масштаба происходит по простому алгоритму, описать такой объект можно всего лишь несколькими математическими уравнениями.

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

Трёхмерная графика

В трёхмерной компьютерной графике все объекты обычно представляются как набор поверхностей или частиц. Минимальную поверхность называют полигоном. В качестве полигона обычно выбирают треугольники.

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

Любой полигон можно представить в виде набора из координат его вершин. Так, у треугольника будет 3 вершины. Координаты каждой вершины представляют собой вектор (x, y, z). Умножив вектор на соответствующую матрицу, мы получим новый вектор. Сделав такое преобразование со всеми вершинами полигона, получим новый полигон, а преобразовав все полигоны, получим новый объект, повёрнутый/сдвинутый/масштабированный относительно исходного.

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

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

Анимация (от фр. animation - оживление, одушевление ) - вид киноискусства, в котором фильм создается путем покадровой съемки рисунков или кукольных сцен. У анимации есть своя история, так создателем технологии выполнения мультфильмов кадр за кадром считается Э.Рейно. Но наиболее широкое распространение анимация получила во времена Уолта Диснея. Принципы анимации, которые он использовал, стали настолько результативными, что они до сих пор считаются основой основ для мультипликатора.
Существует несколько видов анимации: Традиционная, Стоп-кадровая, Компьютерная. Компьютерная и Традиционная - по-сути, одно и то же, только Традиционная рисуется руками на бумаге, а Компьютерная - на планшете, в какой-либо программе. Анимация - сложный процесс, занимающий очень много времени. Наиболее трудоемкой в исполнении считается Традиционная анимация, поэтому она сейчас используется очень редко. В Компьютерной анимации все намного проще.

Так же компьютерную анимацию можно разделить на виды: Flash-анимация, покадровая классическая, 3D анимация.

Flash-анимация

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

Процесс создания мультфильмов состоит из нескольких этапов:

Первый этап - идея и сценарий;

Третий - Создание аниматика (грубый макет мультфильма. Уже на основе аниматика можно судить о происходящем действии, В аниматике уже присутствует анимация, но движения персонажей могут быть изменены на следующем этапе),

Четвертый и самый продолжительный – Анимация;

Пятый - чистовая обрисовка;

Шестой - монтаж и сборка фильма.

Покадровая компьютерная анимация

Основные виды компьютерной анимации: покадровая анимация, анимация движения объектов и анимация формы. Покадровая анимация (мультипликация) состоит в прорисовке всех фаз движения. Все кадры при этом являются ключевыми. Автоматическая анимация движения или формы заключается в рисовании ключевых кадров, соответствующих основным фазам или этапам движения, и последующем автозаполнении промежуточных кадров.

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

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

Трёхмерная компьютерная анимация

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

Область применения компьютерной анимации

Хранение компьютерной анимации

Компьютерная анимация может храниться в универсальных графических файлах (например, в формате GIF) в виде набора независимых изображений, либо в специализированных файлах соответствующих пакетов анимации (swf, 3ds Max, Blender, Maya и т. п.) в виде текстур и отдельных элементов, либо в форматах, предназначенных для просмотра (FLIC (англ.)) и применения в играх (Bink). Также, анимация может сохраняться в форматах, предназначенных для хранения видео (например, AVI, MPEG-4).

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ДЛЯ СОЗДАНИЯ КОМПЬЮТЕРНОЙ АНИМАЦИИ

Adobe Photoshop — является платной программой. Основное назначение программы Adobe Photoshop – создание фото реалистических изображений, работа с цветными сканированными изображениями, ретуширование, цветокоррекция, коллажирование, трансформации, цветоделение, создание анимированного покадрового изображения и другое.

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

Adobe Flash – мультимедийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций. Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео- и аудиозаписей. Adobe Flash Professional — является платной программой

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

Бесплатная программа Toon Boom Animation-ish предназначена для создания анимации, поздравительных открыток, web-сайтов, презентаций и школьных проектов. Благодаря несложному интерфейсу подходит для школьников. Toon Boom Animation-ish – простая программа для создания мультипликации.

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

Шауцукова, Л. З. Учебное пособие для 10-11 кл. общеобразоват. учреждений / Л. З. Шауцукова. – М.: Просвещение, 2008. – 416 с.

Кричалов, А. А. Компьютерный дизайн. Учебное пособие / А. А. кричалов. – Мн.: СТУ МГМУ, 2008 г. – 154 с.