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 });

С появлением CSS3-анимаций, HTML-документы стали гораздо привлекательней, и разрабатывать их стало проще. Используя правило @keyframes, вы можете без труда определять различные параметры, включая расположение и размер HTML-элемента. Параметр animation, в свою очередь, отвечает за запуск и перемещение ключевых кадров в зависимости от определенных параметров. Без необходимости использовать javascript и плагины, мы можем без труда создавать даже самые сложные анимации, которые будут работать очень плавно во всех современных браузерах.

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

Комбинируем CSS и javascript при помощи нового метода animate()

Новый javascript-метод animate() позволяет нам управлять анимациями посредством скрипта. Конечно же, нам все равно нужно использовать целую пачку CSS-параметров для определения наших ключевых кадров.

{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
В вышеприведенном примере мы прикрепляем метод animate() к элементу. Внутри квадратных скобок определяется столько состояний заданного параметра, сколько нам требуется, и в нашем примере мы будем работать над height. Каждое значение записано в виде буквы объекта, а значения используются лишь для одного отдельного параметра. Комбинации вроде width и height недопустимы. Учтите, что сами значения должны быть обрамлены цитированием, и оформлены синтаксисом, отвечающим требованиям javascript, а это значит, что нужно использовать “backgroundColor” вместо “background-color”. В другой букве объекта, сразу после закрытия квадратных скобок, мы определяем дальнейшую анимацию. Мы хотим изменить длину анимацию посредством duration, частоту повторений посредством iteration и может на усмотрение определить задержку посредством параметра delay, - этот параметр определяет момент, когда должна быть запущена анимация. Все временные значения указываются в миллисекундах.

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

Нам нужно запустить метод animate() отдельно от каждого параметра, который нам нужно изменить. Это значит, что при желании изменить как height, так и width, нам нужно будет повторно запускать animate().

Document.getElementById("element").animate([
{width: "0", offset: 0},
{width: "10%", offset, 1/3},
{width: "100%", offset: 1}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
Вы вышеприведенном примере мы изменяем ширину элемента. Ширина должна изменяться, начиная от 0, и поднимаясь до 10 процентов, а затем завершиться при достижении 100 процентов. Все это будет сопровождаться плавной анимацией, естественно. Дополнительный параметр offset определяет, что изменения от 0 до 10 процентов будут занимать 1/3 всего времени, а переход от 10 к 100 займет 2/3 всего времени анимации. И при этом всем, общая продолжительность анимации определяется параметром duration. В данном случае, первая часть будет происходит на протяжении одной секунды, а вторая – на протяжении 2.

Вместо того, чтобы определять значение в виде дробей, вы также можете воспользоваться десятичными числами. Нужно использовать цифры от 0 до 1. К примеру, вместо 1/3 вы можете использовать 0.33.

Больше опций для анимации

Если вы знакомы с CSS3-параметром animation, то наверняка знаете о том, что метод animate() позволяет управлять процессом анимации. Вы можете изменять направление, а также скорость анимации, и ее ускорение. Если вы хотите указать, что после окончания, анимация должна вернуться к началу, то можете сделать это.

Document.getElementById("element").animate([
…
], {
duration: 3000,
iteration: 2,
delay: 1000,
direction: "reverse",
easing: "ease-in",
fill: "forwards"
});
Значение direction содержит в себе информацию о направлении анимации. Если вы установите значение reverse, то анимация будет воспроизведена в обратном направлении. Значение же alternate позволит вам воспроизвести анимацию в стандартном направлении, а затем в обратном. А значение alternate-reverse комбинирует два последних значения.

Значение easing позволяет вам использовать самые распространенные функции модификаций, которые уже хорошо известны по CSS3, так как там можно встречать ease-in, ease-out и так далее. По умолчанию, каждая анимация настроена на линейный ход без ускорения или замедления. Значение fill определяет, что будет представлено после окончания анимации. По умолчанию, анимация должна вернуться к стартовой точке. При использовании значения forward, анимация остановится на последнем ключевом кадре.

Управление анимацией

Применение animate() к переменной позволяет нам управлять анимацией посредством javascript. Мы можем запускать и останавливать ее по собственному усмотрению.

Var animation = document.getElementById("element").animate([
{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});

document.getElementById("animation_start").addEventListener("click", function() {
animation.play();
}, false);

document.getElementById("animation_pause").addEventListener("click", function() {
animation.pause();
}, false);
В нашем примере мы прикрепляем анимацию к переменной animation, как это ни странно. Затем мы прикрепляем 2 слушателя событий к элементам с id animation_start и animation_pause. Эти слушатели позаботятся о выполнении определенных функций при клике. Play запускает анимацию, pause уже понятно, что делает, а reverse немедленно перенесет вас к последнему ключевому кадру и полностью остановит анимацию.

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

Animation.addEventListener("finish", function() {
alert("The animation has ended.");
}, false);
В вышеприведенном примере мы просто запускаем сообщение о том, что анимация завершена.

Браузерная поддержка

animate() сейчас находится на ранней стадии разработки и сейчас обременена ярлыком «experimental». Поддержка этого параметра появится в Chrome, начиная с 36 версии. Если вы хотите опробовать ее сейчас, то можете скачать и установить Chrome Canary.

Этот материал посвящён анимации на 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, но всё что связано с анимацией в этом тэге увы...

Везде где она работает - она показывает хорошую производительность. Убедитесь сами.

1000 / 50 = 20мс var timer = setInterval(function(){ // уменьшаем текущее значение opacity op -= d0; // устанавливаем opacity элементу DOM elem.style.opacity = op; // уменьшаем количество оставшихся шагов анимации steps--; // если анимация окончена if(steps