Создание анимации на базе javascript с помощью библиотеки anime.js. часть 1

Reversal: ease*

So we have a collection of timing functions. Their direct application is called “easeIn”.

Sometimes we need to show the animation in the reverse order. That’s done with the “easeOut” transform.

In the “easeOut” mode the function is put into a wrapper :

In other words, we have a “transform” function that takes a “regular” timing function and returns the wrapper around it:

For instance, we can take the function described above and apply it:

Then the bounce will be not in the beginning, but at the end of the animation. Looks even better:

Result
style.css
index.html

Here we can see how the transform changes the behavior of the function:

If there’s an animation effect in the beginning, like bouncing – it will be shown at the end.

In the graph above the regular bounce has the red color, and the easeOut bounce is blue.

• Regular bounce – the object bounces at the bottom, then at the end sharply jumps to the top.
• After – it first jumps to the top, then bounces there.

We also can show the effect both in the beginning and the end of the animation. The transform is called “easeInOut”.

Given the timing function, we calculate the animation state like this:

The wrapper code:

In action, :

Result
style.css
index.html

The “easeInOut” transform joins two graphs into one: (regular) for the first half of the animation and (reversed) – for the second part.

The effect is clearly seen if we compare the graphs of , and of the timing function:

• Red is the regular variant of ().
• Green – .
• Blue – .

As we can see, the graph of the first half of the animation is the scaled down , and the second half is the scaled down . As a result, the animation starts and finishes with the same effect.

Еще пример

Вспомним, как выглядела работа браузера в генераторе шума:

Проблема определенно в скриптах. Видно, что блок «render» самый большой. Это наша основная функция для отрисовки изображения. Посмотрим на нее:

Здесь определенно идет работа с отдельными пикселями. Это не очень здорово. Мы говорили, что по возможности лучше использовать не 2d-канвас, а WebGL, а эта задача так и хочет, чтобы ее распараллелили с помощью шейдера. Сделаем это:

Что в итоге получится? Смотрите сами:

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

Что такое CSS-анимация?

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

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

Давайте посмотрим на некоторые конкретные типы анимации ниже.

Тормозит или не тормозит, вот в чем вопрос…

Очень часто можно встретить людей, которые ничего не делают с явно тормозящим сайтом и говорят “а у меня page speed дает 100 баллов, все хорошо”. Или наоборот, на хорошо работающем сайте люди долго занимаются какими-то оптимизациями, потому, что какой-то алгоритм работает неэффективно по каким-то загадочным метрикам. Но между этими крайностями должна быть середина здравого смысла, так где же она?

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

Многие люди почему-то считают это утверждение очень глупым, но так ли это? Для конечного пользователя производительность – это не какие-то метрики или идеальные алгоритмы со строгим математическим обоснованием. Для него производительность – это одно из двух: тормозит или не тормозит.

Как он это определяет? Глаз человека, проводящего много времени за монитором, начинает резко реагировать на падение fps. Это вызывает странное чувство дискомфорта. Соответственно наша задача, как разработчиков, не допускать проседания. Пользователь привык видеть работу браузера в 60fps? Хорошо, значит делаем все, чтобы все так и оставалось. Берем ноутбук со средним железом и смотрим. Видим сильно меньше 60fps – оптимизируем. Видим около 60 – ничего не трогаем. Пользователь разницы все равно не заметит, а мы потратим кучу времени на оптимизации ради оптимизаций.

Виды

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

• фиксированного размера – в рекламных сетях они наиболее популярны;
• адаптивный (тянущийся, резиновый) – может растягиваться в ширину либо в высоту, занимая всю площадь экрана;
• Fullscreen – открывается полностью на весь экран. Часто используется для демонстрации на планшетах и мобильных устройствах, потому, он должен быть адаптивным. Чаще всего в них присутствует таймер отсчета времени и кнопка «Закрыть»;
• раскрывающийся – первоначально на экране присутствует только его тизер (стартовая панель). После того, как выполнен определенный алгоритм действий (нажатие на баннер или наведение мышки и т.д.), раскрывается остальная его часть, содержащая дополнительную информацию.

В рекламных сетях кроме вышеперечисленных используют видео, игровые интерактивные, 3D баннеры, с подгрузкой внешних данных и API, «умные» калькуляторы. Также разработчики успешно применяют различные варианты совмещения вышеописанных форматов (к примеру – видео-баннер, тянущийся на всю ширину экрана и т.д.).

animation-fill-mode

Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации.

Давайте представим себе кнопку, которая является:

• красной по умолчанию;
• становится синей в начале анимации;
• и в итоге зелёной, когда анимация завершена.

animation-fill-mode	До анимации	Начало анимации	Конец анимации	После анимации
none	По умолчанию	Начало	Конец	По умолчанию
forwards	По умолчанию	Начало	Конец	Конец
backwards	Начало	Начало	Конец	По умолчанию
both	Начало	Начало	Конец	Конец

Основные шаги анимации

Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:

1. Очистить canvas
   Если фигура, которую вы собираетесь нарисовать, не занимает всю площадь canvas (как фон, например), то всё что было нарисовано ранее необходимо стереть. Проще всего это сделать при помощи метода .
2. Сохранить изначальное состояние canvas
   Если вы изменяете любые настройки (такие как стили, трансформации и т.п.), которые затрагивают состояние canvas и вы хотите убедиться, что оригинальное состояние используется каждый раз, когда был отрисован кадр, то вам следует сохранить это оригинальное состояние.
3. Нарисовать анимированные фигуры
   Шаг на котором вы собственно отрисовываете кадр.
4. Восстановить состояние canvas
   Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.

requestAnimationFrame

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

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

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

Для этого в JavaScript-фреймворках, которые поддерживают анимацию, есть единый таймер:

setInterval(function() {
  /* отрисовать все анимации */
}, 20);

…Все анимации, которые запускает такой фреймворк, добавляются в общий список, и раз в 20 мс единый таймер проверяет его, запускает текущие, удаляет завершившиеся.

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

Синтаксис:

var requestId = requestAnimationFrame(callback)

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

Если запланировать в какое-то рисование, то оно будет сгруппировано с другими и с внутренними перерисовками браузера.

Возвращаемое значение служит для отмены запуска:

// отменить запланированное выше выполнение callback
cancelAnimationFrame(requestId);

Как правило, запуск происходит очень скоро. Если у процессора большая загрузка или батарея у ноутбука почти разряжена — то пореже.

Если вы запустите этот код, то увидите промежутки между первыми 20 запусками . Как правило, это 10-20 мс, но бывает и больше и меньше. Это оптимальная частота анимации с точки зрения браузера.

<script>
  var prev = performance.now();
  var times = ;

  requestAnimationFrame(function measure(time) {
    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
    prev = time;

    if (times++ < 10) requestAnimationFrame(measure);
  })
</script>

Функция анимации на основе :

// Рисует функция draw
// Продолжительность анимации duration
function animate(draw, duration) {
  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // определить, сколько прошло времени с начала анимации
    var timePassed = time - start;

    // возможно небольшое превышение времени, в этом случае зафиксировать конец
    if (timePassed > duration) timePassed = duration;

    // нарисовать состояние анимации в момент timePassed
    draw(timePassed);

    // если время анимации не закончилось - запланировать ещё кадр
    if (timePassed < duration) {
      requestAnimationFrame(animate);
    }

  });
}

Использование для поезда:

animate(function(timePassed) {
  train.style.left = timePassed  5 + 'px';
}, 2000);

В действии:

RequestAnimationFrame

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

Во-первых, если на странице анимируется больше одного элемента и мы будем вызывать requestAnimationFrame много раз, то это приведет к резкому проседанию fps. В теории так быть не должно, но на практике все происходит именно так. Ознакомиться с тестами можно здесь.

Второй момент связан скорее с ситуацией, когда у нас уже есть тяжелая анимация, возможно с применением канваса, от которой мы не можем избавиться или времени нет переделывать, и происходит следующее: допустим анимация должна выполняться за N секунд и мы уже используем requestAnimationFrame. Но требуется много ресурсов для расчета текущего состояния и мы видим такую картину: анимация работает плавно, красиво, но за 2N, а то и 3N секунд. В результате все воспринимается оооччччеееннь меееедддллеенным. Для того, чтобы хоть как-то поправить такое поведение, можно пойти против всех рекомендаций, воспользоваться тем самым setInterval / setTimeout и привязать состояния анимируемых элементов к физическому времени, а не к абстрактным кадрам. В результате мы получим формальное уменьшение fps, но с психологическим эффектом прироста производительности.

Удивительность JavaScript: физика

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

Утилита физики в проекте движения наталкивается на базовый принцип того, что делает для UX: интерфейсы, которые естественно плывут от ввода пользователя — другими словами, интерфейсы, которые придерживаются движения подобного реальному миру.

GSAP предлагает физики плагины, которые адаптируются к ограничениям пользовательского интерфейса. Например, ThrowPropsPlugin отслеживает динамическую скорость пальца пользователя или мыши, и когда пользователь отпускает, ThrowPropsPlugin выбирает соответствующую скорости и заставляет элемент естественно остановиться. Получающаяся анимация — стандартный промежуточный кадр, который может управляться временем (приостановленный, инвертированный, и т.д.):
Velocity предлагает тип упрощения на основе физики упругости. Обычно с упрощением опций вы передаете в именованном типе упрощения; например, ease, ease-in-out или easeInOutSine. С физикой упругости вы передаете массив с двумя элементами, состоящий из силы и значений трения (в скобках ниже):

1	Velocity(element, { left 500 }, 500, 20 ); // 500 натяжение, 20 трение

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

Оптимизация производительности анимации

Если вы делаете HTML 5 приложение на Android, можно попробовать сделать следующее:

В параметры вашего активити допишите android:hardwareAccelerated=»true»

Это даст акселерацию на железе, GPU при включённой опции усиленно ворвётся в работу и наряду с CPU будут полностью заняты обработкой вашего приложения. Из минусов только то, что батарейка кушаться будет слегка повеселее.

Так же не используйте событие onclick (хоть оно и работает на тачскрине). Дело в том что это событие делает задержку примерно в треть секунды и чтобы этого не было лучше используйте ontouchstart и ontouchend.

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

Симулятор частиц

Это всё, что на самом деле нужно для анимации. Рисовать что-то снова и снова. Попробуем нечто немного более сложное: симулятор частиц. Мы хотим, чтобы некоторые частицы падали вниз по экрану подобно снегу. Для этого мы реализуем классический алгоритм симулятора частиц:

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

Вначале мы создаём основу симулятора частиц. Это функция цикла, которая вызывается каждые 30 мс. Для структуры данных нам требуется пустой массив частиц и счётчик тактов. На каждой итерации цикла выполняется четыре части.

Функция createParticles проверяет, сколько у нас частиц. Если их меньше 100, то создаёт новую частицу

Обратите внимание, что проверка выполняется только каждые 10 тактов. Это позволяет начать с пустого экрана, а затем постепенно наращивать число частиц, а не создавать все 100 с самого начала

Вы можете настроить параметры в зависимости от желаемого эффекта. Я использую Math.random() и другую арифметику чтобы убедиться, что снежинки располагаются в разных местах и не выглядят одинаковыми. Так снег становится более натуральным.

Функция updateParticles довольно простая. Она обновляет координату каждой частицы, добавляя ей скорость. Это заставляет снежинку двигаться вниз по экрану.

Вот killParticles. Она проверяет что частица находится ниже нижнего края холста. В некоторых симуляторах вы уничтожаете частицу и удаляете её из списка. Поскольку это приложение показывает непрерывный снег, то мы повторно задействуем частицу, установив её обратно в 0.

Наконец рисуем частицы. Опять же это очень просто: очистите фон, нарисуйте круг с текущими координатами, радиусом и цветом частицы.

Теперь это выглядит так.

Симулятор частиц для снега (щёлкните для запуска)

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

Свойство CSS transition – параметры и значения

Синтаксис

Для начала, давайте посмотрим, как читается это свойство, и разберем его синтаксис. Мы пишем это свойство примерно так:

Мы присваиваем это свойство тому элементу, который мы хотим анимировать. Этот элемент получает плавный переход (или пошаговый) между несколькими своими состояниями (например, высота 100 пикселей и высота 200 пикселей). И то, как будет выглядеть этот переход (с англ. transition), будет зависеть от параметров, которые мы ему зададим.

Первым параметром (значением) свойства transition является другое свойство анимируемого элемента (например, height).

Вторым параметром является длительность (продолжительность) анимации, то есть, сколько времени займет переход элемента из одного состояния в другое (например, 2s или 2000ms).

Третий параметр – это тайминг функция (изинг функция ). То, как интенсивность анимации распределится на протяжении всего времени. Например, анимация может резко начаться, а под конец замедлиться и плавно закончить переход. Могут использоваться как ключевые слова (например, ease, ease-in-out, linear), так и функции кубика Безье (например,  cubic-bezier(0.17, 0.67, 0.83, 0.67)). Кубик Безье вы можете легко и удобно настраивать на этом ресурсе http://cubic-bezier.com , а также функция steps для того, чтобы создать покадровую анимацию (пошаговую).

Ну и наконец, параметр задержка. Задержка анимации – это время, которое необходимо подождать, прежде чем анимация (в нашем случае — переход) начнется.

Пример анимации CSS transition

Давайте рассмотрим такой пример CSS анимации:

Тут мы анимируем только свойство opacity (непрозрачность). Это означает, что если у элемента, который мы собираемся анимировать, есть и другие свойства, например, высота, ширина или цвет, и даже, если эти свойства отличаются в разных состояниях элемента, то плавный переход (анимация) будет только у свойства opacity. Понимаете?

Вместо конкретного свойства можно использовать также ключевое слово «all». Это означает, что мы анимируем абсолютно все свойства элемента, которые были изменены в новом состоянии элемента (а не только opacity), и которые вообще можно анимировать. Потому что, как вам известно, не все свойства можно анимировать. Но об этом немного позже.

Второй параметр (300ms) говорит нам о том, что анимация продлится всего 300 миллисекунд. То есть элемент быстро появится или быстро растворится, в зависимости от значений свойств в двух его состояниях.

Тайминг функция (ease-in-out) третьим параметром сделает начало и конец анимации более плавными.

Задержка (1s) показывает на сколько должна опоздать анимации перед ее срабатыванием.

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

Structured animation

Now we can make a more universal animation function based on :

Function accepts 3 parameters that essentially describes the animation:

Total time of animation. Like, .

Timing function, like CSS-property that gets the fraction of time that passed ( at start, at the end) and returns the animation completion (like on the Bezier curve).

For instance, a linear function means that the animation goes on uniformly with the same speed:

It’s graph:

That’s just like . There are more interesting variants shown below.

The function that takes the animation completion state and draws it. The value denotes the beginning animation state, and – the end state.

This is that function that actually draws out the animation.

It can move the element:

…Or do anything else, we can animate anything, in any way.

Let’s animate the element from to using our function.

Click on the element for the demo:

Result
animate.js
index.html

The code for it:

Unlike CSS animation, we can make any timing function and any drawing function here. The timing function is not limited by Bezier curves. And can go beyond properties, create new elements for like fireworks animation or something.

Цикл анимации

Цикл анимации — это функция, которая вызывается с повторяющимися интервалами. Она содержит код, отвечающий за изменение значений свойств. Чтобы было понятнее, взгляните на следующий пример (запустите его в отдельном окне):

Вы увидите синий круг, который неподвижен. Нажмите на кнопку move и обратите внимание, что произойдет. Круг сместится немного вправо. Нажмите на кнопку move» снова, чтобы продолжить смещение. Чем быстрее вы нажимаете кнопку, тем быстрее будет двигаться круг. После нескольких нажатий круг исчезнет справа. Если вы продолжите нажимать кнопку, круг снова появится слева и продолжит движение вправо

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

Разметка и код примера:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Animating in Code!</title>
  <style>
    body {
      background-color: #FFF;
      margin: 30px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    #contentContainer {
      width: 550px;
      height: 350px;
      border: 5px black solid;
      overflow: hidden;
      background-color: #DFF2FF;
      display: flex;
      align-items: center;
    }

    #circle {
      width: 200px;
      height: 200px;
      background-color: #20A6FF;
      border-radius: 50%;
    }

    #move {
      background-color: gold;
      margin-top: 20px;
      font-size: 16px;
      font-weight: bold;
      border: 5px solid #333;
      outline: none;
    }
    #move:hover {
      background-color: coral;
    }
    #move:active {
      background-color: yellowgreen;
    }
  </style>
</head>

<body>
  <div id="contentContainer">
    <div id="circle"></div>
  </div>

  <input id="move" type="button" value="move"></input>

  <script>
    var circle = document.querySelector("#circle");

    var button = document.querySelector("#move");
    button.addEventListener("click", animate, false);

    var xPos = 0;

    function animate() {
      xPos += 10;

      circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

      if (Math.abs(xPos) >= 900) {
        xPos = -500;
      }
    }
  </script>
</body>

</html>

Создайте новый HTML-документ и скопируйте в него приведенный выше код. Сохраните файл и откройте его в браузере. Вы должны увидеть тот же пример, который работает локально на вашем компьютере:

В нашем примере функция animate вызывается каждый раз, когда для кнопки запускается событие click:

var button = document.querySelector("#move");
button.addEventListener("click", animate, false);

Код, окружающий функцию animate, выглядит следующим образом:

var xPos = 0;

function animate() {
  xPos += 10;

  circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

  if (Math.abs(xPos) >= 900) {
    xPos = -500;
  }
}

Переменной xPos задано значение . Каждый раз, когда вызывается функция animate, значение переменной увеличивается на 10. Круг перемещается вправо благодаря следующей строке кода:

circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

Мы используем функцию translate3d и задаем для горизонтального положения значение, сохраненное в переменной xPos. Когда значение xPos становится большим, и круг исчезает за пределы видимости, значение xPos сбрасывается до -500:

if (Math.abs(xPos) >= 900) {
  xPos = -500;
}

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

Но чтобы получить настоящую анимацию нужно, чтобы круг двигался автоматически. Это можно сделать, повторно вызывая функцию animate через равные промежутки времени. Тут в игру вступает цикл анимации.

Цикл анимации — это функция, которая вызывается многократно благодаря обычной функции таймера requestAnimationFrame. Давайте изменим наш пример.

Внутри тега <script> внесите следующие изменения:

var circle = document.querySelector("#circle");

var xPos = 0;

function animate() {
  xPos += 10;

  circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

  if (Math.abs(xPos) >= 900) {
    xPos = -500;
  }

  requestAnimationFrame(animate);
}
animate();

Что мы сделали:

1. Вызвали  функцию animate явно, чтобы она запускалась автоматически, без нажатия кнопки.
2. Поместили ниже функцию requestAnimationFrame,который будет вызывать функцию animate в каждом интервале обновления кадра.

Мы также удалили код, связанный с работой кнопки. Если бы мы просматривали анимацию в ее текущем состоянии, она выглядела бы следующим образом:

При добавлении вызова requestAnimationFrame мы добавили функцию animate в захватывающий цикл анимации. Он отвечает за перемещение круга вправо на 10 пикселей при каждом обновлении кадра.

Программы для создания анимации

Cinema 4D — универсальная комплексная программа для создания и редактирования трехмерных эффектов и объектов. 

Adobe After Effects —  программное обеспечение компании Adobe Systems для редактирования видео и динамических изображений, разработки композиций, анимации и создания разнообразных эффектов. 

Adobe Illustrator — редактор векторной графики и других дизайнерских решений.

Adobe Photoshop — многофункциональная программа графический редактор для создания 2D, 3D анимации, расовой графики и набором функций для создания векторных изображений. Большо о программе Adobe Photoshop можно прочитать в Википедии

Тебе также может быть интересно:

Анимация vs Мультипликация: в чём разница?

CSS Анимация

Давайте рассмотрим анимацию с помощью CSS3. Как известно в CSS3 к нам пришло удивительное свойство animation с помощью которого можно полноценно делать анимацию тех или иных объектов.

Как это происходит? Например мы хотим передвинуть элемент #obj в право на 300 пикселей и вернуть обратно, при чём зациклив анимацию до бесконечности. С CSS3 это стало очень легко исполнимой операцией.

Объекту присваеваем помимо стандартных ширины и высоты, свойства:

-webkit-animation: 3s moving linear infinite;animation: 3s moving linear infinite;

Для большей кроссбраузерности мы задали объекту два свойства, в которых 3s — з секунды на выполнение всей анимации, moving — название анимации, которая применяется к объекту(Ниже-подробнее), linear — флаг, который заставляет двигаться объект с одинаковой скоростью на всех участках, infinite — флаг делающий анимацию бесконечной.

Что ж, теперь коснёмся самой анимации moving. Её нужно будет прописать в том же CSS файле где вы её применяете. Раньше да и сейчас некоторые используют для передвижения объекта по экрану параметры left/right/top/bottom или margin. На самом деле это весьма плохая практика и делать так не стоит, так как это несколько неоптимизированный способ — можно обеспечить более плавное движение другими CSS3 свойствами Этими свойствами являются translatex и translatey.

/*Плохая анимация*/@-webkit-keyframes moving {from {margin-left: 0;}50% {margin-left: 300px;}to {margin-left: 0;}}

/*Хорошая анимация*/@-webkit-keyframes moving {from {transform: translatex(0);}50% {transform: translatex(300px);}to {transform: translatex(0);}}

Так же следует отметить что transition в таких событиях как hover ведёт себя также очень достойно и на мобильных устройствах. Ну а вообще тот же самый transition или CSS3 animation вы можете повесить на любой элемент с помощью JS. В таком случае вы получите лучший вариант (JS указывает что анимировать, CSS анимирует).

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

Анимация перемещения элементов списка

Компонент <transition-group>  способен анимировать не только появление и удаление элементов, но также и их перемещение. Происходит это путём добавления класса v-move, который указывается при изменении позиции элементов. Как и с другими классами, префикс устанавливается в соответствии с указанным значением атрибута name. Аналогично, можно указать класс вручную в атрибуте move-class.

Этим классом удобнее всего указывать продолжительность и тайминги перехода:

Хотя это и может выглядеть как магия, “под капотом” Vue использует довольно простую анимационную технику под названием FLIP, которая позволяет плавно перевести элементы с их старых позиций на новые, используя CSS-трансформации.
Теперь мы можем совместить эту технику с нашим предыдущим примером, чтобы анимировать все возможные изменения нашего списка!

Рисование в JavaScript

Существует несколько технологий создания векторной графики, которые могут
быть использованы в сценариях JavaScript. Это, например, такие технологии,
как SVG, VML, FLASH. Кроме того
HTML-тег
предоставляет API для рисования из сценариев. Именно на последней технологии и остановимся чуть более подробно.

Основная часть прикладного интерфейса определена не в
элементе , а в объекте «контекста рисования».
Получить доступ к этому объекту можно методом элемента, играющего роль «холста» для рисования.

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

<html>
<head>  

<script>
//Создает рисунок после загрузки документа
window.onload = function() 
{ 
  //Получить элемент холста
  var canvas = document.getElementById("square");   
  var context = canvas.getContext("2d");  //Получить 2D контекст
  context.fillStyle = "#0f0";             //Цвет заливки зелёный
  context.fillRect(0, 0, 20, 20);         //Залить квадрат
  canvas = document.getElementById("circle"); //Новый элемент холста
  context = canvas.getContext("2d");          //Получить его контекст
  context.fillStyle = "#f00";                 //Цвет заливки красный
  context.beginPath();                        //Начать рисование
  //Добавить в рисунок окружность с радиусом 10 
  //и с центром в точке (15,15)
  context.arc(15, 15, 10, 0, 2*Math.PI, true);
  context.fill( );                            //Залить фигуру
}
</script>

</head>

<body>

Зелёный квадрат: <canvas id="square" width=20 height=20></canvas>
<br><br>
Красный круг: <canvas id="circle" width=30 height=30></canvas>

</body>

</html>

Анимация через requestAnimationFrame

Теперь, когда мы знаем, как нарисовать много интересных штук, давайте оживим их. Первое, что нужно знать об анимации — это просто рисование одного и того же снова и снова. Когда вы вызываете функцию рисования, то она сразу же добавляет что-то на экран. Если вы хотите анимировать это, просто подождите несколько миллисекунд и нарисуйте это заново. Конечно, вы не хотите сидеть в ожидании пока цикл не прервётся браузером. Вместо этого вы должны нарисовать что-то, затем попросить браузер вызвать это снова через несколько миллисекунд. Самый простой способ сделать это — с помощью функции JavaScript setInterval(). Она будет вызывать вашу функцию рисования каждые N мс.

Однако в реальности мы никогда не должны использовать setInterval. setInterval всегда будет рисовать с одной скоростью, независимо от того, какой у пользователя компьютер, что делает пользователь и активна ли текущая страница. Короче говоря, это работает, но не эффективно. Вместо этого мы должны использовать новый API requestAnimationFrame.

requestAnimationFrame был создан, чтобы сделать анимацию плавной и эффективной в плане затрат. Вы вызываете её с указателем на свою функцию рисования. В какой-то момент в будущем браузер вызовет вашу функцию рисования, когда браузер окажется готов. Это даёт браузеру полный контроль над рисованием, так что он может снизить частоту кадров при необходимости. Браузер также может сделать анимацию более плавной, зафиксировав частоту обновления экрана на 60 кадрах в сек. Чтобы зациклить анимацию просто вызовите requestAnimationFrame рекурсивно в начале.

requestAnimationFrame становится стандартом, но большинство браузеров поддерживает только свои собственные версии с префиксом. Например, Chrome использует webkitRequestAnimationFrame, а Mozilla поддерживает mozRequestAnimationFrame. Чтобы исправить это, мы воспользуемся скриптом Пола Ириша. Он просто соединяет разные варианты в новой функции: requestAnimFrame.

Попробуем простой пример, в котором мы анимируем прямоугольник на экране.

Базовая анимация прямоугольник с помощью requestAnimFrame (щёлкните для запуска)