Основы программной анимации на JavaScript

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

Проблемы программной анимации

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

Доступность значения стиля

Первая проблема связана с тем, что стили определенного элемента будут доступны в JavaScript через конструкцию [element].style только в двух случаях:

1. Если стиль был прописан в HTML inline-записью (в атрибуте style соответствующего тега), например:

<div style="position:absolute; top: 5px"></div>

В случае этого примера через JavaScript будут доступны значения свойств position и top объекта [element].style, а остальные свойства (в т.ч. установленные через CSS) будут недоступны.

2. Если соответствующие свойства были установлены через JavaScript, то они будут доступны везде, ведь на самом деле объект [element].style отражает состояние атрибута style соответствующего тега.

Если вам сложно понять, в чем же заключается проблема, взгляните на этот пример:

<style type="text/css">
    .someClass {
        margin-left: 15px;
    }
</style>
<div onclick="alert(this.style.marginLeft || 'Нету :(')" class="someClass">Нажми на меня</div>

Пример "в живую":

Как видите, хотя CSS-свойство margin-left и повлияло на отображение, его "нету" в объекте [element].style.

Справиться с этой проблемой можно получив значения из "вычисленного" или "текущего" стиля элемента. В соответствии с названиями, это будет метод getComputedStyle (Mozilla, Opera, ...) и объект currentStyle (IE).

Метод getComputedStyle

В w3c-совместимых браузерах у объекта window доступен метод getComputedStyle, который принимает два параметра - сам элемент, для которого мы хотим получить стили, и "псевдо-элемент". Второй параметр обязательный и для простых элементов должен быть пустой строкой, или null. А вообще, этот параметр работает по аналогии с "псевдо-классами" в CSS, т.е. может принимать параметры "hover", "visited" и подобные.

Этот метод возвращает объект CSSStyleDeclaration, другими словами, объект такого же типа, как и [element].style, но в данном случае мы не можем менять свойства этого объекта, а только получать их значения.

Вот переделанный пример, подобный тому, что был представлен выше:

<style type="text/css">
    .someClass {
        margin-left: 15px;
    }
</style>
<div onclick="alert(window.getComputedStyle(this, null).marginLeft)" class="someClass">Нажми на меня</div>

Пример "в живую":

Этот пример, конечно же, не будет работать в браузерах Internet Explorer.

Стоит отдельно отметить, что getComputedStyle возвращает действительные значения стилей, которые будут изменяться в соответствии с изменением свойств объекта [element].style.

Если в вашей задаче необходимо узнать значения вычисленных свойств "по-умолчанию", то вы можете вызвать метод getComputedStyle у объекта document.defaultView с теми же параметрами, в результате получив вычисленные значения свойств строго указанных в CSS, или inline-стиле элемента.

Свойство currentStyle

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

Каждый элемент имеет свойство [element].currentStyle, которое представляет собой подобие объекта [element].style, но содержит текущие стили этого элемента. Как и в случае getComputedStyle, менять эти свойства - нельзя.

В отличие от getComputedStyle, мы не можем получить значения стилей "по-умолчанию" в браузере Internet Explorer, и кроме этого, не можем получить значения стилей для "псевдо-элементов".

Обратившись к предыдущим примерам, перепишем их для Internet Explorer:

<style type="text/css">
    .someClass {
        margin-left: 15px;
    }
</style>
<div onclick="alert(this.currentStyle.marginLeft)" class="someClass">Нажми на меня</div>

Пример "в живую":

Стоит отметить, что с помощью currentStyle нельзя получить значения для "составных" CSS свойств, которые перечисляют свойства через пробел (например background). Вам нужно обращаться к составляющим свойствам напрямую (например [element].currentStyle.backgroundColor, для цвета фона). В то же время, составные свойства margin и padding выводят верные значения.

Как работать со свойствами стилей

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

var computedStyle = element.currentStyle || window.getComputedStyle(element, null);

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

Если свойство стиля, с которым будет производиться работа, не доступно в объекте [element].style, получаем его из текущих вычисленных стилей и "запоминаем", или обновляем соответствующее свойство в [element].style. После этого нам уже не нужно обращаться к действительным стилям, ведь значение интересующего нас свойства будет соответствовать значению в [element].style.

Единицы измерения

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

Обычно, если мы хотим переместить какой-то элемент, то мы получаем его текущее положение и прибавляем к нему определенное значение. Но значения в CSS хранятся в виде строки, например "15px". Поскольку в JavaScript оператор "+" производит конкатацию, если один из элементов операции - строка, то обычные операции, как с числами, тут не сработают:

var a = "15px";
a++; // NaN - not a number

var a = "15px";
a += 5; // 15px5

var a = "15px";
var b = a + 7; // 15px7

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

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

В общем виде, работа должна происходить так:

// Допустим, мы работаем с каким то элементом,
// для которого доступен style.top:
var top = parseInt(element.style.top); // Получили число из строки

top++; // Увеличили его на единицу

// Так как "px" строкового типа, то произойдет 
// конкатация и будет записано правильное значение 
// с единицами измерения:
element.style.top = top + "px";

Обратите внимание, что в последней строке мы можем сделать вот так:

element.style.top = top + 25 + 100 + "px";

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

Неточные вычисления

Об этой проблеме уже упоминалось в статье про базовые типы JavaScript.

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

while(left != 50) {
    // ... тут код ...
}

И увеличиваете позицию на нецелое число. В итоге значения 50 может и не быть вовсе, даже если вы 250 раз прибавите 0.2:

var c = 0;

for (var i = 0; i < 250; i++) {
    c += 0.2;
}

alert(c); // 50.00000000000017

Безусловно, значением свойства стиля [element].style.top, не может быть нецелое число, тем не менее, такой прием часто используют для контроля над скоростью перемещения.

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

// Взять определенное количество чисел, после запятой:
parseFloat(50.03000000000017.toPrecision(4)); // 50.03

// Округление до целого в меньшую сторону:
Math.floor(0.4); // 0

// Округление до целого в "ближайшую" сторону:
Math.round(0.4); // 0
Math.round(0.6); // 1

// Округление до целого в большую сторону:
Math.ceil(0.4); // 1

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

Основа программной анимации

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

Но в случае обычного цикла, например for или while, выполнение всех скриптов на странице, кроме самого перемещения, будет остановлено, браузер "подвиснет", пока перемещение не будет закончено. Поскольку JavaScript язык однопоточный, единственный доступный нам вариант - таймер.

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

Timeout / Interval

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

Первым параметром функции setTimeout и setInterval принимают функцию, а вторым параметром - количество миллисекунд, через которое эта функция будет выполнена. В случае интервала, функция будет выполняться бесконечное количество раз, со тем значением интервала, которое было задано вторым параметром.

Эти функции возвращают идентификатор, по которому соответствующий тайм-аут/интервал можно "очистить" функциями clearTimeout / clearInterval соответственно.

Обычно удобнее использовать "рекурсивные" тайм-ауты, для создания программной анимации:

setTimeout(function() {
    /* Тут изменение параметров */
    if (/* условие срабатывания итерации */)
        setTimeout(arguments.callee, 0);
}, 0);

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

В первом кадре анимации нам не нужны никакие изменения параметров, поэтому даже первая итерация "цикла" вызывается по тайм-ауту.

В данном примере я поставил "нулевой" тайм-аут, который будет выполнен сразу, как только выполнение JavaScript выйдет из того контекста, в котором был объявлен этот тайм-аут.

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

Математические законы

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

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

Итак, для создания анимации нам нужно знать начальное значение, конечное значение, длительность анимации (в миллисекундах, или кадрах), и начальное время анимации.

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

Основная формула

Итак, для начала определим, с какими параметрами мы будем работать:

from - начальное состояние изменяемого параметра.
to - конечное состояние изменяемого параметра.
duration - количество миллисекунд (или кадров), за которое должно быть достигнуто конечное значение.
now - текущий момент времени (или кадр) с начала анимации.
progress - значение положения анимации от 0 до 1.

По сути, progress это отношение now к duration.

Для удобства, можно вычленить общую часть из всех законов перемещения и получить общую формулу:

result = (to - from) * delta(progress) + from

Где delta - закон изменения параметра в зависимости от положения анимации (т.е. от progress).

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

Для всех примеров будет использоваться такой код:

var element = document.getElementById("example");
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result = (to - from) * delta(progress) + from;

    element.style.left = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);

Где будем объявлять разные функции delta, для наших примеров, а сам код будем выполнять по событию click на элементе примера.

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

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

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

Линейная функция

Это самый простой случай, в котором функция delta находится в прямой зависимости от progress:

Математическая формула:
delta = progress

График функции:

JavaScript функция delta:

function delta(progress) {
    return progress;
}

Пример (кликните для анимации):

Степенная функция

Это тоже простой случай, где результат delta будет равен progress, возведенному в нужную степень.

В качестве частных случаев степенной функции рассматривают квадратичные, кубические функции и т.д.

Математическая формула:
delta = progressn
Где n - показатель степени.

График функции для квадратичной функции:

JavaScript функция delta для квадратичной функции:

function delta(progress) {
    return Math.pow(progress, 2);
}

Пример для квадратичной функции (кликните для анимации):

Изменение степени меняет время нарастания скорости, например для показателя степени 5 график будет следующий:

А пример будет выглядеть так (кликните для анимации):

Функция Circ

Математическая формула:
delta = 1 - sin(arccos(progress))

График функции:

JavaScript функция delta:

function delta(progress) {
    return 1 - Math.sin(Math.acos(progress));
}

Пример (кликните для анимации):

Функция Sine

Математическая формула:
delta = 1 - sin((1 - progress) * П/2)

График функции:

JavaScript функция delta:

function delta(progress) {
    return 1 - Math.sin((1 - progress) * Math.PI/2);
}

Пример (кликните для анимации):

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

Функция Back

Эта функция изменяет параметр по типу "лука", т.е. мы сначала "отводим тетиву", а потом "стреляем". В отличие от других функций, она зависит от двух параметров.

Математическая формула:
delta = progress2 * ((x + 1) * progress - x)
Где x - коэффициент, через который высчитывается расстояние, на которое мы "отводим" параметр.

График функции (с x = 1.5):

JavaScript функция delta:

function delta(progress, x) {
    return Math.pow(progress, 2) * ((x + 1) * progress - x);
}

Пример c x = 1.5 (кликните для анимации):

Функция Bounce

Представьте себе, что мы отпускаем мячик и он падает на пол, после чего несколько раз подскакивает и останавливается. Эта функция описывает изменение параметра в точности наоборот - параметр будет "подскакивать", после чего достигнет высшей точки.

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

JavaScript функция delta:

function delta(progress) {
     for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
        if (progress >= (7 - 4 * a) / 11)
            return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
     }
}

Код этой функции взят из MooTools.FX.Transitions, как я понимаю, числа в этой функции были подобраны. Есть еще несколько разных реализаций Bounce, но это - самая короткая.

Пример (кликните для анимации):

Функция Elastic

Математическая формула:
delta = 2(10 * (p - 1)) * cos(20 * progress * П * x / 3)
Где x - коэффициент "инетрности", другими словами, на сколько значение будет колебаться в начале движения.

График функции:

JavaScript функция delta:

function delta(progress, x) {
    return Math.pow(2,10 * (progress - 1)) * Math.cos(20 * progress * Math.PI * x / 3);
}

Пример (кликните для анимации):

В отличие от других примеров, в этом время анимации было заменено на 2 секунды, иначе она происходит слишком прерывисто.

Обратные функции (easeIn, easeOut, easeInOut)

Для того, чтобы было понятно, о чем идет разговор, будем оперировать понятиями сходными с параметрами Tween в пакете Adobe Flash.

Функции, которые были приведены выше, реализуют эффект в начале анимации (easeIn). Но бывают случаи, когда нам нужно реализовать эффект в конце анимации (easeOut), либо и в начале в конце сразу (easeInOut).

Для создания эффекта в конце анимации нам нужно просто "обратить" нашу функцию delta следующим образом:
delta = 1 - delta(1 - progress)

Давайте рассмотрим пример с обратной (easeOut) функцией Bounce (кликните для анимации):

JavaScript функция delta:

function delta(progress) {
     function d(progress) {
        for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
           if (progress >= (7 - 4 * a) / 11)
               return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
        }
     }
     return 1 - d(1 - progress);
}

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

Немного сложнее сделать эффект и в начале, и в конце анимации (easeInOut).

Если значение progress меньше 0.5 (т.е. сейчас идет первая половина анимации), то функция delta будет высчитываться по формуле:
delta = delta(2 * progress) / 2

Если значение progress больше 0.5 (т.е. отображается вторая половина анимации) - то:
delta = (2 - delta(2 * (1 - progress))) / 2

Другими словами, мы меняем функцию на обратную на половине выполнения анимации.

Давайте рассмотрим easeInOut пример с функцией Elastic (кликните для анимации):

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

JavaScript функция delta:

function delta(progress, x) {
    function d(progress, x) { 
        return Math.pow(2,10 * (progress - 1)) * Math.cos(20 * progress * Math.PI * x / 3);
    }

    if (progress < .5)
        return d(2 * progress, x) / 2;
    else
        return (2 - d(2 * (1 - progress), x)) / 2;
}

Где и как применять программные анимации

Поскольку "анимировать" можно абсолютно любой параметр, то сфера применения программной анимации ограничена лишь вашей фантазией.

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

Вот, например, блок, который изменяет свой цвет по закону формулы Bounce с easeOut:

Или вы можете вообще создать какие-нибудь замысловатые анимации, например ввода текста:

Камера! Мотор!

Кроме того, вы можете применять такие анимации в элементах canvas, или при отображении vml/svg, в общем - везде, где это будет к месту.

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

Это, скорее всего, не последняя запись на тему анимации. Когда будет (свободного не бывает) время, напишу про параллельные анимации и перемещение по траектории.

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