JavaScript-библиотеки для создания потрясающей анимации
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 = letterTime) { document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); } if (anim.currentTime >= 2 * letterTime) { document.querySelector(".letter-o").setAttribute("fill", "#3F51B5"); } if (anim.currentTime >= 3 * letterTime) { document.querySelector(".letter-n").setAttribute("fill", "#8BC34A"); } if (anim.currentTime >= 4 * letterTime) { document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); } if (anim.currentTime >= 5 * letterTime) { document.querySelector(".letter-y").setAttribute("fill", "#795548"); } }, autoplay: false });
Аннотация: Простой пример: метод угасания желтого цвета. Анимация с помощью библиотек 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/), но как упоминалось, большинство библиотек предоставляют достаточно похожую концепцию анимации, и поэтому вы сможете реализовать принципиальную часть, используя предпочитаемую библиотеку. По существу, необходимо сделать следующее:
Выполнить анимацию с помощью 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. Scripty2Scripty2 - это мощная, гибкая рабочая среда 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 математики для достижения своих целей.
Способы проверки баланса на мегафоне
«Ваше устройство изменено
Недорогие китайские смартфоны