Есть ошибочное мнение среди веб-разработчиков, что CSS анимация — единственный производительный способ анимирования в сети. Этот миф принудил много разработчиков отказаться от основанной на JavaScript анимации в целом. Таким образом:

Вынудили себя управлять сложным взаимодействием UI в таблицах стилей

Блокировали себя в поддержке Internet Explorer 8 и 9

Воздерживаются от возможности построения физики движения, которая возможна только в JavaScript

Проверка в реальных условиях: основанная на JavaScript анимация так же быстра, как и анимация, основанная на CSS - иногда еще быстрее. Анимация CSS имеет преимущество, как правило, только по сравнению с $.animate() jQuery, которая является, по сути, очень медленным. Однако библиотеки для анимации JavaScript, которые обходят jQuery, показывают невероятную производительность, избегая манипулирования DOM насколько это возможно. Эти библиотеки могут быть до 20 раз быстрее, чем jQuery.

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

Почему JavaScript?

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

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

Примечание: Если вас интересует тема производительности, то можете почитать Джулиана Шапиро “CSS vs. S Animation: что быстрее?” и Джека Дойла: “Разрушение мифа: CSS Animations vs. JavaScript” . Для демо производительности, обратитесь к панели производительности в документации Velocity и демо GSAP «Библиотека сравнения скорости».

Velocity и GSAP

Две самых популярных библиотеки для JavaScript анимации — Velocity.js и GSAP . Обе работают с и без jQuery. При использовании этих библиотек совместно с jQuery, нет никакого ухудшения производительности, потому что они полностью обходят стек jQuery анимации.

Если jQuery присутствует на вашей странице, вы можете использовать Velocity и GSAP точно так же как и $.animate() jQuery. Например, $element.animate({ opacity: 0.5 }); просто становится $element.velocity({ opacity: 0.5 }) .

Эти две библиотеки также работают, когда jQuery не присутствует на странице. Это означает, что вместо того, чтобы объединить вызов анимации в цепочку в элемент jQuery объекта - как просто показано - вы передали бы целевой элемент(ы) к вызову анимации:

1 2 3 4 5

/* Работа без jQuery */ Velocity(element, { opacity: 0.5 } , 1000 ) ; // Velocity TweenMax.to (element, 1 , { opacity: 0.5 } ) ; // GSAP

Как видно Velocity сохраняет тот же синтаксис что и $.animate () jQuery, даже когда это используется без jQuery; просто сместите все параметры вправо на одну позицию, чтобы создать место для передачи в предназначенных элементах в первой позиции.

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

В обоих случаях вы больше не анимируете объект элемента jQuery ,а скорее необработанный DOM узел. Как напоминание, вы получаете доступ к необработанным DOM узлам при помощи document.getElementByID , document.getElementsByTagName , document.getElementsByClassName или document.querySelectorAll (который работает так же к селекторному механизму jQuery). Мы будем работать с этими функциями в следующем разделе.

Работа без jQuery

(Примечание: если вы нуждаетесь в базовом учебнике для начинающих в работе с $.animate() jQuery, обратитесь к первым нескольким разделам в документации Velocity .)

Давайте исследовать querySelectorAll потому что, вероятно, вы будете использовать именно это оружие при выборе элементов без jQuery:

Как показано вы просто передаете querySelectorAll CSS селектор (те же селекторы, которые Вы использовали бы в своих таблицах стилей), и он возвратит все соответствующие элементы в массив. Следовательно, вы можете сделать это:

1 2 3 4 5

/* Получите все элементы div. */ var divs = document.querySelectorAll ("div" ) ; /* Анимируйте все div сразу. */ Velocity(divs, { opacity: 0.5 } , 1000 ) ; // Velocity TweenMax.to (divs, 1 , { opacity: 0.5 } ) ; // GSAP

Поскольку мы больше не присоединяем анимации к объектам элемента jQuery, вы можете задаться вопросом, как мы можем объединить анимации в цепочку:

В Velocity вы просто вызываете анимации одну за другой:

/* Эти анимации автоматически становятся цепочкой. */ Velocity(element, { opacity: 0.5 } , 1000 ) ; Velocity(element, { opacity: 1 } , 1000 ) ;

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

(Подсказка: С пакетом Velocity UI вы можете создать свои собственные анимации мультивызова и дать им пользовательские имена, которые сможете использовать в дальнейшем как первый параметр Velocity. См. UI Pack документацию Velocity для получения дополнительной информации.)

Velocity вызов-обработки-за-один-раз, обладает огромным преимуществом: если вы будете использовать promises со своими Velocity анимациями, то каждый Velocity вызов возвратит действенный promise объект. Можно узнать больше о работе с promises в статье Джейка Арчибальда . Они невероятно сильны.

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

Удивительность JavaScript: Workflow

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

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

Однако базовый недостаток API ключевых кадров — в том, что вы должны определить разделы в процентах, который не интуитивен. Например:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@ keyframes myAnimation { 0 % { opacity: 0 ; transform: scale(0 , 0 ) ; } 25 % { opacity: 1 ; transform: scale(1 , 1 ) ; } 50 % { transform: translate(100px, 0 ) ; } 100 % { transform: translate(100px, 100px) ; } } #box { animation: myAnimation 2.75s; }

Что происходит, если клиент просит, чтобы вы сделали translateX анимацию на секунду длиннее? Это требует восстановления математики и изменения всех (или большинства) процентов.

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

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

JavaScript плагины для анимации

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

AniJS

Dynamics.js

Dynamic.js - это JavaScript библиотека для создания анимаций на основе физики.

mo.js

mo.js - отличная библиотека для создания motion-графики. Пример такой графики вы встречали часто, когда Google размещал новый тематический логотип (doodle), который анимировался при наведении или клике.

cta.js

cta.js - JavaScript плагин для создания анимированных призывов к действию. Многие из них выглядят очень эффектно.

animo.js

animo.js - мощный инструмент для управления CSS3 анимациями.

html5tooltips.js

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

Rocket

Rocket - интересная JS-библиотека, позволяющая анимировать путь элемента к цели.

scrollReveal.js

scrollReveal.js - плагин, позволяющий анимировать элементы при скролле страницы.

Wow.js

Wow.js - еще один javascript плагин для контроля анимации при скролле страницы.

Transit

Transit - jQuery-плагин для сглаживания переходов и трансформаций, предусмотренных в jQuery.

parallax.js

parallax.js - плагин, реагирующий на положение смартфона в пространстве, опираясь на это, управляет отступами, положением и глубиной слоев. Если же, устройство не имеет гироскоп, то вычисления берутся на основе положения курсора мыши. Двумя словами - продвинутый параллакс!

Sly

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

Move.js

Move.js - небольшая JavaScript библиотека для создания настроенных CSS3-анимаций.

slidr.js

slidr.js - простая в использовании и легковесная JavaScript библиотека для создания вертикального и одновременно горизонтального слайдера.

CreateJS

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

Flippant.js

Flippant.js - JavaScript-плагин для создания элементов с эффектом поворота вокруг своей оси.

jmpress.js

jmpress.js - JavaScript-библиотека с уникальной идеей создания сайта на бесконечном HTML5 canvas"е. Идея достойна внимания.

CSS3 библиотеки

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

Аннотация: Простой пример: метод угасания желтого цвета. Анимация с помощью библиотек JavaScript. Более сложный пример: перемещение и изменение размера. Переходы CSS.

Принцип в основе угасания состоит в том, что задается желтый цвет фона элемента угасания, а затем, за некоторую последовательность шагов его цвет возвращается к исходному. Поэтому, если исходный цвет фона был красный, то затем цвет задается желтым, затем оранжево-желтым, затем оранжевым, затем красно-оранжевым, и затем красным. Число использованных шагов определяет, насколько плавно происходит изменение цвета, а время между шагами определяет, как долго продолжается изменение цвета. При изменении цвета можно использовать полезный факт из CSS : цвет можно определить как тройку обычных чисел или как шестнадцатеричную строку. Поэтому #FF0000 (красный цвет) можно определить также как rgb(255,0,0) . Изменение от желтого цвета до красного за пять шагов означает, поэтому, переход от rgb(255,255,0) (желтый) к rgb(255,0,0) за пять следующих шагов:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Более сложный пример: перемещение и изменение размера

Хотя метод угасания желтого цвета демонстрирует анимацию, он несколько скучен. Когда большинство людей представляют себе анимацию, они обычно имеют в виду движение. Интересный прием предупреждения пользователя о том, что что-то произошло, не прерывая его рабочего процесса , состоит в немодальном сообщении. Вместо вывода диалогового окна alert() , которое требует от пользователя щелчка на OK , прежде чем он сможет продолжить, поместите сообщение просто в плавающий div на странице, который ненавязчиво остается там, пока не получит подтверждение. Второй достаточно интересной вещью затем может быть предоставление пользователю возможности вернуться к сообщению, для которого он подтвердил желание прочитать его еще раз. Поэтому давайте реализуем плавающее сообщение, которое, после щелчка на нем, "схлопывается" в угол экрана, и затем по щелчку может быть снова восстановлено. Вы можете посмотреть небольшую демонстрацию такого "схлопывающегося сообщения" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html), чтобы понять общую идею.

Если вы делаете какую-то серьезную анимационную работу, или какую-то серьезную работу с JavaScript, почти всегда стоит использовать библиотеку JavaScript. Это позволит создать требуемое представление для пользователей, не беспокоясь о математических тонкостях, требуемых для выполнения анимации. (Познакомившись с представленным выше первым примером, вы знаете теперь, как выполнить математические вычисления и как использовать setInterval , но вы сохраните время и собственные силы, используя готовые решения.)

Приведенный выше демонстрационный пример использует для работы библиотеку jQuery (http://jquery.com/), но как упоминалось, большинство библиотек предоставляют достаточно похожую концепцию анимации, и поэтому вы сможете реализовать принципиальную часть, используя предпочитаемую библиотеку. По существу, необходимо сделать следующее:

Показать плавающее сообщение в центре экрана

Когда на нем производится щелчок:

Переместить его горизонтальную позицию в крайнее правое положение

Переместить его вертикальную позицию вверх

Задать его ширину равной 20px

Задать его высоту равной 20px

Сделать его плотность равной 20%, так что оно становится почти прозрачно и скрыть в нем текст

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

Выполнить анимацию с помощью jQuery очень легко: используйте просто функцию . animate () и предоставьте желательный конечный результат анимации (и как долго она должна выполняться):

$(ourObject).animate({ width: "20px", height: "20px", top: "20px", right: "20px", marginRight: "0px", opacity: "0.2" }, 300);

Функция получает ourObject и, за 300 миллисекунд, заменяет его ширину и высоту на 20px, его верхнюю и правую позиции на 20px, его свойство стиля margin-right на 0px, и его плотность (в браузерах, которые поддерживают плотность изображения) на 20%. Затем это просто вопрос программирования в стиле

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

1. Scripty2

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

Пример использования

Включите строку в ваш код HTML:

Следующие строки используются на демо странице scripty2.

//Для эффекта змеи на картах в демонстрации document.observe("cards:snake", function(){ var d = 20; names.sortBy(Math.random).each(function(card, index){ $(card).morph("margin-left:"+[-300,300,-150,150]+"px;margin-top:"+ (272+(index-names.length/2)*d)+"px;left:371px;z-index:"+index, { propertyTransitions: { marginLeft: "mirror", marginTop: "bouncePast", left: "swingFromTo", zIndex: zIndexTransition }, duration:2 }).morph("margin-top:272px;left:"+(371+(index-names.length/2)*d)+"px", { propertyTransitions: { marginTop: "easeInCirc", left: "linear" }, duration:1, delay:index/15 }).morph("margin-top:"+(272-(index-names.length/2)*d)+"px;left:371px", { propertyTransitions: { marginTop: "easeOutCirc", left: "linear" }, duration:1 }); }); }); (function(){ document.fire("cards:snake"); }).delay(2); })();

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

Пример использования

Включите следующие строки в ваш код:

Создайте файл main.js и скопируйте в него следующий код.

Var manager = new jsAnimManager(); aniMe = document.getElementById("animateMe"); aniMe.style.position = "relative"; var anim = manager.createAnimObject("animateMe"); anim.add({property: Prop.left, to: 500, duration: 2000});

Простой плагин, в котором есть только два ключевых метода, sprite() и pan() . Оба метода предназначены для простой анимации свойства CSS фонового изображения элемента. Разница, между данными двумя методами заключается в том, что изображение ‘sprite’ содержит два или более ‘кадра’ анимации, а изобюражение ‘pan’ является одним непрерывным изображением, которое повторяет переходы слева на право. Обычно, в самом простом случае, можно использовать png файлы для этого (с или без прозрачности). Вы можете использовать прозрачный gif для Internet Explorer 6, хотя это и будет выглядеть не очень хорошо. Ваш HTML элемент должен иметь нужный размер, но фоновое изображение обычно бывает больше HTML элемента и метод sprite() изменяет положение фонового изображения в соответствии с HTML элементом.

Пример использования

Здесь приведён простой пример. Следующий метод анимирует одни из спрайтов птиц, которые летают по странице. Метод ‘sprite’ собирает три кадра в png изображение с прозрачностью, в котором каждый кадр располагается сторона к стороне:

Теперь нужно просто создать div с именем ‘bird’, задать ему правильный размер (180×180 px в данном случае), и анимировать его методом sprite() . Две опции, которые надо установить — это ‘fps’ (кадров в секунду) и ‘no_of_frames’, то есть три кадра для нашего изображения:

$("#bird").sprite({fps: 12, no_of_frames: 3});

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

$("#bird").sprite({fps: 12, no_of_frames: 3}).activeOnClick().active(); $("body").flyToTap();

Метод active() делает данный спрайт активным спрайтом при загрузке страницы, иначе спрайт с activeOnClick() станет активным только после того как на него нажмут.

Метод $("body").flyToTap() отслеживает нажатие на странице, после чего текущее движение завершается, спрайт перемещается в месту нажатия. Через несколько секунд начинает использоваться метод случайных перемещений.

4. $fx()

$fx() - это маленькая самодостаточная библиотека Javascript для анимирования элементов HTML. Она не требует никаких других библиотек для работы и должна хорошо работать вместе с другими библиотеками (Prototype, JQuery, Moo tools, и так далее)

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

$fx() также предлагает возможность комбинировать настройку свойств CSS для комбинирования эффектов и позволяет устанавливать несколько обратных вызовов, что добавляет гибкости использованию библиотеки.

Пример применения

Как добавить и анимировать один простой эффект

Первое, нам нужен элемент. Подойдет любой элемент (допустим, : ). Затем можно вызвать $fx() и передать ссылку на элемент.

$fx("myDiv")

Затем, добавляем эффекты, вызывая $fxAdd(...) .

$fx("myDiv").fxAdd({type: "fontSize", from: 12, to: 72, step: 1, delay: 20});

Теперь запускаем!

$fx("myDiv").fxAdd({type: "fontSize", from: 12, to: 72, step: 1, delay: 20}).fxRun(null,-1);

5. moo.fx

moo.fx - эти суперлёгкая и ультрамаленькая библиотека эффектов JavaScript, которая используется в рабочей среде prototype.js или mootools .

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

Пример использования

Приведённый ниже код используется для создания перетаскиваемого шарика на домашней странице moo.fx .

Var ball = $("header").getElement("h1"); var ballfx = new Fx.Styles(ball, {duration: 1000, "transition": Fx.Transitions.Elastic.easeOut}); new Drag.Base(ball, { onComplete: function(){ ballfx.start({"top": 13, "left": 358}); } });

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

Raphael использует SVG и VML в качестве основы для создания графики. Таким образом, каждый графический объект, который будет создан, также является DOM объектом, и к нему можно привязать обработчик события JavaScript или модифицировать при дальнейшей работе. Основная задача Raphael — сделать работу с векторной графикой кросс-браузерной и лёгкой в использовании.

Пример использования

Демонстрация анимации , сделанной с помощью этой чудесной библиотеки.

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

// Эллипс (function () { r.circle(40, 90, 20).attr(dashed); r.ellipse(140, 90, 20, 10).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 45}); var el = r.ellipse(40, 90, 20, 20).attr({fill: "none", stroke: "#fff", "stroke-width": 2}), elattrs = [{ry: 10, cx: 140, rotation: 45}, {ry: 20, cx: 40, rotation: 0}], now = 0; r.arrow(90, 90).node.onclick = function () { el.animate(elattrs, 1000); if (now == 2) { now = 0; } }; })();

На домашней странице библиотеки можно найти демонстрацию других эффектов анимации.

Это векторный OpenSource движок для анимации в графических элементах HTML5. Burst обеспечивает подобную FLASH функциональность веб приложений и основанную на слоях, как в After Effects, систему анимации. Burst использует очень компактное ядро на JavaScript, что позволяет анимациям быстро загружаться, а процесс может быть под контролем с помощью простых методов JavaScript.

Пример использования

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

Burst.timeline("party", 0, 800, 1, false) .shape("balloon", "balloon3.svg", "svg", 0, 0, .5, 0) .shape("cake", "cake2.svg", "svg", 0, 0, 1, 0) .track("left") .key(1, -320, "easeInOutQuad") .key(200, 0) .shape("balloon") .track("top") .key(0,320) .key(100,320) .key(800, -320) .track("left") .key(0,0) .key(100, 0, "easeOutBounce") .key(800,120); Burst.start("party;", function(){ alert("Time for bed!"); }); Burst.play();

8. Canvas 3d JS Library (C3DL)

Canvas 3D JS Libary (C3DL) — библиотека JavaScript, которая облегчает создание 3D приложений, использующих WebGL. Она обеспечивает набор классов для 3D математики, объектов и сцен, который делает WebGL более доступным для разработчиков, встраивающих 3D контент в свои приложения, но которые не хотят глубоко погружаться в изучение 3D математики для достижения своих целей.

Небольшая библиотека для создания анимации на основе 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

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