Css3 — Помогите определиться с технологией создания WEB-анимации


Содержание

CSS3 Анимация: 10 Впечатляющих примеров

Одни из лучших примеров CSS3 анимации.

Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.

01. One Shared House

One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить.

Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю.

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

02. Type Terms

Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью.

“Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood).

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

03. Waaark

Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики.

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

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

04. Periodic table

Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов.

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

Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js, чтобы перенести эффекты из демо в игровой движок famo.us.

Кабелло также опубликовал видео, демонстрирующее работу демо на iPad 2:

05. CSS Creatures

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

CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд!

06. AT-AT Walker from Star Wars

Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует.

07. GT America

Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте.

GT-America назван в честь страны, в которой черпал вдохновение, — Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта.

08. Caaaaaaaat

Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами!

09. Greenwich Library

Обычно сайты публичных услуг не отличаются красотой и удобством, но сайт бибилиотеки Гринвича – исключение из правил. Дизайн этого сайта является результатом двух лет исследований, тестирования и разработки.

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

10. Interactive album covers

Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно: работает только в Google Chrome.

Урок. CSS анимация

Урок по css анимации позволяет научиться создавать анимированные изображения без использования Flash. Эта технология постепенно вытесняет создание рекламных и других анимированных баннеров средствами Flash. В уроке рассказывается, как создать полноценный анимированный рекламный баннер средствами языка CSS3.

Для выполнения урока необходимо предварительно скачать исходные материалы

1. Создайте папку для выполнения упражнений.

2. Скопируйте в нее папку img со всеми необходимыми материалами.

1. Переходы

Переходом в css анимации называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.

transition: [свойство,] длительность;

transition: all 1s; //для всех свойств длительность перехода 1с

transition: background 0.5s; //для фона длительность перехода 0,5с

Пример. При наведении на элемент div с классом round-to-circle, он из квадрата преобразуется в круг, у него изменяется цвет фона и непрозрачность становится равной 1. Все это происходит плавно, в течение 0.3с, т.к. мы задали свойство transition. Если это свойство не задано, то смена свойств будет происходить моментально.

1. Реализуйте этот пример. Сохраните файл под именем 01_perehod.html

2. Измените значение в секундах до 1.5 секунд. Обновите страницу. Оцените разницу.

2. Трансформация

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

2.1 Функция поворота – rotate()

Поворачивает элемент на заданный угол

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

transform: rotate(90deg) //поворот по часовой на 90 градусов

transform: rotate(-180deg) //поворот против часовой на 180 градусов

Пример. При наведении на изображение, оно плавно поворачивается на 60 градусов по часовой стрелке.

1. Реализуйте этот пример. Сохраните под именем 02_rotate.html

2. Изменяйте значение в секундах. Оцените разницу.

2.2 Функция масштабирования – scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Здесь: sx — изменение масштаба по оси X; sy — изменение масштаба по оси Y. Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает. Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны: scale(1.2) соответствует scale(1.2, 1.2).

transform: scale(3, 1]); //увеличение ширины в 3 раза

transform: scale(1, 0.5); //уменьшение высоты в 2 раза

transform: scale(1.5); //увеличение размера в 1,5 раза

Пример. Уменьшим изображение до 80% от его первоначального состояния –scale(0.8). При наведении на изображение восстановим его прежнее состояние – scale(1).

1. Реализуйте этот пример. Сохраните файл под именем 03_scale.html

2. Изменяйте значение в секундах и величину трансформации. Оцените разницу.

2.3 Функция наклона – skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax[, ay])

Здесь: ax — угол наклона по оси X; ay — угол наклона по оси Y. Если значение ay не указано, то оно считается равным 0: skew(30deg) соответствует skew(30deg, 0).

Положительное значение угла наклоняет влево, отрицательно значение – вправо

transform: skew(30deg, 60deg])

transform: skew(60deg, 30deg])

transform: skew(30deg) РАВНОСИЛЬНО transform: skew(30deg, 0)

Пример. В этом примере мы задали наклон 30 градусов для элемента p. Но нам нужен наклон только для фона параграфа, а сам текст должен быть выровнен прямо, поэтому мы положили текст внутри элемента span и задали ему компенсирующий наклон.

Реализуйте этот пример. Сохраните под именем 04_skew.html

2.4 Функция сдвига – translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx[, ty])

Здесь: tx — значение смещения по оси X в пикселях, процентах или других единицах CSS; ty — смещение по оси Y. Если значение ty не указано, то оно считается равным 0: translate(30px) соответствует translate(30px, 0).

transform: translate(30px, 0]) РАВНОСИЛЬНО transform: translate(30px)

transform: translate(0, -30px]) //сдвиг вверх на 30px

transform: translate(60px, 30px])сдвиг вправо на 60px и вниз на 30px

transform: translate(-2%]) //сдвиг влево на 2%

1. Файл 04_skew.html сохраните под новым именем 05_translate.html

2. Кроме масштабирования добавим перемещение вниз на 30px. Для этого изменим стиль .tovar:hover так:

Теперь при наведении на изображение оно не только масштабируется, но и сдвигается вниз на 30px

2. css анимации

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

Создание css анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства, на каком шаге будут анимированы.

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.

После объявления правила @keyframes, мы должны ссылаться на него в селекторе в свойстве animation.

Синтаксис, сокращенная запись:

h1 <
animation: название_анимации длительность [количество_повторений];
>

  • название анимации
  • длительность
  • количество повторений. Если не указано количество повторений – по умолчанию 1. Можно указывать любое другое число, либо использовать ключевое слово infinite – бесконечное количество повторений.

Таким образом для задания css анимации элемента (селектора), полная запись будет выглядеть следующим образом:

h1 <
animation: название_анимации длительность [количество_повторений]; /*в свойстве селектора h1 объявляем анимацию*/
>

У css анимации есть и другие свойства. Например, задержка анимации, направление и т.д. Подробнее можете узнать на сайте: https://webref.ru/css/animation

Пример. Применим к классу sun анимацию rotate длительностью 3 секунды с бесконечным количеством повторений.

Реализуйте пример с крутящимся солнышком. Сохраните под именем 06_sun.html

Пример. Появление текста слева, справа и посередине.

Реализуйте пример с движущимся текстом. Сохраните под именем 07_text.html

Повторяющаяся анимация с плавной сменой итераций

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

Задание 8 1. Реализуйте нижеприведенный код. Сохраните файл под именем 08_media.html

2. Просмотрите результат. Видно, что после плавного исчезновения текста он снова появляется, но достаточно резко. Это происходит потому, что в стилях в конце итерации непрозрачность равна нулю (строка 18 to ), а в начале итерации непрозрачность равна 1 (строка 16 from ). Происходит резкая смена от полной непрозрачности к полной яркости.

3. Внесите изменения в эти свойства следующим образом – установите непрозрачность 0 в начале итерации (свойство from) и добавьте еще один временной промежуток 40% с непрозрачностью 1 и в результате появление текста в начале итерации также будет плавным.

Итоговое задание

Содержание баннера взято с сайта http://wunder-digital.kz/medijnaya-reklama/

1. Просмотрите css анимацию itog.gif (рис. 15).

Рис. 15. Файл itog.gif

2. Откройте в браузере файл zadanie.html. Как видите, пока анимация не работает.

3. Анимируйте шаблон zadanie.html, для этого напишите стили для анимаций и примените их к соответствующим элементам в соответствии с файлом itog.gif:

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

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

Творческое (контрольное) задание

Создать рекламный баннер средствами HTML и CSS3

Требования к баннеру

1. Размер не менее 1000px по ширине.

2. Наличие фонового изображения, заголовка и рекламного текста.

3. Должны быть использованы следующие свойства css анимации

  • transition
  • rotate
  • scale
  • skew
  • перемещение текста (или изображений)

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

На основании приведенных выше требований Вам необходимо предварительно подобрать материалы (фото, тексты), продумать сценарий анимации.

15 инструментов HTML5 анимации [Обновлено: Октябрь’17]

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

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

Если вы готовы, мы начинаем.

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

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

Canvas с англ. означает холст, потому вы можете думать об этом элементе, как о самом настоящем холсте для живописи. Также как профессиональные художники пишут сложные картины, Canvas позволяет создавать вещи, которые ранее было невозможно сделать. Использование 2 D форм и образов стало гораздо более простым и это все благодаря Canvas.

Чтобы вы понимали, о чем идет речь, просто взгляните на одну из компьютерных игр. Однако справедливости ради хотим сказать, что технология HTML5 была популярна еще до того, как Стив Джобс обнародовал свои мысли по этому поводу.

Показ любой анимации или интерактивности в пределах элемента Canvas почти всегда затрагивает JavaScript. Однако JavaScript, как правило, требует значительной загруженности процессора при воспроизведении элементов анимации.

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

Из-за постоянно развивающихся технологий современные браузеры поддерживают анимацию и интерактивный контент без необходимости установки дополнительных плагинов, например, таких, как Flash. Вместо этого они используют комбинацию JavaScript, CSS3, HTML5.

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

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

А теперь давайте рассмотрим более детально каждый из инструментов для анимации HTML5.

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

Инструмент, с помощью которого вы сможете преобразовать изображения и увеличить скорость его загрузки на сайте. Обрабатывает картинки, используя при этом инструменты jQuery, CSS3 и HTML5.

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

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

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

HTML 5 инструмент для создания эскизов и набросков. Полезная штука для веб-дизайнеров.

Google Web Designer позволяет создавать привлекательные интерактивные проекты, основанные на HTML5, которые прекрасно работают на любом устройстве. Редактор имеет два режима создания анимации (быстрая и расширенная). В режиме быстрой анимации вы сможете создавать последовательную анимацию, а редактор самостоятельно будет заботиться о кадрах. В расширенном режиме у вас есть возможность анимировать отдельные элементы, используя слои.

Мощный, но простой в освоении редактор. Теперь вы сможете легко и просто создать хорошую анимацию. Рекомендуется для новичков и экспертов. Инструмент прекрасно работать на телефонах и планшетах. Анимация автоматически масштабируется под любой размер веб-браузера. Hippo Animator при необходимости может использовать векторную графику. Существует возможность добавить MP4, YouTube или Vimeo видео. Инструмент имеет встроенный JavaScript. Чтобы добавить анимацию на страницу своего сайта, вам достаточно будет одной строки кода.

Hippo Animator имеет встроенный редактор изображений, при помощи которого можно создавать слайд-шоу и многое другое.

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

Это библиотека для использования в JavaScript. Поддерживает анимацию и стили CSS. Очень мощный инструмент для создания сложной анимации.

Еще один инструмент для создания видео, анимации и графики в реальном времени. Позволяет отрисовывать фигуры в векторе и анимировать их.

Работая с данным редактором, легко можете использовать свой предыдущий опыт работы с подобными инструментами. Все, что вы создаете, будет доступно для предварительного просмотра. Blysk имеет удобный и интуитивно понятный WYSIWYG редактор, с ним можно работать на любом устройстве, он позволяет создавать анимацию с использованием CSS3, JavaScript и HTML5. Установка данного инструментария не требуется.

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

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

Надеемся, вы подобрали для себя один из инструментов для создания анимации, которые мы представили вашему вниманию выше. Очень ждем ваших отзывов, какой же инструмент вам показался наиболее эффективным? А может вы уже давно пользуетесь инструментами HTML5 и знаете все секреты эффективной работы с ними. Обязательно поделитесь этой информацией с нашими читателями в комментариях.

75 инструментов веб-анимации, которые вам нужно испробовать

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

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

1. Animate.css

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

2. Magic Animations

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

Цукерберг рекомендует:  Брендинг визуальная коммуникация. Разработка визуального языка бренда

3. Bounce.js

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

4. AnijS

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

5. Snabbt.js

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

6. Kute.js

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

7. Velocity.js

Velocity.js — непрезентабельный на первый взгляд движок. Однако в его арсенал входят все обычные типы анимации, он быстр и независим от jQuery.

8. Lazy Line Painter

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

9. SVG.js

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

10. Motion UI

В отличие от предыдущих примеров, при создании интересных CSS-анимаций Motion UI опирается на Sass. Инструмент содержит массу заранее заданных настроек и эффектов, которые можно применить к любому компоненту HTML. Все работает во всех популярных браузерах, кроме IE9.

11. Wait! Animate

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

12. Dynamics.js

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

13. Choreographer.js

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

14. Anime.js

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

15. Mo.js

Mo.js быстр, интуитивно понятен и прост. Он позволяет создавать вовлекающие тропинки, неожиданные диалоговые трансформации, пузыри, взрывные эффекты и многое другое.

16. Sequence.js

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

17. Shifty

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

18. It’s Tuesday

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

19. CSS Animate

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

20. Vivus.js

Vivus.js поддерживает три типа анимации: задержка, синхронизация и открытие одного изображения за другим, — и позволяет создавать плавные и естественные векторные анимации, так что загрузка контента станет приятным опытом.

21. Bonsai.js

Bonsai.js — это библиотека JavaScript для серьезной работы с графикой, с простым API и визуализацией SVG. Используйте онлайн-редактор, чтобы протестировать инструмент, познакомиться с его структурой и даже загрузить некоторые примеры, с которых можно начать работу.

22. GSAP by GreenSock

GSAP — это платформа для профессиональных аниматоров. На ней представлено множество плагинов и утилит, отвечающих за разные типы анимации: BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite и другие.


23. Popmotion

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

24. Tween.js

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

25. Hover.css

Библиотеку Hover.css можно разделить на несколько главных категорий: 2D-трансформации, фоновые трансформации, анимация иконок, трансформации границ, теней и света, пузыри с текстом и завитки. Применяйте эти эффекты к любым элементам своего дизайна без ограничений.

26. Transit

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

27. Rocket

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

28. Animo.js

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

29. Shift.css

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

30. CSShake

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

31. Saffron

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

32. CSSynth

CSSynth — это маленький редактор, в котором вы насладитесь красотой синхронизации. Анимация основана на серии квадратов, количество которых вы можете задать на панели слева. Выберите эффект, задайте задержку и скачайте результат в формате CSS или SCSS.

33. Ceaser

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

34. Morf.js

Если вам нужно немного больше, чем дает Ceaser, вам стоит попробовать Morf.js. Он предлагает переходы, основанные на полностью настраиваемых функциях затухания, и содержит почти 40 готовых вариантов, которые легко адаптировать под свои нужды.

35. Voxel.css

Voxel.css создан специально для 3D-рендеринга, и простота его установки и использования позволит освоить 3D CSS даже новичкам. Библиотека содержит 4 важных категории: сцена, мир, редактор и воксел, — которые помогут создавать игры и наслаждаться работой.

36. Repaintless.css

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

37. MixItUp

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

38. Wallop

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

39. Ramjet

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

40. jQuery DrawSVG

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

41. Animatic.js

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

42. Move.js

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

43. Eg.js

Eg.js — это тщательно подобранная коллекция различных эффектов и динамических элементов, призванных улучшить взаимодействие с интерфейсом. В ее состав входит 8 мощных компонентов для основных задач и 6 главных методов для других случаев.

44. GFX

GFX — это интересная библиотека 3D-анимации для создания программируемых анимаций на CSS3. Она работает с jQuery, так что добиться желаемых результатов довольно просто. Вы можете «поиграть» с масштабированием, вращением, переходами и прочими эффектами.

45. Stylie

Хотя Stylie и считается развлекательным инструментом, он определенно способен впечатлить вас своими возможностями. Центр управления содержит 4 вкладки, позволяющие настраивать ключевые кадры и затухание, экспортировать варианты и HTML, то есть легко создавать сложные анимации.

46. Iconate.js

Iconate.js «вдыхает жизнь» в трансформацию иконок, добавляя симпатичные эффекты и улучшая переходы между двумя объектами. Этот инструмент отлично работает не только со шрифтом Font Awesome, но и с Glyphicons, а также позволяет самостоятельно задать набор пиктограмм.

47. AnimateMate

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

48. CAAT

CAAT — это надежный фрейм, работающий в тандеме с JavaScript. В набор инструментов входят сцены, технологии мульти-рендера, маски, стандартный набор эффектов и другое.

49. Granim.js

Granim.js — это небольшая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это может быть стандартный круговой градиент, или динамический градиент, применяемый к фону картинки, или движущиеся градиенты в сочетании с масками.

50. Animista

Animista — это площадка для проведения экспериментов с кучей готовых стандартных и нестандартных анимаций для CSS. Задайте продолжительность, время, задержку, количество взаимодействий и некоторые другие параметры и посмотрите на результат.

51. Obnoxious.css

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

52. Animatelo

Animatelo включает в себя кучу привлекающих внимание динамических эффектов, взятых из знаменитого Animate.css, так что их легче применить. Поддерживается всеми современными браузерами.

53. Foxholder

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

54. Rhythm.js

Rhythm.js — это библиотека JavaScript с маленькими симпатичными анимациями, вдохновленными стилем диско: эффекты имитируют различные танцевальные движения. Она содержит почти 20 вариантов, которые привнесут на ваш сайт немного буги-вуги.

55. Colorido.js

Как и Granim.js, этот плагин для JavaScript создан для управления цветами. Он помогает динамически изменять тон и прозрачность фона и текста, а также создавать нестатичные радиальные, линейные, диагональные и горизонтальные градиенты.

56. Barba.js

Barba.js использует PJAX (технику, основанную на подходе ajax), чтобы избежать резкого переключения страниц. Этот инструмент мягко скрывает старый контейнер и заменяет его новым так, что это приятно глазу.

57. ScrollReveal.js

ScrollReveal.js — это популярный инструмент для создания анимации с прокруткой. Благодаря ему вы можете управлять несколькими анимациями и всеми их стандартными параметрами. Этот инструмент отлично работает и с десктопными, и с мобильными браузерами.

58. Scrollanim

Scrollanim — не столь изысканный, но более удобный и простой инструмент. Он предназначен для CSS, но позволяет использовать и JavaScript API, чтобы создать анимацию, запускающуюся при прокрутке страницы. Он содержит несколько готовых решений, которые можно сразу же применить к своему проекту.

59. ScrollTrigger

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

60. Force.js

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

61. AOS

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

62. Rellax

Rellax позволяет поработать с параллакс-эффектом. Это легкая универсальная JavaScript-библиотека для придания интерфейсу объема.

63. Tilt.js

Tilt.js создает интригующий эффект наклона, основанный на параллаксе. Этот инструмент позволяет наклонить объект, имитируя 3D в стандартной 2D-плоскости. Вы можете отрегулировать ось, а также сделать объект блестящим или парящим.

64. Transform-when

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

65. CSS3 Animation

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

66. Curve.js

Curve.js вдыхает жизнь в линии, заставляет их танцевать, кружиться и переливаться. Используйте этот инструмент для создания элегантных геометрических орнаментов.

67. Animator.js

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

68. Cel-animation

Cel-animation — это миксин для Sass, позволяющий управлять ключевыми кадрами. Вы можете сделать подвижным любой элемент HTML или векторную графику.

69. Scrollissimo

Scrollissimo был создан, чтобы вместе с Greensock анимировать объекты при скроллинге. При помощи дополнительного JavaScript-плагина для устройств с сенсорным экраном этот инструмент работает на большинстве девайсов.

70. jqClouds

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

71. Color animation

Color animation — это инструмент для анимирования тона и прозрачности фона, границ и текста. Работает с цветом любого объекта.

72. Flubber

Чтобы предотвратить внезапные скачки и резкие метаморфозы, случающиеся, когда один объект превращается в другой, вы можете использовать Flubber. Единственный минус инструмента в том, что он работает только с 2D-графикой.

73. Particles.js

Если вам нравится популярная сегодня анимация частиц, вам стоит воспользоваться Particles.js. Этот генератор основан на библиотеке JavaScript, которая берет всю работу на себя. Задайте интересующие вас параметры: цвет, количество, форма, размер, прозрачность и прочее, — и просто экспортируйте результат.

74. 3D Lines Animation with Three.js

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

10 принципов создания плавной веб-анимации

Нет никакой особой «фишки» в создании масштабной анимации. Хотя нет, есть: нужно потратить немало времени на её оптимизацию и тестирование. Так после нескольких лет экспериментов, постоянно упираясь в пределы производительности браузеров, мы вывели серию принципов дизайна и кодинга, которые позволят любому желающему украсить свой проект эффектной и производительной анимацией. Их использование позволит вам получить плавную работу страниц в десктопных и мобильных браузерах. И самое главное – всё это делается и обслуживается весьма просто.

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

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

Анимации существовали ещё до появления Интернета. Для создания лучших из них можно потратить всю жизнь на обучение. Тем не менее, в этом деле тоже существуют закономерности. Мы обсудим некоторые типичные и не очень проблемы, с которыми сталкиваются дизайнеры при создании анимации для размещения в вэбе.

Для получения плавной анимации с 60 fps каждый кадр должен обрабатываться менее чем за 16 мс! Это малый промежуток времени, поэтому необходимо найти очень эффективные способы рендеринга каждого кадра для высокой производительности анимации.

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

Twitter недавно использовали этот простой подход для их новой анимации сердца, прокручивая в заданной последовательности 26 кадров.

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

Во многих случаях выгоднее использовать свойство CSS «transition» для автоматической анимации элемента при его изменении. Эта техника известна также как «tweening» и подразумевает создание анимации с автоматическим построением промежуточных изображений. Допустим, мы имеем 2 изображения одного объекта в различных положениях. Эффекты перехода CSS помогут создать анимацию изменения его состояния. Их использование выгодно тем, что можно в любой момент сбросить или обратить всю логику анимации. Это идеальный подход из разряда «установил и забыл». Отлично работает, к примеру, с различными интро-последовательностями или простыми взаимодействиями вроде активации анимации при наведении мыши.

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

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

#1 Не изменяйте никакие свойства кроме непрозрачности (opacity) и преобразования (transform)

Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать!

Следование этому базовому принципу повысит эффективность работы на 80%, даже в мобильном сегменте. Наверняка, вы уже слышали об этом раньше. Идея не оригинальная, но ей редко следуют. Она является веб-эквивалентом «ешьте здоровую пищу и выполняйте физические упражнения». Все слышали, знают, что это правильно, но мало кто соблюдает.

На самом деле, к использованию этого принципа довольно просто привыкнуть. Особую выгоду это принесёт тем, кто ранее делал анимации при помощи традиционных свойств CSS.

Например, если вам нужно сделать объект меньше, вы можете использовать свойство трансформации scale вместо изменения ширины/высоты. Если вам нужно переместить элемент, то не стоит возиться с изменением значений отступов, ведь такая анимация потребует перестройки макета страницы при каждом кадре. Лучше используйте простые свойства трансформаций для этого: transform: translateX или transform: translateY.

Почему это работает?

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

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

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

#2 Прячьте контент на виду.

Используйте «pointer-events» в CSS: значение «none» наряду с нулевой непрозрачностью для сокрытия элементов

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

В далёкие времена, когда анимации обрабатывались при помощи jQuery animate(), основная сложность при работе с эффектом fade заключалась в необходимости переключения значения свойства display: активировать none для прекращения эффекта в нужный момент. Слишком рано и анимация не будет завершена, слишком поздно и вы получаете невидимый элемент с нулевым значением opacity, перекрывающий страницу. Требовался обратный отклик для очистки экрана после завершения анимации.

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

Комбинируя эту вещь с нулевым значением opacity, мы получаем тот же эффект, что даёт «display: none», но без влияния на производительность при запуске новых циклов рендеринга анимации. Если необходимо скрыть элемент из поля зрения, я обычно выставляю нулевую непрозрачность и выключаю pointer-events. После этого могу забыть о нём, зная, что всё можно легко вернуть обратно и ничего не будет мешать производительности страницы.

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

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

#3 Не нужно анимировать всё подряд одновременно.

Либо же используйте принцип хореографии.

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

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

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

Материал-дизайн от Google имеет некоторые интересные наработки по этому вопросу. Это, конечно, не единственно правильный путь, но он даёт пищу для размышлений и тестирования.

#4 Небольшое увеличение задержки перехода позволяет легко следовать принципу хореографии

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

Я обычно заменяю один класс на родительском элементе (чаще всего на body) для того, чтобы вызвать кучу переходов, каждый из которых имеет свой параметр задержки (transition-delay). Делается это для того, чтобы каждый элемент появлялся в нужное мне время. С точки зрения кодинга вам стоит беспокоиться о значении лишь одной переменной вместо поддержания десятков таймингов в JavaScript.

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

Пример кода

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

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

Цукерберг рекомендует:  Siri, Cortana и М

Как правило, используются 2 переменные: ваша базовая задержка и задержка по времени между каждым элементом. Такой баланс отыскать довольно сложно, но если вы попадёте на правильный набор чисел, то всё будет отлично.

#5 Используйте общий множитель для разработки в slow motion

И ускорьте всё это позже.

В дизайне анимации тайминг является нашим всем. 20% работы кроется в создании самих анимаций, а остальные 80% — в нахождении правильных параметров и таймингов для получения чётко синхронизированной и плавной сцены.

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

Если вы используете Javascript или какой-нибудь CSS-препроцессор вроде SASS, код должен быть достаточно простым для построения правильной структуры переменных.

Вы должны убедиться в удобстве кодовой конструкции, чтобы без проблем тестировать различные скорости и тайминги. Например, если анимация заикается даже на 1/10 скорости, вы, скорее всего, делаете что-то в корне неправильно. Если она идёт гладко при растяжении в 50 раз, то вопрос сводится к нахождению максимальной скорости, при которой она сможет плавно работать. Довольно трудно заметить проблемы на полной скорости, но если вы снизите её, то все они станут весьма очевидными.

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

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

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

#6 Возьмите видео с записью вашего интерфейса и прокрутите, от третьего лица вы сможете увидеть больше

Иногда взгляд со стороны помогает видеть вещи более ясно, и видео является отличным способом добиться этого.

Некоторые люди создают видео в After Effects, после чего пробуют реализовать полученное на сайте. Я часто делаю с точностью до наоборот, пытаясь сделать хорошее видео на основе пользовательского интерфейса сайта.

Однажды я был настолько впечатлён полученным от работы результатом, что решил поделиться с друзьями видео с его записью. Тем не менее, при повторном просмотре мною была замечена куча вещей, далёких от восхищения. Были лаги, да и тайминги выставлены немного неверно. Это меня смутило, и вместо того, чтобы разослать видео, я принялся доводить результат до ума. Работы там оставалось немало.

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

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

Если после просмотров и правок меня ничего не смущает, и я могу со спокойной совестью поделиться таким видео с коллегами и друзьями, значит, проект готов к релизу.

#7 Активность Сети может привести к лагам.

Вам нужно предварительно загрузить или блокировать большие HTTP-запросы

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

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

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

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

#8 Не нужно менять стандартную прокрутку.

Идея замены скролла может показаться классной, но это не так на самом деле.

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

Умеренно эффективным способом создания вещей из этой категории является определение оптимального шага прокрутки и выделение его в отдельное событие (event). Если же вы не знаете, что делаете, то лучше вообще не использовать такой скроллинг. Здесь легко ошибиться, да и поддерживать нормальный уровень производительности на страницах со сложным скроллингом – довольно хлопотное занятие.

Ещё худшей затеей выглядит замена стандартного скролла на так называемый scrolljacking (контент изменяется в такт прокрутке, пример – сайт Apple). Не делайте этого. Реализовать удачно такой эффект сложно, да и не всем пользователям он понравится.

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

#9 Почаще тестируйте свои проекты на мобильных устройствах.

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

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

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

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

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

#10 Тестируйте проекты на разнообразных устройствах

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

Несмотря на то, что Chrome и Safari созданы на базе Webkit и имеют практически одинаковый синтаксис, у каждого из них свои собственные причуды. Любое обновление Хрома одновременно устраняет старые ошибки и привносит новые, так что вы должны постоянно держать руку на пульсе, как говорится.

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

Я регулярно переключаюсь в работе между моим маленьким MacBook Air и большим iMac. Каждый такой цикл выявляет небольшие проблемы и указывает на необходимые усовершенствования. Это касается не только производительности работы анимации, но и дизайна сайта в целом, плотности информации, читаемости, структуры и т. д.

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

Надеюсь, вы нашли приведённые техники полезными и используете их в вашем следующем проекте. Удачи!

7 популярных программ для создания анимации

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

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

Для чего нужна анимация

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

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

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

Анимация: какие программы использовать

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

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

Анимирование прототипов

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

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

Вид анимации, плавность, скорость и остальные параметры можно настроить.

1. Principle

Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Работает только на macOS.

Сфера применения: создание коротких сценариев в два–четыре экрана.

Как оживить свой сайт: 5 инструментов для анимации в современном WEB

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


Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

GreenSock Animation Platform или GSAP — это, пожалуй, одна из самых функциональных javascript-библиотек для анимирования. Как говорят её создатели, это «новый стандарт для HTML5 анимации». Она имеет низкий порог вхождения, подробную документацию, высокую производительность, гибкость и совместимость со старыми браузерами. Важным преимуществом GSAP является также то, что библиотека умеет «анимировать» не только CSS или Canvas, но и любую числовую переменную любого javascript-объекта.

Пример кода на GSAP:

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

Tween.js

Tween.js является дополнением к easel.js — одному из самых популярных javascript-фреймворков для удобной и легкой работы с canvas. Тем не менее, tween не имеет никаких зависимостей и может использоваться как вместе, так и отдельно от easel.

21 ноября в 19:30, Санкт-Петербург, беcплатно

Как вы, наверное, уже догадались, основная задача библиотеки tween.js — это анимация в Canvas. И она отлично с ней справляется, делая за вас и упрощая многие вещи. Вот, например, код, который «гоняет» по экрану круг, меняя при этом его прозрачность:

Но при этом для анимации HTML элементов tween.js совершенно не подходит — с этим справляются следующие два инструмента.

Move.js

Move.js — javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

Ознакомиться с демонстрацией работы и документацией можно на этой странице.

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

Animate.css — всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js — всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

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

Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=”2s” задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js, полный список классов анимации — на официальном сайте Animate.js.

Анимация средствами JQuery

По статистике, почти 50% сайтов используют JQuery. Если ваш сайт входит в их список и у вас тоже подключена эта популярная библиотека, то, возможно, стоит не изобретать велосипеды, а воспользоваться встроенными в неё средствами анимации?

Это могут быть как стандартные $.show(), $.hide(), $.fadeIn(), $fadeOut и т.д., так и функция $.animate(), которая позволяет создавать гораздо более сложные анимации.

Подробнее об анимации в JQuery можно почитать здесь.

Стоит также упомянуть о библиотеке Velocity.js, которая предоставляет такое же API для анимации как и JQuery, но при этом никаких зависимостей не имеет. Пригодится тем, кому нужна анимация из JQuery, но сам JQuery не нужен.

Итак, подведем итоги:

Я хочу сделать анимацию…

И в Canvas, и в HTML: GSAP.

Только в Canvas: tween.js.

Только в HTML: WOW.js + Animate.css или Move.js.

В HTML, и мой сайт использует JQuery: JQuery Effects.

HTML5, CSS3 и связанные с ними технологии

Руководство по быстрому переходу на новые и развивающиеся веб-стандарты

Разработка и маркетинг веб-стандартов

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

Развить навыки по этой теме

Этот материал — часть knowledge path для развития ваших навыков. Смотри Основы HTML5

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

Интересно, что в процесс включился даже консорциум W3C, использующий HTML5 и его логотип (см. изображение 1) для популяризации понятия «веб-платформы».

Рисунок 1. Логотип HTML5

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

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

Живой стандарт: HTML5, «HTML5» и HTML

Безусловно, самой важной из спецификаций является новая версия HTML. Хорошо это или плохо, но термин HTML5 стал общим названием для всех развивающихся технологий. Разработчик JavaScript Петер-Пауль Кох (Peter Paul Koch) кратко описал этот феномен в заметке в своем блоге в январе 2010 года: «Термином HTML5 можно назвать все что угодно, если вы хотите, чтобы это звучало новомодно и круто».

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

Стоит отметить, что Web Hypertext Application Technology Working Group (WHATWG) — рабочая группа, руководящая сейчас разработкой стандартов HTML—ушла с пути так называемого «этапного процесса создания стандартов», который длительное время применялся W3C. И хотя группа тесно работает совместно с W3C для создания фиксированной спецификации HTML5, ее собственные процессы разработки стандартов ориентированы на поддержку HTML как «живого стандарта».

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

Технологии из текущей спецификации HTML5

Перед тем как погрузиться в компоненты, стоит обратить внимание на то, что WHATWG не шутит, называя стандарт живым. Это подвижная цель. Некоторые технологии, такие как Canvas 2D API, вначале входили в состав спецификации, но впоследствии переместились в другие документы.

Новые семантические элементы

Из всех новых компонентов спецификации быстрее всего приживаются именно семантические элементы, например, Header , Footer , Section и Aside . Многие из них основаны на типичных шаблонах использования, которые были выявлены в процессе сбора сведений редактором Йеном Хиксоном (Ian Hickson). Это наглядно видно на примере Header и Footer , которые отражают общепринятые шаблоны и , применяемые во всей глобальной сети. Другие, например, hgroup , aside и figure , стали логичным дополнением и улучшением существующих элементов HTML.

И хотя конкретная поддержка новых элементов браузерами ограничена (например, браузеры практически ничего не делают с элементов header), использование новых семантических элементов получает все большее распространение. Разработчики вырабатывают оптимальные подходы и создают типовые шаблоны использования этих новых элементов. Например, хотя старые версии Windows® Internet Explorer® имеют определенные проблемы при появлении незнакомых элементов, такие библиотеки, как Modernizr, и модули, подобные HTML5Shiv, позволили сгладить путь к поддержке новых элементов различными браузерами.

Новый алгоритм структурирования

Вместе с этими новыми семантическими элементами в составе стандарта также появился новый алгоритм структурирования, который позволяет создавать более гибкие формы документов. В дополнение к стандартным блокам заголовков от H1 до H6 в HTML5 имеется несколько новых секционных элементов, таких как section, article, aside, footer, header и nav . Эти элементы позволяют разделить документ на новые разделы. Вместе со знакомыми обозначениями заголовков и возможностью создать более одного элемента H1 на странице все это создает более мощную основу для создания богатых и структурированных документов.

Использование при разработке такого инструмента, как букмарклет HTML5 outliner ( h5o ), позволяет легко освоить новый алгоритм. Новые опции требуют определенного привыкания, однако просмотр структуры документа в процессе его разработки может помочь разобраться в новшествах.

Видео и звук

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

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

Листинг 1. Простой пример видео

К сожалению, до момента, когда этот код может работать в большинстве браузеров с единым источником видео, еще далеко. Пока создатели браузеров делятся на два лагеря, ситуация остается значительно более сложной, чем должна быть. Пока Apple и Microsoft непоколебимо стоят на стороне отягощенного патентами стандарта h.264, а Google, Opera и Mozilla выступают за свободные, открытые и бесплатные видеоформаты, такие как WebM, встраивание видео в страницы останется более, а не менее, сложной процедурой, чем во времена Adobe® Flash®.

Элементы форм и типы ввода

В HTML5 имеется несколько новых элементов форм, которые лучше отражают современные задачи ввода. Такие форматы как Email и URL , теперь можно выделять в браузере более содержательным способом. Среди новых элементов форм можно отметить range (для прокрутки), date (для выбора даты) и color (для выбора цвета).

К сожалению, как показывает исследование Петера-Пауля Коха, создатели браузеров, за исключением Opera и Research in Motion, очень медленно внедряют эти технологии. Это позор.

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

Автономные веб-приложения

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

Встроенное редактирование контента.

HTML5 содержит новый API для упрощения редактирования контента. И хотя существуют новые варианты реализации данной функции на базе JavaScript, встроенный API должен помочь в создании более целостной и эффективной среды для пользователя.

Перетаскивание (Drag and drop)

Новый API-интерфейс drag-and-drop позволяет перетаскивать файлы на страницы прямо с рабочего стола. Вживую эту функцию можно увидеть в Google Gmail в браузере Mozilla Firefox или Google Chrome.

История (History API)

Одной из постоянных проблем в эпоху Ajax являлось нарушение стандартного стека истории активно использующими Ajax приложениями. И хотя существуют решения на базе скриптов и типовые схемы, позволяющиеся поддерживать динамическое состояние, History API в HTML5 дает долгожданное улучшение по сравнению с частными решениями. HTML5 дополняет существовавшую ранее возможность навигации по истории посещенных страниц, предоставляя метод добавления элементов в историю браузера и возможность правильного реагирования на нажатие пользователем кнопки «назад».

Microdata

HTML5 определяет стандартный метод маркировки метаданных в теле документа HTML. Принцип microdata покажется знакомым тем, кто работал с микроформатами, такими как hCard и hCalendar, однако есть ряд важных отличий. Главное состоит в том, что microdata переносит соответствующую информацию из классов, ранее захватывавшихся микроформатами, в новый атрибут itemprop .

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

  • itemscope определяет область действия сегмента микроданных.
  • itemtype предоставляет URL, определяющий используемый формат микроданных.
  • document.getItems() предоставляет доступ к элементам микроданных верхнего уровня; Этот метод возвращает список NodeList, содержащий элементы типа, заданного необязательным аргументом itemType, или элементы всех типов, если аргумент был опущен.

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

Несколько технологий вышли из спецификации HTML5 и теперь описаны в своих документах. Другие, разрабатывавшиеся всегда отдельно от этого HTML-стандарта, объединены с ним в рамках «веб-платформы».

Цукерберг рекомендует:  Обучение - 2 вопросы по программированию на андроид и язык Джава

Пожалуй, самая странная технология, попавшая под бренд HTML5, — это стандарт векторной графики SVG (Scalable Vector Graphics). SVG представляет собой синтаксис векторной графики на базе XML. Спецификация SVG разрабатывается W3C с 1999 года, поэтому включение этой технологии как «новой» составляющей HTML5 является большим лукавством.

Тем временем новый всплеск внимания к SVG вполне оправдан, так как в настоящее время существует реальная тенденция к внедрению этого стандарта. Определенный уровень поддержки уже доступен в новейших версиях всех основных браузеров, а API для более старых версий Internet Explorer реализуется через библиотеки, подобные Raphael.js.

Контекст Canvas 2D

Одной из первых звезд эры HTML5 стал элемент Canvas и связанная с ним библиотека API, которые начали свое существование в качестве расширения Apple для HTML. Как уже отмечалось ранее, эта технология начала свою жизнь в рамках спецификации HTML5. Теперь же она разрабатывается W3C в отдельном документе.

Canvas 2D предоставляет программируемый интерфейс для рисования двумерных изображений и картинок прямо в браузере. Этот элемент уже применяется для широкого круга задач — от рисования карт до игр, от популярной системы поддержки пользовательских шрифтов до переноса языка программирования Processing на JavaScript. К радости тех, кто хочет использовать Canvas сегодня, этот элемент до некоторой степени поддерживается и в старых версиях Internet Explorer благодаря библиотеке ExplorerCanvas.

Геолокация

API Geolocation представляет собой стандартный интерфейс для получения данных о географическом местоположении устройства. Он предоставляет доступ к объекту window.geolocation , который, в свою очередь, обладает методами, которые помогают определить местоположение устройства на основании информации со специальных серверов. Информация о местоположении собирается из множества источников, включая характеристики IP-адреса, встроенный приемник GPS, MAC-адреса Wi-Fi и Bluetooth, радиочастотные метки RFID, и место подключения к Wi-Fi.

Web Storage

Спецификация Web Storage определяет API для постоянного хранения данных в веб-браузере в виде пар ключ/значение. Эта спецификация похожа на cookies, но значительно превосходит ее по возможностям.

Хранение данных происходит в двух видах: sessionStorage и localStorage . Оба они предоставляют одинаковые методы для управления элементами ( setItem() , removeItem() и getItem() ), а также clear() для очистки всего хранилища. Вариант SessionStorage предназначен для хранения информации, которая нужна только во время текущей сессии браузера. Вариант LocalStorage предназначен для длительного хранения настроек сайта или других данных пользователя. Существует также событие storage, которое можно использовать для мониторинга и реагирования на действия с хранилищем.

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

Еще две спецификации идут рука об руку с Web Storage:

  • IndexedDB— это связанная, но еще незрелая спецификация, которая предоставляет еще больше возможностей для продолжительного хранения данных в браузере, включая возможность делать запросы к базе данных, а также, что важно, хранить сложные объекты, а не только простые строки.
  • Web Workers— это удивительно мощная спецификация, определяющая API, в котором предусмотрена возможность запуска фоновых «исполнителей», выполняющих код параллельно с машиной JavaScript на главной странице. Эта функциональность позволяет разработчикам выводить ресурсоемкие задания обработки данных в фоновые процессы, освободив браузер для дальнейшего взаимодействия с пользователем в основном контексте.

File API

Эта спецификация предоставляет API для работы с файлами прямо в веб-приложениях. Вместе с несколькими развивающимися и уже принятыми технологиями, такими как XMLHttpRequest , drag-and-drop и Web Workers, библиотека File API позволит производить значительно более сложные взаимодействия между веб-ресурсом и рабочим столом пользователя, чем это возможно сегодня. Вместо простого элемента загрузки файла, который передает файл на веб-сервер для обработки, или сложного интерфейса на базе Flash, библиотека File API позволит напрямую обращаться к содержимому файла в браузере.

WebSocket

WebSocket API разработан для одновременного двустороннего взаимодействия между браузером и сервером через один сокет TCP. На самом деле внедрение WebSocket должно было продвинуться значительно дальше благодаря поддержке в последних версиях Firefox, Opera, Chrome и Apple Safari, однако обнаруженная уязвимость в системе безопасности привела к тому, что в настоящее время поддержка этой технологии в Firefox и Opera по умолчанию отключена.

Server-sent Events

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

WebGL

Библиотека Web-based Graphics Library, или WebGL, расширяет возможности JavaScript по созданию интерактивной трехмерной графики в браузере. WebGL реализована как контекст HTML-элемента Canvas . 3 марта 2011 года спецификация достигла версии 1.0. Разработку ведет некоммерческая организация Khronos Group.

XMLHttpRequest Level 2

Спецификация XMLHttpRequest Level 2 вносит улучшения в объект XMLHttpRequest , расширяя его возможности. Наиболее интересным из новшеств, возможно, является функция Cross-Origin Resource Sharing, которая предоставляет безопасный способ обхода политики единого источника запросов, позволяя XMLHttpRequest взаимодействовать со сторонним сервером. В настоящее время XMLHttpRequest может контактировать в рамках одного протокола только с одним сервером.

Учитывая повсеместное распространение JSON и JSONP, Cross-Origin Sharing может уже быть не так актуальна, как ранее, но она все же открывает множество путей для развития архитектуры сайтов и гибридных приложений, снимая ограничения политики единого источника.

Модульный подход к CSS3

В последней версии CSS рабочая группа решила уйти от единой монолитной спецификации и разделила работу на несколько самостоятельных документов, которые получили название «модулей». Каждый из модулей добавляет новые возможности или расширения функций, определенных во второй версии CSS (CSS2).

Несколько модулей разрабатываются уже от 5 до 10 (и даже более) лет и достигли зрелости. В иерархии готовности W3C они находятся в статусе предлагаемых рекомендаций либо рекомендаций-кандидатов. Это значит, что они фактически готовы. Давайте рассмотрим подробнее наиболее интересные и важные модули.

Селекторы

CSS не работает без селекторов. Они используются для выбора элементов в документе HTML и применения соответствующего стиля.

В этом модуле содержатся уже существовавшие селекторы из первой версии CSS (CSS1) и CSS2, а также расширения и некоторые новые возможности. Дополнения главным образом фокусируются вокруг группы структурных псевдоклассов, таких как E:empty , который соответствует пустому элементу, а также E::nth-child(n) для дочернего элемента с конкретным индексом n . Среди других новых селекторов — отрицающий псевдокласс E:not(s) , который представляет собой отрицание простого селектора, а также элемент UI, определяющий псевдоклассы E:enabled и E:disabled , которые соответствуют включенным или выключенным элементам пользовательского интерфейса.

Пользователи популярных библиотек JavaScript, таких как jQuery, Dojo и YUI, уже знакомы с новыми селекторами третьей версии CSS (CSS3), так как они уже достаточно давно включены в движки этих библиотек.

Color

Color определяет цветовые аспекты CSS, включая прозрачность и обозначения цветовых параметров. Среди новых значений цветов — Red Green Blue + канал Alpha (RGBA), а также Hue, Saturation, Lightness + канал Alpha (HSLA).

Backgrounds и Borders

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

Multi-column layout

Разметка Multi-column позволяет разработчикам размещать контент в столбцах с легко настраиваемыми параметрами.

Media Queries

Media Queries представляет собой улучшение правил @media в CSS, а также атрибутов media в HTML, добавляя такие параметры, как размер дисплея, глубина цвета и соотношение сторон. Этот модуль позволяет разработчикам более точно предоставлять контент для устройств различных типов и возможностей в пределах одного класса.

Media Queries играет важную роль в концепции Responsive Web Design от Итена Маркотте (Ethan Marcotte), которая описывается в популярной статье A List Apart и в готовящейся книге.

Новые и разрабатываемые модули

Перечисленные зрелые модули хороши, практичны и чрезвычайно полезны, однако основная часть наиболее интересной работы с CSS ведется в серии (относительно) новых модулей. Ниже приведены некоторые достойные упоминания примеры.

CSS Fonts Module Level 3

Fonts Level 3 представляет собой расширение оригинальных и хорошо известных свойств шрифтов, используемых со времен появления CSS. Level 3 включает в себя популярное правило @font-face , которое позволяет лучше управлять типографикой в сети, предоставляя возможность напрямую встраивать специальные шрифты в документ при помощи правил CSS.

CSS 2D Transforms Module Level 3

Модуль 2D Transformations предоставляет новый элемент, позволяющий выполнять вращения, перевороты, масштабирования и другие трансформации в диалоговом окне.

CSS 3D Transforms Module Level 3

Разработанный вместе с SVG модуль 3D Transforms расширяет возможности 2D Transforms, добавляя методы перспективного преобразования.

CSS Animations Module Level 3 и CSS Transitions Module Level 3

Модуль Animations позволяет анимировать элементы, определяя параметры анимации, временные параметры анимации и компоненты, которые будут меняться во время анимации. Модуль Transitions позволяет определить анимацию переходов между псевдоклассами. Типичным примером перехода является переход элемента в состояние :hover и выход из него.

Взгляд в будущее

Рисунок 2. Я видел будущее

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

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: HTML5, CSS3, and related technologies.
  • Логотип HTML5: Прочитайте о веб-платформе и загрузите логотип HTML5.
  • «Термином HTML5 можно назвать все что угодно » (QuirksBlog, январь 2010 г.). Петер-Пауль Кох (Peter-Paul Koch) о путанице вокруг понятия HTML5.
  • «HTML — это новый HTML5» (блог WHATWG, январь 2011 г.). В этом блоге обсуждается новая модель разработки HTML5, в которой технология не фиксируетс в версиях, а формулируется в живом документе, описывающем язык в процессе его развития.
  • «Спецификация HTML5 для веб-разработчиков» (WHATWG, февраль 2011 г.). Особенностью этой спецификации является удобство чтения и открытый доступ. В отличие от полной спецификации HTML, данная «версия для веб-разработчиков » не содержит информации, которая нужна только производителям браузеров.
  • «Новые типы ввода» (QuirksBlog, март 2011 г.). Изучите таблицы совместимости новых типов ввода.
  • «HTML Canvas 2D Context» (W3C, февраль 2011 г.). Узнайте больше о двумерном контексте элемента HTML Canvas .
  • cufón: Узнайте о поддержке специальных шрифтах с помощью cufón.
  • «Web Storage» (W3C, апрель 2011 г.). Узнайте больше об этой библиотеке для постоянного хранения данных на стороне веб-клиента в виде пар ключ/значение.
  • «Web Workers» (Apple Computer, Inc., Mozilla Foundation и Opera Software ASA, апрель 2011 г.). Прочитайте об API, который позволяет авторам веб-приложений использовать фоновые процессы для запуска скриптов в параллельном режиме с главным окном. Многопоточные операции координируются при помощи специальных сообщений.
  • «File API» (W3C, октябрь 2010 г.). Узнайте больше об API, позволяющем работать в веб-приложениях с файловыми объектами, включая программный выбор и прямой доступ к данным.
  • «The WebSocket API» (W3C, апрель 2011 г.). Узнайте больше об API, который позволяет веб-страницам использовать протокол WebSocket для двустороннего взаимодействия с удаленным хостом.
  • «Experiment comparing Upgrade and CONNECT handshakes» (IETF, ноябрь 2010 г.). Прочитайте о проблемах уязвимости, которые привели к ограничению поддержки WebSockets. Подробнее об этой проблеме безопасности можно прочесть в Chromium Code Reviews.
  • «Server-Sent Events» (W3C, апрель 2011 г.). Узнайте больше о библиотеке API, позволяющей открывать соединение HTTP для получения push уведомлений с сервера в форме событий DOM.
  • «Спецификация WebGL » (Khronos Group, февраль 2011 г.). В данной спецификации описаны дополнительный контекст рендеринга и вспомогательные объекты элемента HTML 5 Canvas [CANVAS]. Этот контекст обеспечивает рендеринг с использованием API, близким к OpenGL ES 2.0 API.
  • » XMLHttpRequest Level 2″ (W3C, март 2011 г.). Спецификация XMLHttpRequest Level 2 расширяет возможности объекта XMLHttpRequest такими функциями, как кросс-серверные запросы, события и обработка битовых потоков при отправке и получении.
  • «Selectors Level 3» (W3C, декабрь 2009 г.): Узнайте больше о селекторах, уже существующих в CSS1 и CSS2, а также о новых селекторах CSS3 и о других языках, для которых они могут понадобиться.
  • «Модуль CSS Backgrounds and Borders Level 3» (W3C, февраль 2011 г.). Узнайте о возможностях CSS level 3 в отношении границ и фона.
  • «Модуль CSS Multi-column Layout» (W3C, апрель 2011 г.). В данной спецификации описывается многоколоночный формат в CSS, языке описания таблиц стилей в Интернете. При помощи функций, описанных в данной спецификации, контент можно разделить на несколько столбцов с заданными промежутками и с определенными правилами переноса.
  • «Media Queries» (W3C, июль 2010 г.). Узнайте о том, как MediaQueries расширяет функциональность MediaTypes, позволяя более точно применять таблицы стилей.
  • «Responsive Web Design» (A List Apart, май 2010 г.). Дизайнеры стремятся к максимальной точности верстки, в то время как меняющиеся условия отображения страниц в Интернете сводят на нет их старания. Итен Маркотте (Ethan Marcotte) считает, что нужно изменить принципы дизайна с учетом этих ограничений: использовать верстку с перетеканием, гибкие изображения и медиа-запросы; он показывает нам, как создать действительно интерактивный веб-дизайн для текущего и меняющегося мира Интернета.
  • «CSS Color Module Level 3» (W3C, октябрь 2010 г.). В данной спецификации описываются значения цветов, параметры оттенка переднего плана, а также групповая прозрачность. В их число входят параметры и значения из CSS2, а также некоторые новые показатели.
  • «CSS Fonts Module Level 3» (W3C, март 2011 г.). Этот модуль CSS3 описывает, как определяются параметры и как происходит динамическая загрузка специальных шрифтов.
  • «CSS 2D Transforms Module Level 3» (W3C, декабрь 2009 г.). Узнайте, как CSS 2D Transforms позволяет обрабатывать элементы CSS и трансформировать их в двумерном пространстве.
  • «CSS 3D Transforms Module Level 3» (W3C, март 2009 г.). Узнайте, как CSS 3D Transforms расширяет возможности трансформации CSS, позволяя изменять элементы CSS в трехмерном пространстве.
  • «CSS Animations Module Level 3» (W3C, март 2009 г.). Узнайте, как CSS Animations позволяют автору страницы изменять параметры CSS со временем.
  • «CSS Transitions Module Level 3» (W3C, декабрь 2009 г.). Узнайте, как CSS Transitions позволяет менять значения параметров CSS в определенные интервалы времени.
  • «Спецификация Geolocation API» (W3C, сентябрь 2010 г.). Эта спецификация определяет API для программного доступа к информации о географическом положении устройства.
  • HTML5 Cross Browser Polyfills: Узнайте о библиотеках и других элементах кода, которые помогут вам начать работу с новыми стандартами прямо сейчас.
  • «История сессии и навигация» (WHATWG, апрель 2011 г.). Узнайте о новом интерфейсе History API.
  • WHATWG в Твиттере: следите за WHATWG в Твиттере
  • W3C в Твиттере: следите за W3C в Твиттере
  • Роб Ларсен в Твиттере: следите за твитами автора статьи
  • Processing.js: Загрузите Processing.js, ответвление проекта популярного визуального языка программирования Processing, предназначенное для Web.
  • Explorer Canvas: Добавьте поддержку Canvas в Internet Explorer при помощи Explorer Canvas.
  • PersistJS: Загрузите PersistJS, клиентскую библиотеку персистентного хранения данных на базе JavaScript.
  • Modernizr: Узнайте больше и загрузите Modernizr, систему, добавляющие элементы HTML для использования специальных функций браузера в таблицах стилей.
  • HTML5Shiv: загрузите HTML5Shiv.
  • HTML5 outliner (h5o): Загрузите букмарклет HTML5 outliner. Текущая рабочая версия HTML5 определяет весьма точный алгоритм для структурирования документов HTML.
  • Raphael.js: Загрузите Raphaël, небольшую библиотеку JavaScript, которая поможет упростить вашу работу с векторной графикой в сети.

Комментарии

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

Обзор приложений для создания анимации в HTML5: Adobe Edge, Sencha Animator, Tumult Hype

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

Но сейчас скорость взаимодействия с интерактивными страницами, написанными c помощью HTML5, значительно возросла. При работе используется всего несколько файлов с кодировкой ASCII. Кроме этого, HTML5 убирает со страниц двоичные блоки информации в Flash и другом мультимедийном контенте, которые не индексировались поисковыми системами. На данный момент бичом любого SEO-специалиста являются сайты, состоящие только из интерактивного наполнения. Красивая графика и захватывающая анимация приятны для глаз, однако информация на этих страницах остаётся невидимой для поисковых служб, которые должны продвигать сайт. В HTML5 весь контент находится прямо в исходном коде страницы, именно там, куда могут добраться поисковые боты. Оставляя видимым содержание, HTML5 совмещает интерактивность страницы с эффективным SEO.

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

Создание интерактивной анимации HTML5

Перед рассмотрением приложений для HTML5 необходимо уделить внимание тому, как вообще создаются веб-страницы на этом языке. Существует два разных способа формирования динамического кода. Вы можете использовать JavaScript и JQuery или код CSS3 (Cascading Style Sheet v3) для получения одинаковых результатов. CSS3 и JavaScript, являясь приложениями для редактирования скриптов, выполняют задачи каждый по-своему. CSS3 позволяет задать параметры страницы, такие как фон, цвет текста, настройки динамического взаимодействия с пользователем, прямо в HTML файле. JavaScript выполняет практически те же функции, но предлагает более широкий спектр команд, чем CSS3, на довольно простом синтаксисе.

Веб-дизайнерам, работающим с CSS2, будет легко освоиться с синтаксисом и свойствами CSS3. Рабочие файлы СSS3 обычно меньше по размеру, чем JavaScripts, и ими легче управлять. Использование JavaScript предполагает, что будут существовать как минимум два отдельных файла JQuery, которые необходимо корректировать вместе.

Ещё одним большим преимуществом использования кода CSS3 является то, что контент сайта не будет спрятан глубоко в коде JavaScript, который не индексируется поисковыми службами. Обладая необходимой интерактивностью, страницы, написанные на JavaScript, могут содержать открытый код, но при этом нужно помнить, что некоторые инструменты HTML5, если не уделить этому внимания, будут автоматически помещать определенную часть информации в файлы JavaScript. При использовании CSS3 весь контент можно просмотреть прямо на HTML странице.

Существенным недостатком CSS3 является совместимость с браузерами. На данный момент работу с кодом CSS3 поддерживает только IE9, Firefox 8 и 9, Chrome, начиная с версии 15 и Safari 5.1 и выше. Неудивительно, что Chrome и Safari стараются поддерживать совместимость с CSS3: компании Google и Apple хотят полностью отказаться от использования технологии Flash на своих браузерах для мобильных и настольных устройств. Кроме этого, анимация CSS3 является единственной технологией, которая стабильно работает в операционных системах Android, iOS, BlackBerry OS6.

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

Adobe Edge

Цена: бесплатно

Платформы: Windows, Mac OS X

Самой новой среди программ этого класса является «Edge» компании Adobe. На данный момент она ещё не вышла официально. Первая альфа-версия (Preview 1) стала доступна в августе 2011 года, а сейчас доступна версия Preview 4.

Интерфейс Adobe Egde

Edge имеет интересную особенность: эту программу выпустила компания, создавшая технологию Flash, которую и пытается заменить HTML5. Можно надеяться, что Adobe выпустит продукт достойного уровня для создания анимации. И на данный момент дело идет именно к этому. Даже ранние версии приложения Edge зарекомендовали себя как очень мощный инструмент в умелых руках. По уверениям разработчиков, финальная версия программы позволит создавать и корпоративные сайты, наполненные сложным интерактивом, и HTML5-игры с причудливой анимацией, и приложения для мобильных устройств. Работа с Edge в первую очередь рекомендуется опытным аниматорам.

Интерфейс Edge легко варьировать по желанию: панели можно перемещать и изменять в размерах, рабочий интерфейс — полностью сохранять для использования в последующих работах.

Интерфейс Timeline, используемый в Edge, во многом похож на интерфейс других приложений для создания анимации. Панели настроек и управления выглядит практически как в Animator. Однако, в отличие от Animator, рабочие инструменты можно передвигать, изменять их размер, сохранять позиции рабочего пространства для использования в последующих работах. Такой интерфейс дает возможность следить за ходом анимации лучше, чем это происходит у конкурентов Edge.

Например, каждый объект на временной шкале выделен своим цветом для удобства выстраивания объектов в последовательный ряд, чего очень не хватает в Animator и Hype. Также в Edge можно выделять объекты в группы, для задания им одинаковых свойств. Многие по достоинству оценят функцию копирования набора действий и вставки их в нужное место на временной шкале. Опция «Paste Inverted» позволит разработчикам создать зеркальный набор действий нажатием одной кнопки. Это приложение наверняка покажется удобным для разработчиков с его всплывающими окнами, открывающими актуальный код JavaScript для любого элемента и его действия.

Уникальной чертой Edge можно назвать организацию управлением рабочим проектом: после создания файлов HTML и JQuery они могут редактироваться разными пользователями, и, после сохранения в соответствующей папке, Edge обратит внимание на изменения и интегрирует их в проект. Такая функция, по крайней мере, на данный момент, не доступна ни Hype, ни Animator. Просмотреть результат работы позволит встроенный веб-движок WebKit. А для удобства работы с уже созданными страницами предусмотрена возможность импорта существующих страниц HTML и конвертации различных элементов в воспринимаемый для Edge вид.

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

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

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

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

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

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

В JavaScript это делается дополнительной строкой:

transition-timing-function

Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

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

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

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