Сравнение анимации средствами CSS и JavaScript. CSS3-анимации и новый javascript-метод Animate()
Если Вы сейчас в ситуации, когда Вам нужно создать впечатляющую анимацию для сайта, то этот пост точно даст Вам полезные инструменты.
Привет, друзья! В этой статье я предлагаю Вам ознакомиться с моей подборкой замечательных CSS-библиотек и JS-плагинов, которые помогут реализовать максимально совместимую анимацию на вашем сайте за считаные минуты.
JavaScript плагины для анимацииЕсли Вы хотите создавать анимации, которые запускаются по какому-нибудь событию или действию, то JavaScript плагины для анимации Вам очень сильно в этом помогут. Но стоит заметить, что большинство из этих анимаций написаны на CSS3, а управление ими происходит с помощью JavaScript.
AniJS Dynamics.jsDynamic.js - это JavaScript библиотека для создания анимаций на основе физики.
mo.jsmo.js - отличная библиотека для создания motion-графики. Пример такой графики вы встречали часто, когда Google размещал новый тематический логотип (doodle), который анимировался при наведении или клике.
cta.jscta.js - JavaScript плагин для создания анимированных призывов к действию. Многие из них выглядят очень эффектно.
animo.jsanimo.js - мощный инструмент для управления CSS3 анимациями.
html5tooltips.jshtml5tooltips.js - старые добрые подсказки с современным дизайном и анимацией без зависимостей, подключил и используй.
RocketRocket - интересная JS-библиотека, позволяющая анимировать путь элемента к цели.
scrollReveal.jsscrollReveal.js - плагин, позволяющий анимировать элементы при скролле страницы.
Wow.jsWow.js - еще один javascript плагин для контроля анимации при скролле страницы.
TransitTransit - jQuery-плагин для сглаживания переходов и трансформаций, предусмотренных в jQuery.
parallax.jsparallax.js - плагин, реагирующий на положение смартфона в пространстве, опираясь на это, управляет отступами, положением и глубиной слоев. Если же, устройство не имеет гироскоп, то вычисления берутся на основе положения курсора мыши. Двумя словами - продвинутый параллакс!
SlySly - JavaScript библиотека для создания однонаправленного скролла с имплементированной поштучной навигацией. На словах может показаться сложным, рекомендую просто посмотреть пример.
Move.jsMove.js - небольшая JavaScript библиотека для создания настроенных CSS3-анимаций.
slidr.jsslidr.js - простая в использовании и легковесная JavaScript библиотека для создания вертикального и одновременно горизонтального слайдера.
CreateJSCreateJS - это набор модульных библиотек и инструментов, которые могут работать вместе или независимо друг от друга, для обагощения интерактивности контенту. Функционал этих библиотек позволит создавать потрясающие сайты и приложения, обязательно ознакомтесь с демками.
Flippant.jsFlippant.js - JavaScript-плагин для создания элементов с эффектом поворота вокруг своей оси.
jmpress.jsjmpress.js - JavaScript-библиотека с уникальной идеей создания сайта на бесконечном HTML5 canvas"е. Идея достойна внимания.
CSS3 библиотекиОпытные разработчики уже достаточно давно позаботились о том, чтобы создать для нас библиотека с CSS3-анимациями. Теперь мы можем просто брать их и применять в своих проектах, и быть уверенными в их эффективности.
В этой статье мы хотели бы представить вам некоторые из самых полезных JavaScript-библиотек , которые можно использовать для анимации контента веб-приложений. Данные библиотеки предназначены для создания анимации выпадающих меню, раздвижных элементов, анимации параллакса и даже шрифтов.
И главное — это все на 100% бесплатные ресурсы с открытым исходным кодом, поэтому вы можете использовать их в любом из своих проектов.
1. Dyanamic.jsПросто включите dynamics.js на странице, и после этого вы сможете анимировать свойства CSS для любого элемента DOM . Вы также сможете анимировать свойства SVG .
Dynamics.js содержит собственное свойство setTimeout . Причина в том, что requestAnimationFrame и setTimeout характеризуются разным поведением. Свойство поддерживается всеми объектами JavaScript . Библиотека была протестирована на совместимость с Safari 7+ , Firefox , Chrome 35+ 34+ , IE10+ .
2. Animate PlusПроизводительная JavaScript-библиотека , помогающая анимировать свойства CSS и атрибуты SVG .
Animate Plus отлично подходит для организации быстрого взаимодействия всех элементов управления интерфейса, а также длинных последовательностей анимации для стационарных и мобильных устройств.
3. Cta.jsКомпактная производительная JavaScript-библиотека для анимирования любого элемента («действия «) внутри любого другого элемента («эффект «) на странице.
4. Beep.jsBeep.js представляет собой набор инструментов для создания браузерных JavaScript синтезаторов с использованием WebAudio API .
5. Iconate.jsПроизводительная JavaScript -библиотека анимации и трансформации кроссбраузерных иконок. iconate.js также поддерживает модульные шаблоны AMD и CommonJS .
6. Dom Animator
JavaScript-библиотека
для вывода небольших элементов ASCII-анимации
в комментариях DOM
. Это самостоятельная библиотека, которая использует только JavaScript
(анимация выполняется в узлах комментариев, только в DOM
).
Rainyday.js позволяет с помощью холстов HTML5 и JavaScript создавать реалистично выглядящие эффекты капель дождя на стекле. Библиотека включает в себя расширяемый API и встроенное средство обнаружения ошибок.
Rainyday.js использует возможности HTML5 , поэтому она поддерживается большинством современных браузеров.
8. Anima.jsAnima.js позволяет использовать задержки и продолжительности, даже для анимации на CSS . Библиотека использует для создания анимации CSS-преобразования и 3d-трансформацию с включением Javascript . Вы сможете запускать, останавливать, отменять анимацию и даже создавать зависимые от событий эффекты.
9. blinkTitle.jsblinkTitle.js может создавать мигающий HTML-заголовок , предупреждение или уведомление в заголовке.
10. Snabbt.jsJavascript-библиотека предназначена для перемещения элементов, смещения, вращения, масштабирования, наклона, а также изменения размера. Благодаря операциям умножения матриц, преобразования могут объединяться в любых комбинациях по вашему желанию. Затем конечный результат задается с помощью матриц преобразования CSS3 .
11. VivusVivus — это компактный JavaScript-класс (без зависимостей ) для анимации SVG путем прорисовки. Vivus содержит множество различных эффектов анимации, реализована возможность создания пользовательского скрипта.
12. ImpulseJavaScript-библиотека для построения динамических взаимодействий на основе реальной физики, с акцентом на мобильные устройства. Вместо свойств анимации, задающих период времени, Impulse изменяет положение и скорость. Она не содержит большого количества зависимостей. Не требует наличия JQuery , но может прекрасно взаимодействовать с ним.
13. Ani.jsAniJS — это декларативная JavaScript-библиотека для обработки CSS-анимации . Она полностью задокументирована, проста в работе.
14. Bounce.jsИнструмент для создания красивых keyframes анимации на базе CSS3 . Добавьте компонент, выберите вариант и получите короткий URL-адрес или экспортируйте код в CSS .
15. Sticker.jsSticker.js — это JavaScript-библиотека , которая позволяет создавать эффекты отклеивания стикеров. Библиотека работает в большинстве популярных браузеров, которые поддерживают CSS3 (в том числе IE10+ ). Распространяется под лицензией MIT License .
16. Wow.jsWOW.js выводит CSS-анимацию во время прокручивания страницы вниз. По умолчанию вы должны использовать это действие, чтобы запустить animate.css , но вы можете легко изменить эти настройки.
17. Parallax.jsParallax.js — это компактное решение для создания эффектов параллакса. Библиотека также работает на смартфонах и планшетах (с гироскопом или аппаратным детектором движения ). Parallax.js имеет несколько параметров для настройки эффекта с помощью «атрибутов данных » или через JavaScript . Библиотека может работать автономно или как плагин JQuery и Zepto (существуют две версии ).
Небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.
Вы полностью контролируете последовательность воспроизведения анимации и управляете синхронизацией анимации разных элементов друг относительно друга. Библиотека поддерживает все современные браузеры, включая IE10 и новее.
В этой серии обучающих статей вы узнаете обо всех функциях Anime.js и сможете применять библиотеку в своих проектах.
Примечание Если вы совсем новичок в JavaScript, предлагаем вам ознакомиться с по этому языку программирования.
Установка библиотекиДля установки можно использовать команды npm или bower:
Npm install animejs bower install animejs
Вы также можете загрузить библиотеку и включить в свой проект или ссылаться на её последнюю версию через CDN.
После успешной установки вы сможете использовать Anime.js для добавления интересных анимаций к вашим элементам. Давайте начнём с базовых возможностей библиотеки.
Определение целевых элементовДля создания анимации с помощью Anime.js нужно вызвать функцию anime() и передать ей объект с парами ключ-значение, которые определяют целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключевое слово targets , чтобы дать библиотеке понять, что вам нужно анимировать. Это ключевое слово может принимать значение в разных форматах.
CSS-селекторы : вы можете передавать один или более селекторов в виде значений для ключевого слова targets .
Var blue = anime({ targets: ".blue", translateY: 200 }); var redBlue = anime({ targets: ".red, .blue", translateY: 200 }); var even = anime({ targets: ".square:nth-child(even)", translateY: 200 }); var notRed = anime({ targets: ".square:not(.red)", translateY: 200 });
В первом случае Anime.js будет анимировать все элементы с классом blue . Во втором - blue или red . В третьем случае Anime.js будет анимировать все дочерние чётные элементы с классом square . А в последнем случае библиотека будет взаимодействовать со всеми элементами с классом square , у которых нет класса red .
DOM-узлы (DOM node) или коллекция узлов (NodeList): вы можете также использовать DOM-узел или NodeList в качестве значения для ключевого слова targets . Посмотрите на пример использования DOM-узла для targets .
Var special = anime({ targets: document.getElementById("special"), translateY: 200 }); var blue = anime({ targets: document.querySelector(".blue"), translateY: 200 }); var redBlue = anime({ targets: document.querySelectorAll(".red, .blue"), translateY: 200 }); var even = anime({ targets: document.querySelectorAll(".square:nth-child(even)"), translateY: 200 }); var notRed = anime({ targets: document.querySelectorAll(".square:not(.red)"), translateY: 200 });
В первом случае использовалась функция getElementById() , чтобы обратиться к определённому элементу. Функция querySelector() использовалась для обращения к элементу с классом blue . А функция querySelectorAll() применялась для обращения ко всем элементам внутри документа, которые соответствуют группе определённых селекторов или же, наоборот, не входят в неё.
Существует множество функций, которые вы также можете использовать для выбора целевого элемента. Например, вы можете обратиться к элементам с определённым классом, используя функцию getElementsByClassName() . Или к элементам с определённым тегом, используя функцию getElementsByTagName() .
Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения targets в Anime.js.
Объект: вы можете использовать объекты JavaScript в качестве значения для targets . Ключ этого объекта используется в качестве идентификатора, а значение - в качестве числа, которое нужно анимировать.
Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.
Var filesScanned = { count: 0, infected: 0 }; var scanning = anime({ targets: filesScanned, count: 1000, infected: 8, round: 1, update: function() { var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count; var infectedCount = document.querySelector(".infected-count"); infectedCount.innerHTML = filesScanned.infected; } });
Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из AAA в BOY будет выведено сообщение об ошибке.
Кроме того, в коде использовалась функция обратного вызова ключа update , который вызывается на каждый кадр во время выполнения анимации. Здесь она использовалась для обновления количества сканированных и заражённых файлов. Однако вы можете пойти дальше и показать пользователям сообщение об ошибке, когда количество заражённых файлов превысит определённый порог.
Массив: возможность указывать массив JavaScript в качестве значения targets будет полезна, если вам нужно анимировать множество элементов, которые относятся к разным категориям. Например, если вы хотите анимировать DOM-узел, объект и множество других элементов, основанных на CSS-селекторах, то можно это сделать, поместив их в массив, а затем определить массив в качестве значения для targets . Пример ниже должен прояснить ситуацию.
Var multipleAnimations = anime({ targets: , translateY: 250 });
Какие свойства можно анимировать с помощью Anime.jsТеперь вы знаете, как определить разные элементы, которые нужно анимировать. Пришло время узнать, какие свойства и атрибуты могут быть анимированы при использовании библиотеки.
Свойства CSSК таким, например, относятся ширина, высота и цвет для разных целевых элементов. Финальные значения разных анимируемых свойств вроде background-color определяются с использованием lowerCamelCase. Таким образом background-color превращается в backgroundColor . Код ниже иллюстрирует анимацию положения объекта left и цвета фона (backgroundColor) целевого объекта.
Var animateLeft = anime({ targets: ".square", left: "50%" }); var animateBackground = anime({ targets: ".square", backgroundColor: "#f96" });
Свойства могут принимать разные виды значений, которые они бы приняли при использовании обычного CSS. Например, свойство left может иметь такие значения: 50vh , 500px или 25em . Вы также можете не указывать единицу измерения после числа, но в таком случае ею станет px по умолчанию. Аналогичные действия можно выполнить с background-color , указав цвет в виде шестнадцатеричного значения или при помощи кода RGB или HSL.
CSS-трансформированиеПреобразование по осям X и Y достигается с помощью свойств translateX и translateY . Аналогичным образом можно масштабировать, наклонять или вращать элемент вдоль определённой оси, используя свойства: scale (масштабирование), skew (наклон) или rotate (поворот), соответствующие этой конкретной оси.
Существует возможность определения разных углов или в градусах, или с помощью свойства turn . Значение turn, равное 1, соответствует 360 градусам. Это позволяет сделать вычисления проще, так как вы знаете, на сколько нужно повернуть элементы относительно своей оси. В примере ниже показано, как происходит анимация масштабирования, перехода или поворота как единичного свойства, так и всех сразу.
Var animateScaling = anime({ targets: ".square", scale: 0.8 }); var animateTranslation = anime({ targets: ".square", translateX: window.innerWidth*0.8 }); var animateRotation = anime({ targets: ".square", rotate: "1turn" }); var animateAll = anime({ targets: ".square", scale: 0.8, translateX: window.innerWidth*0.8, rotate: "1turn" });
Атрибуты SVGЕдинственное условие заключается в том, что значение атрибутов должно быть числовым. Способность анимировать разные атрибуты открывает возможности для создания некоторых классных эффектов. Поскольку эта статья ознакомительная, в ней будут приведены простые примеры.
Этот материал посвящён анимации на HTML страницах, о производительности анимации, перспективности использования, а так же анимации в HTML5 мобильных приложениях и играх.
Javascript анимацияПервым делом начнём с рассмотрения JS анимации на HTML странице. Анимация на яваскрипте может проводиться либо с setInterval, с помощью которой можно задать статично кадры в секунду, либо с помощью обычной функции которая в конце вызывает саму себя ну или с window.requestAnimationFrame.
Вот простейшая логика работы анимации в JS:
var el=document.getElementById("elem");
mar=10; //статичные начальные данные
//цикл начинается
mar=mar+1;
el.style.marginLeft=mar+"px";
//цикл заканчивается
Прелесть JS в том что можно удобным способом расширить нативный инструментарий и использовать например анимацию на jQuery или использовать Velocity . Это существенно ускоряет производительность. Однако в частности Velocity использует JS не совсем для анимации, так ака само анимирование производиться там в CSS о котором речь пойдёт ниже.
SVG анимацияНельзя не упомянуть о SVG анимации. Сама она очень хороша, но в мобильных браузерах она не работает. Вернее работает только SMIL на Андроид 3.0-выше. Как бы неприятно было это говорить сам SVG работает в методе WebView, но всё что связано с анимацией в этом тэге увы...
Везде где она работает - она показывает хорошую производительность. Убедитесь сами.