В этой статье мы хотели бы представить вам некоторые из самых полезных 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.js

Beep.js представляет собой набор инструментов для создания браузерных JavaScript синтезаторов с использованием WebAudio API .

5. Iconate.js

Производительная JavaScript -библиотека анимации и трансформации кроссбраузерных иконок. iconate.js также поддерживает модульные шаблоны AMD и CommonJS .

6. Dom Animator

JavaScript-библиотека для вывода небольших элементов ASCII-анимации в комментариях DOM . Это самостоятельная библиотека, которая использует только JavaScript (анимация выполняется в узлах комментариев, только в DOM ).

7. Rainyday

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

Rainyday.js использует возможности HTML5 , поэтому она поддерживается большинством современных браузеров.

8. Anima.js

Anima.js позволяет использовать задержки и продолжительности, даже для анимации на CSS . Библиотека использует для создания анимации CSS-преобразования и 3d-трансформацию с включением Javascript . Вы сможете запускать, останавливать, отменять анимацию и даже создавать зависимые от событий эффекты.

9. blinkTitle.js

blinkTitle.js может создавать мигающий HTML-заголовок , предупреждение или уведомление в заголовке.

10. Snabbt.js

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

11. Vivus

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

12. Impulse

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

13. Ani.js

AniJS — это декларативная JavaScript-библиотека для обработки CSS-анимации . Она полностью задокументирована, проста в работе.

14. Bounce.js

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

15. Sticker.js

Sticker.js — это JavaScript-библиотека , которая позволяет создавать эффекты отклеивания стикеров. Библиотека работает в большинстве популярных браузеров, которые поддерживают CSS3 (в том числе IE10+ ). Распространяется под лицензией MIT License .

16. Wow.js

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

17. Parallax.js

Parallax.js — это компактное решение для создания эффектов параллакса. Библиотека также работает на смартфонах и планшетах (с гироскопом или аппаратным детектором движения ). Parallax.js имеет несколько параметров для настройки эффекта с помощью «атрибутов данных » или через JavaScript . Библиотека может работать автономно или как плагин JQuery и Zepto (существуют две версии ).

И мы с пути кривого ни разу не свернем, а надо будет снова пойдет кривым путем - х/ф Айболит 66.

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

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

Итак

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

Кривая Безье названа в честь французского инженера Пьера Безье, который является одним из ее авторов. Кубическая кривая Безье - параметрическая кривая, задаваемая выражением (), состоит из 4 пар значений, где каждая пара - это x и y координаты точек, по которым образуется кривая.

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

Как и в случае рисования кривой, так и в случае движения по кривой участвует одна и та же формула, которую можно найти на Википедии :

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

Делаем имплементацию

Предположим, мы планируем дойти от точки до точки двухсегметной кривой за четыре секунды с частотой кадров 12 fps. Тогда д елим секунду на 12 и получаем отрезок времени, которую принимаем за единицу анимации (фрейм).

Var frameDuration = 1000/12;

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

// Общее_время_в_мс / (1000_миллисекунд/количество_кадров)
var framesCount = 4000/frameDuration;

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

Var t = currentFrame/framesCount;

Таким образом, у нас е сть значение начальной точки - P0x, P0y; первой контрольной точки - P1x, P1y; второй контрольной точки - P2x, P2y; и завершающей точки - P3x,P3y, и значение прогресса анимации t . Остается подставить всё это в формулу

и мы получаем нужные нам координаты объекта в любой момент времени (t).

X = (Math.pow((1 - t), 3) * P0x) +
(3 * Math.pow((1 - t), 2) * t * P1x) +
(3* (1 - t) * Math.pow(t, 2) * P2x) +
(Math.pow(t, 3) * P3x) y = (Math.pow((1 - t), 3) * P0y) +
(3 * Math.pow((1 - t), 2) * t * P1y) +
(3* (1 - t) * Math.pow(t, 2) * P2y) +
(Math.pow(t, 3) * P3y)

Поворот к вектору движения

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

Что бы узнать угол вектора, нам нужно найти угол, который образуют две ближайших точки на кривой, по отношении к друг другу. Т.е. мы берем координаты текущего положения объекта, и координаты положения объекта в предыдущем фрейме. Назовем их x0,y0 и x,y .

Фактически x0-x, y0-y -  это две стороны треугольника, зная которые мы можем найти угол по формуле решения треугольника по двум сторонам и прямому углу между ними.

c=sqrt(a2 + b2) A=arccos((b2+c2-a2)/2bc)

Но только вот какая незадача: угол вектора может варьироваться от 0 до 360, а угол в треугольнике у нас от 0 до 179,9. Нам нужно найти угол между двумя векторами:

вектором, который образуется между двумя ближайшими точками на кривой

вектором системы координат браузера, который всегда смотрит направо.

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

Когда направляющая смотрит снизу вверх, слева направо, искомый угол нашего воображаемого треугольника находит внизу слева. В таком случае стороной a становится разница между x и x0 , а b разница между y и y0 . Результативный угол мы получаем через сумму квадратов всех сторон, деленных на двойную сумму катета и гипотенузы.

A=arccos((b2+c2-a2)/2bc)

Но когда вектор смотрит слева на право, сверху вниз, наши стороны треугольника меняются местами. В этом случае стороной a становится разница между y и y0 , а b x и x0 соответственно. Т.е. всё наоборот от предыдущего случая. Но решение остается таким же.

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

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

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

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

Парсинг Svg

Осталось сделать так, что бы скрипт, создающий анимацию, мог принимать в качестве траектории сразу SVG путь . Мне не удалось найти ни одного качественного конвертера SVG-PATH в CUBIC-BEZIER POINTS, поэтому написал собственную реализацию парсинга SVG пути в javascript-читабельный формат.

В этот процесс я не стану углубляться, скажу лишь, что английская литера M в устанавливает начало линии, далее команды s/S (smooth curveto) или c/C (curvet) позволяют создавать контрольные точки, причем значения могут быть как абсолютными, так и относительными. И хотя в SVG PATH типов команд достаточно много (M, L, H, V, C, S, Q, T, A, Z), я изучил и создал парсер только для 3-х из них. Результатом 6 часовых стараний стала функция svgPathToCubicBezierPoints , которая конвертит путь SVG в в массив точек в процентном эквиваленте.

Заключение

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

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

Краткий обзор перспективных библиотек и плагинов 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 математики для достижения своих целей.

Есть ошибочное мнение среди веб-разработчиков, что 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 анимацию на секунду длиннее? Это требует восстановления математики и изменения всех (или большинства) процентов.

Paul is a Design and Perf Advocate

Evangelises Chrome and the mobile web in the Developer Relations team at Google.

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

TL;DR

• Используйте анимацию средствами CSS для простых, коротких переходов, таких как переключение состояния элементов пользовательского интерфейса.
• Используйте анимацию средствами JavaScript, когда требуются такие сложные эффекты, как отскоки, остановка, пауза, перемотка назад или замедление.
• Если вы выбрали анимацию средствами JavaScript, используйте TweenMax или, если вам требуется более простое решение, TweenLite.

Самую простую анимацию можно создавать как с помощью CSS, так и с помощью JavaScript, однако объем затрат труда и времени будет разным (см. также статью ). У каждого варианта есть свои достоинства и недостатки, но есть хорошие правила, которым нужно следовать:

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

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

Анимация с помощью CSS

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

Далее приведен код CSS, который перемещает элемент на 100 пикселей по осям X и Y. Делается это с помощью переходов CSS, для которых задано выполнение в течение 500 мс. При добавлении класса move значение свойства transform изменяется и начинается переход.

Box { -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500ms; transform: translate(0, 0); transition: transform 500ms; } .box.move { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); }

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

Box.classList.add("move");

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

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

Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() { // Handle the transition finishing. }

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

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

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

/** * This is a simplified version without * vendor prefixes. With them included * (which you will need) things get far * more verbose! */ .box { /* Choose the animation */ animation-name: movingBox; /* The animation’s duration */ animation-duration: 1300ms; /* The number of times we want the animation to run */ animation-iteration-count: infinite; /* Causes the animation to reverse on every odd iteration */ animation-direction: alternate; } @keyframes movingBox { 0% { transform: translate(0, 0); opacity: 0.3; } 25% { opacity: 0.9; } 50% { transform: translate(100px, 100px); opacity: 0.2; } 100% { transform: translate(30px, 30px); opacity: 0.8; } }

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

Анимация с помощью CSS все еще сильно зависит от браузера, пр том что для ее обозначения в Chrome, Safari, Opera, Safari Mobile и Android Browser используется префикс -webkit- . В Internet Explorer и Firefox префиксы не используются. Есть много средств, позволяющих создавать требуемые версии CSS с префиксами, при этом версию без префикса можно написать в исходных файлах.

Анимация с помощью JavaScript

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

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

Function Box () { var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() { animationStartTime = Date.now(); requestAnimationFrame(update); }; function update() { var currentTime = Date.now(); var positionInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = positionInAnimation * 100; var yPosition = positionInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)"; if (positionInAnimation