Javascript как создать движущийся объект

Как осуществить движение объектов в Javascript: инструкция с примерами

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

Частичн о о рганизовать движение объектов на веб-странице можно, используя CSS-свойства. С приходом CSS 3 т аблица стилей сильно расширила свои возможности , п оэтому сделать простую анимацию при помощи CSS сейчас не проблема. То ест ь з аставить объект «дергаться», «пульсировать», «крутиться» и друго е м ожно при помощи CSS , и в большинстве случае в и спользование CSS будет предпочтительней, потому что таблица стилей потребляет меньше ресурсов браузера, чем JavaScript-скрипт.

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

Движение объектов при помощи JavaScript

Движение объектов — это последовательность из кадров, в которых меняются HTML и CSS свойства. Например, если изменять «style.left» в диапазоне «0рх – 150рх» — это и будет движение объекта. При этом нужно задать «плавность» или «интервал» , в котором будут сменяться кадры, чтобы эффект движения выглядел реалистичным. Например , в нашем случа е м ожно изменять положение объекта на «2рх» с интервалом 30 раз в секунду. В JavaScript за это отвечает «setInterval»

Чтобы добиться реалистичности, нужно помнить принцип кинематографа: 24 кадр а в секунду — это эффект реалистичности движения. В нашем случа е к од JavaScript мог бы быть таким:

<script>

//определяем старт движения объекта по клику на него

object.onclick = function() <

let start = Date.now(); // запоминаем время, когда начинается движение

let timer = setInterval(function() <

// определяем количество времени со старта движения

let timePassed = Date.now() — start;

if (timePassed >= 1500) <

clearInterval(timer); // заканчиваем движение через 1 , 5 секунды

return;

>

// отрисовываем движение на момент «timePassed», который прошел со старта движения объекта

draw(timePassed);

>, 24);

// пока «timePassed» отчисляет время от 0 до 1500 миллисекунд

// «left» корректирует «пиксельное» значение объекта

function draw(timePassed) <

object.style.left = timePassed / 3 + ‘px’;

>

</script>

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

Более сложное движение HTML-объектов

1. «duration» — указывает продолжительность движения ;

2. «timing(timeFraction)» — функция, которая рассчитывает время и прогресс движения ;

3. «draw(progress)» — функция, которая отрисовывает движение объекта.

Заключение

Чтобы организовать движение объекто в т огда , когда не справляется CSS, вам придется использовать JavaScript. Движение объектов в JavaScript ничем не ограничен о . Сегодня мы показали малую часть возможностей JS, но , даже если ими «поиграться» , изменя я значения аргументов, тогда можно будет сотворить что угодно.

Мы будем очень благодарны

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

Как работает JS: анимация средствами CSS и JavaScript

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Обзор

Наверняка вы знаете о том, что анимация, помимо чисто утилитарной роли, оказывает огромное влияние на привлекательность веб-приложений. Пользователи всё больше и больше обращают внимание на UX-дизайн проектов, что приводит к тому, что владельцы веб-ресурсов приходят к осознанию важности создания на своих сайтах таких условий, которые позволили бы пользователям комфортно там себя чувствовать. Всё это, помимо визуальной привлекательности страниц и удобства работы с ними, ведёт к тому, что веб-проекты становятся «тяжелее», к тому, что в их интерфейсах растёт число динамических элементов. Всё это требует более сложных анимаций, которые, например, позволяют организовать плавное изменение состояния веб-страниц в ходе работы пользователя с ними. Сегодня анимация не считается чем-то особенным. Пользователи становятся требовательнее, они уже привыкли ожидать наличия у веб-проектов интерактивных отзывчивых интерфейсов.

Однако, анимация интерфейсов — это не так уж и просто. Что анимировать? Когда анимировать? Какие ощущения должна вызывать анимация? Поиск ответов на эти вопросы может потребовать немалых усилий.

JavaScript-анимация и CSS-анимация

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

▍CSS-анимация

CSS-анимация — это самый простой способ заставить что-либо двигаться по экрану. Начнём с простого примера, демонстрирующего перемещение элемента по осям X и Y. Делается это с помощью CSS-трансформации translate , которая настроена на длительность в 1000 мс.

При добавлении класса move значение transform меняется и начинается переход. Помимо длительности, мы можем настраивать динамику анимации ( easing ). Сущность этой настройки сводится к тому, что она влияет на то, как пользователь воспринимает анимацию. О динамике анимации мы поговорим позже.

На иллюстрации ниже показана поддержка CSS-переходов современными браузерами.

Поддержка CSS-переходов современными браузерами

Как видно, эта возможность отличается очень высоким уровнем поддержки.

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

Предположим, имеется следующий элемент.

С помощью JavaScript можно запускать и останавливать его анимацию.

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

Подобные возможности совместного использования CSS — для описания анимаций, и JS — для её запуска и отключения, делают приложение хорошо сбалансированным. Разработчик может сосредоточиться на управлении состоянием элементов из JavaScript, просто назначая подходящие классы целевым элементам, позволяя браузеру самостоятельно выполнять анимации, описанные средствами CSS. Если углубиться в подобный сценарий работы с анимацией, то можно прослушивать событие transitionend элемента, но делать так стоит лишь при условии поддержки старых версий Internet Explorer.

Событие transitionend вызывается в конце перехода. Вот как с ним работать.

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

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

Вот страница, на которой показана работа этого кода.

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

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

▍JavaScript-анимация

Создавать анимации средствами JavaScript, с применением API веб-анимации, сложнее, чем использовать CSS-переходы и CSS-анимации, но этот подход обычно даёт разработчику гораздо большие возможности.

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

По умолчанию применение API веб-анимации модифицирует лишь внешний вид элемента. Если требуется, чтобы объект оставался в той позиции, в которую он был перемещён в ходе анимации, нужно, по завершении анимации, модифицировать его стиль. Именно поэтому в вышеприведённом примере мы прослушиваем событие finish и устанавливаем свойство элемента box.style.transform в значение translate(150px, 200px) , которое выражает то же самое, что было сделано с объектом с помощью второй трансформации, выполненной средствами JS.

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

Динамика анимации

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

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

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

• ease-in — это функция, при применении которой сначала анимация производится медленно, а затем — постепенно ускоряется.
• ease-out — это функция, при использовании которой анимация начинается быстро, а потом — постепенно замедляется.

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

▍Ключевые слова для управления динамикой анимации

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

• linear
• ease-in
• ease-out
• ease-in-out

▍Анимация linear

Ключевое слово linear позволяет использовать линейную анимацию. Фактически, эта анимация описывается линейной функцией, при применении которой объект анимируется с постоянной скоростью, без ускорений и замедлений.

Вот как выглядит график линейного CSS-перехода.

Анимация linear

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

Вот как выглядит описание такой анимации:

▍Анимация ease-out

Как уже было сказано, применение функции ease-out приводит к высокой скорости анимации в начале процесса (её скорость — выше, чем при применении линейной функции), которая замедляется в конце анимации. Вот как выглядит графическое представление такой анимации.

Анимация ease-out

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

Существует множество способов достичь подобного эффекта, но самый простой — воспользоваться ключевым словом ease-out в CSS:

▍Анимация ease-in

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

Анимация ease-in

В сравнении с анимацией ease-out , анимация ease-in выглядит необычно, так как она даёт ощущение низкого уровня отзывчивости элемента из-за медленного начала. Ускорение в конце так же создаёт странные ощущения, так как скорость анимации с течением времени растёт, в то время как объекты в реальном мире, перед остановкой, обычно снижают скорость.

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

▍Анимация ease-in-out

Эта анимация является комбинацией анимаций ease-in и ease-out . Вот как выглядит её график.

Анимация ease-in-out

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

Воспользоваться этой анимацией можно с помощью ключевого слова ease-in-out :

▍Создание собственных функций плавности

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

На самом деле, за ключевыми словами, о которых мы говорили выше ( ease-in , ease-out , linear ), стоят кривые Безье, подробности о применении которых для управления анимацией можно почитать здесь и здесь. Уделим им некоторое время, так как именно на них основано создание собственных функций плавности.

▍Кривые Безье

Для построения кривой Безье нужно четыре значения, или, говоря точнее — две пары чисел. Каждая пара описывает координаты X и Y опорной точки кубической кривой Безье. Сама кривая начинается в координате (0, 0), а заканчивается — в координате (1, 1). Настраивать можно свойства опорных точек. Значения X координат опорных точек должны находиться в диапазоне [0 ,1], значения Y также должны попадать в диапазон [0, 1], хотя надо отметить то, что спецификации не вполне проясняют этот момент.

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

Первая кривая Безье

Вторая кривая Безье

Как видите, два этих графика очень сильно отличатся друг от друга. Вот как выглядит описание второй кривой в CSS:

Первые два числа — это координаты X и Y первой опорной точки, вторая пара — координаты второй.

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

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

Как и за всё остальное в этом мире, за анимацию надо платить. При этом анимирование некоторых свойств обходится «дешевле», чем анимирование других. Например, анимирование свойств width и height элемента приводит к изменению его геометрии и может привести к тому, что другие элементы на странице переместятся или изменят размер. Этот процесс называется формированием макета страницы. Об этом мы говорили в одном из предыдущих материалов.

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

▍CSS-свойство will-change

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

Вот, например, как добавить это свойство для анимаций transform и opacity :

Данное свойство понимают пока не все браузеры, но, в браузерах Chrome, Firefox и Opera его поддержка имеется.

Поддержка CSS-свойства will-change

▍JavaScript или CSS?

Что выбрать для анимации — API веб-анимации, вызываемое из JS, или CSS? Вероятно, вы помните, что выше мы говорили, что на подобный вопрос нельзя дать однозначного ответа. Однако, для того, чтобы всё-таки определиться с технологией, учтите следующие соображения:

• CSS-анимации и веб-анимации, при наличии их нативной поддержки, обычно обрабатываются потоком композиции (compositor thread). Он отличается от главного потока браузера (main thread), где выполняются задачи по стилизации элементов, по формированию макета, по выводу данных на экран и по выполнению JS-кода. Это означает, что если браузер выполняет какие-то сложные задачи в главном потоке, анимации будут выполняться нормально, без перерывов.
• Анимации transforms и opacity могут быть, во многих случаях, обработаны потоком композиции.
• Если какая-то анимация вызывает перерисовку страницы или изменение макета, поработать придётся главному потоку. Это справедливо и для CSS-анимаций, и для JS-анимаций. Дополнительная нагрузка на систему, вызванная изменением макета или перерисовкой страницы, вероятно, замедлит выполнение задач, решаемых средствами CSS или JavaScript, ставя систему в непростое положение.

▍Выбор объектов для анимации

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

▍Использование анимаций для поддержки взаимодействия с пользователем

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

▍Анимации, вызывающие большую нагрузку на систему

Хуже чем неуместная анимация может быть только анимация, которая «подвешивает» страницу. Пользователям любого веб-проекта такое точно не понравится.

Итоги

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

Предыдущие части цикла статей:

Уважаемые читатели! Сталкивались ли вы когда-нибудь со случаями, когда анимация по-настоящему мешает работать с каким-нибудь веб-ресурсом?

Как создать анимацию в JavaScript за 30 минут

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

Статья подготовлена на основе вебинара с Камилем Абзаловым.

Зачем нужна анимация на сайтах

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

Как создать анимацию? Есть язык, который изначально создавался для «оживления» сайтов. Это JavaScript. Именно на нём мы и напишем вместе несколько анимаций. Мы начнём с совсем простых, а закончим одной посложнее и более практически ценной: создадим виджет Accordion (аккордеон). А потом вас ждёт небольшой бонус: сделаем анимацию в CSS3.

Какие инструменты нам понадобятся

Для работы нам понадобится библиотека jQuery (откуда её взять — расскажем чуть ниже).

Она используется на большинстве сайтов, потому что у неё много плюсов:

• дружелюбный интерфейс;
• она решает не только проблему анимаций, но и множество других;
• работает на всех браузерах;
• к ней много расширений и плагинов;
• большое комьюнити (если у вас будут вопросы, то вы быстро найдёте на них ответы).

Сегодня мы будем работать в онлайн-редакторе CodePen. Для этого не придётся ничего устанавливать, достаточно перейти по ссылке CodePen и нажать на кнопку Start Coding. Если у вас уже есть любимый редактор, вы можете использовать его.

У вас откроется рабочее пространство с тремя колонками: HTML, CSS и JS (JavaScript):

Теперь нажмём шестерёнку возле JS — на экране появится окошко с настройками. Через строку поиска найдём там jQuery:

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

Создаём простые анимации

Анимация первая

Давайте сделаем блок, который будет реагировать на клик. Для этого сначала определим div в окошке HTML.

Что такое div? Это тег, который группирует другие элементы HTML, объединяет несколько объектов — например, блок новостей. Сейчас у нас это будет просто квадрат. Назовём мы его box, а определим вот так:

Это всё, что нам сейчас нужно от окошка HTML, и мы можем перейти к следующему — CSS. В нём мы опишем, как же будет выглядеть наш div. Пусть это будет красный (red) квадрат со сторонами по 300 пикселей; для этого мы должны задать ширину (width) и высоту (height) такого размера.

Если вам больше нравятся голубые прямоугольники, то просто увеличьте ширину (или высоту) и измените цвет фона (background) на blue.

Теперь мы перейдём в столбик JS и анимируем наш div.

Сначала мы отметим для JavaScript, с каким именно блоком будем работать, а потом — при каком действии будет происходить анимация и какая:

• $(».box») ищет элемент с классом box;
• .on (‘click’), определяет, когда произойдёт анимация (в нашем случае — при клике);
• function() описывает саму анимацию — мы напишем эту функцию в фигурных скобках.

Важный момент: мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его как this.

Мы использовали функцию hide (спрятать), и теперь наш квадрат исчезнет, если на него кликнуть.

Есть ещё пара похожих функций: это slideUp() и fadeOut(). Во всех случаях наш объект исчезнет. В чём же разница?

Если мы используем slideUp, то наш квадрат как бы отъедет вверх, а если fadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.

Basic animations

Since we’re using JavaScript to control <canvas> elements, it’s also very easy to make (interactive) animations. In this chapter we will take a look at how to do some basic animations.

Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it’s running on.

Basic animation steps

These are the steps you need to take to draw a frame:

1. Clear the canvas Unless the shapes you’ll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. The easiest way to do this is using the clearRect() method.
2. Save the canvas state If you’re changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.
3. Draw animated shapes The step where you do the actual frame rendering.
4. Restore the canvas state If you’ve saved the state, restore it before drawing a new frame.

Controlling an animation

Shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. In normal circumstances, we only see these results appear on the canvas when the script finishes executing. For instance, it isn’t possible to do an animation from within a for loop.

That means we need a way to execute our drawing functions over a period of time. There are two ways to control an animation like this.

Scheduled updates

First there’s the setInterval() , setTimeout() , and window.requestAnimationFrame() functions, which can be used to call a specific function over a set period of time.

Starts repeatedly executing the function specified by function every delay milliseconds.

Executes the function specified by function in delay milliseconds.

Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

If you don’t want any user interaction you can use the setInterval() function, which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout() . By setting listeners using addEventListener() , we catch any user interaction and execute our animation functions.

JavaScript animation

Javascript can be used to create animation effects on a web page as simple as highlighting new content in yellow and then fading it back to normal, creating transitions, or moving elements on the page (think popup windows). Creative use of techniques and tools such as common Javascript libraries allows us to create user interfaces that are unobtrusive and responsive to user behavior. We begin by using JavaScript’s setInterval() function to create our own animations by manipulating DOM elements’ CSS properties to create effects. Later, we illustrate the use of code libraries like jQuery to create more complex animations or create simple effects more easily than using by Javascript alone.

Introduction

In this Web Standards Curriculum article, I will look at the art of creating animations using JavaScript — animation is often used to add to the user experience for people using browsers that support it. Common uses are: smoothly expanding and collapsing panels, progress bars, and visual feedback in forms.

As anyone who’s seen a cartoon or a flickbook knows, animation is actually done in a series of small steps that, when viewed in quick succession, make it look like something is moving. Animation is a powerful technique; it’s good at grabbing attention. Its weakness is that animations grab attention whether you want them to or not. Animated effects can make a web app feel like a more consistent experience, but they’re like hot chili: don’t add too many of them.

A simple example: yellow fade technique

One common use of animation is the Yellow fade technique, where a changed area on a page is given a yellow background color which then fades back to the original color. It’s a nice, unobtrusive way of drawing attention to the fact that something has changed without obstructing what the user is doing (e.g. indicate that more content has appeared, or provide form submission feedback). Take a look at a yellow fade example to see how it looks.

The principle behind the fade is that you set the background color of your fading element to be yellow and then, in a series of steps, set the element’s color back to the original. For example, if a background’s original color was red, the effect changes the color to yellow, then orangey-yellow, then orange, then reddish-orange, then red. The number of steps you take dictates how smooth the color change is, and the time between steps dictates how long the total color change takes.

In changing colors, we can take advantage of a useful CSS fact: a color can be defined as a triplet of ordinary numbers as well as a hexadecimal string. So #FF0000 (red) can also be specified as rgb(255,0,0) . Changing from yellow to red in five steps, then, means going from rgb(255,255,0) (yellow) to rgb(255,0,0) in the following steps:

You set the background color of your element to rgb(255,255,0) , then after a period of time (say, 100 milliseconds), change the background color to rgb(255,192,0) , and then after 100ms set the color to rgb(255,128,0) , and so on:

color	Time
rgb(255,255,0)
rgb(255,192,0)	100ms
rgb(255,128,0)	200ms
rgb(255,64,0)	300ms
rgb(255,0,0)	400ms

The whole process takes 400ms (just under half a second), and there’s a smooth fade between yellow and red. Conveniently here we’re only changing one part of the color (the green channel; the three parts of an rgb color are the red, green, and blue channels), but changing more than one channel at once is perfectly possible. In this example, you’re changing the green channel from 255 to 0 in four steps, which means changing it by 64 in each step.

Triggering an action after a certain period of time is done in JavaScript with the setTimeout and setInterval functions. The setTimeout function runs your action once after a certain time delay; setInterval runs the action over and over again, with each instance separated by the time delay; this is ideal for animation. In essence, then, the way to do this fade is to work out what each of the steps are and then use setInterval to call them, one after another. The setInterval function takes two parameters: a function to call as your action, and the time delay in milliseconds.

Obviously, you don’t want to always change from yellow to red, so the function needs to be generic. If you know the start and end colors and the number of steps then it’s a matter of mathematics to work out how much to change each color by in each step. If you define a startcolor array as a list of three numbers ( [255,255,0] ) and endcolor as a similar list ( [255,0,0] ), then the amount to change each color by in each step is:

So, use setInterval to change the background color of the element in steps:

In each step, take currentcolor and change the red channel by amount red_change , the green channel by amount green_change , and the blue channel by amount blue_change . Then, set the actual background color of the element to the new color: [255,255,0].toString() is "255,255,0", so to get the color rgb(255,255,0) we use toString() to create rgb(255,255,0) and set that as the background color of the element.

However, setInterval will call your action functon indefinitely; it won’t stop when the destination color is reached. To stop an interval, use clearInterval() ; the following code counts the number of times that the action has been called and clears the interval after the correct number of steps:

And that’s how you do animation: one step at a time.

How do startcolor and endcolor get set? One easy way is to wrap the above code up in a fade function:

and then you can trigger the yellow fade on an element with a function call like:

or a "red fade", which sets the element to red and then fades to blue (the element’s background color), like:

This example changed the background color, but it could be anything that’s changed: foreground color (for eye-pulsing 1960s psychedelic text effects), opacity (to make something fade out or fade in), position (to make an element move around the page), height and width (to grow an element, or shrink it down to nothing before it disappears).

Animation with JavaScript libraries

Animation is a commonly used effect, and so most JavaScript libraries have some sort of support for it, including in-built support for common animations. For example, jQuery has built-in support for making an element fade to transparent:

and an animate() function for more complicated custom work:

This is pretty intuitive — it will take the element and change the CSS width attribute, over 1500 milliseconds, from whatever it is now to 70% — the animate function is documented here.

Prototype’s scriptaculous framework offers similar facilities, such as Effect.Fade(‘id_of_element’) , and many, many others. The Yahoo UI library can also do similar effects:

If you’ve already used a JavaScript library in your code, you’ll already know that they offer much simpler animation facilities than managing animations yourself with setInterval . However, I think it is important to understand what is going on under the hood — it will make your scripting skills stronger in the long run. This is why I went through an example from first principles before getting into libraries.

You can find more resources about using the different JavaScript libraries at the dev.opera.com Introduction to JavaScript toolkits.

A more complex example: moving and changing size

While the Yellow Fade Technique does demonstrate animation, it’s a bit, well, boring. When most people think of animation they think of movement. Wile E. Coyote would have been way less amusing if all he ever did was change color.

A nice trick to alert the user to something that’s happened without interrupting their workflow is a non-modal message. Instead of popping up an alert() dialog, which requires the user to click OK before they can carry on, simply put the message in a floating div on the page which unobtrusively stays there until they acknowledge it. A second rather nice thing, then, might be to allow the user to get back the message that they acknowledged to read it again. So, let’s implement a floating message that, when clicked, “zooms” off to the corner of the screen, and then can be clicked on again to get it back. You can see a brief demo of this “zooming message” to get the idea.

If you’re doing any serious animation work, or any serious JavaScript work, it will almost always be worth using a JavaScript library. This will allow you to get on with providing the user experience that you want without having to worry about the nitty-gritty of the math required to run the animations. (You know how to do the math and how to use setInterval now, having read through the first example above, but you’ll save time and brain-cells letting someone else do the heavy lifting for you.)

The above demo uses the jQuery library to do the work, but as mentioned most libraries provide a fairly similar concept of animation and so you should be able to re-implement the principle using the library that you prefer. In essence, we want to do the following:

Show a floating message centered on the screen

When it’s clicked on:

1. Move its horizontal position to the far right
2. Move its vertical position to the top
3. Change its width to 20px wide
4. Change its height to 20px high
5. Change its opacity to 20% so it’s nearly transparent

and hide the text in it

When this “mini” version of the message is clicked, bring it back to the centre of the screen (ie, the opposite of what we did to shrink it)

and so the user gets a clear picture of what’s happened to their message, the transition from full-sized message to mini-message should be animated (so they see that their message has “shrunk” into the corner of the window).

Performing the animation with jQuery is simple: just use the .animate() function and provide what you want the end result of the animation to be (and how long you want it to take):

which will take ourObject and, over 300 milliseconds, change its width and height to 20px, its top and right positions to 20px, its margin-right style property to 0px, and its opacity (in browsers that support opacity) to 20%. It’s then just a matter of programming in jQuery style to make this animation happen when the message is clicked:

Restoring the message when clicked on again just requires another .animate() call:

and with a little bit of logic to dictate whether the message is currently showing or shrunk (so you know which animation to run), and some CSS to describe the initial style of the message (large, green, horizontally centred), that’s all that’s needed. A mere thirty lines of script. This is why libraries are a good idea!

CSS Transitions

Finally, some (not all) animations can actually be set up without any JavaScript at all! Safari and other Webkit-based browsers, and the upcoming Firefox 3.1, can perform transitions from one CSS value to another smoothly without using any JavaScript. This code:

will make the div smoothly fade out over one second in a supporting browser when it is hovered over. These CSS transitions are very new, however, and are not supported in anything but the most up-to-date browsers, so if you want your animation to work for most of your public then you’ll need to use DOM scripting to do it.

Summary

This concludes our look at animating web page functionality using JavaScript — I’ve taken you through some animation examples created from first principles using the setTimeout and setInterval functions, and then looked at how you can use JavaScript libraries to create animations more quickly.

Как создать анимацию в JavaScript за 30 минут

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

Статья подготовлена на основе вебинара с Камилем Абзаловым.

Зачем нужна анимация на сайтах

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

Как создать анимацию? Есть язык, который изначально создавался для «оживления» сайтов. Это JavaScript. Именно на нём мы и напишем вместе несколько анимаций. Мы начнём с совсем простых, а закончим одной посложнее и более практически ценной: создадим виджет Accordion (аккордеон). А потом вас ждёт небольшой бонус: сделаем анимацию в CSS3.

Какие инструменты нам понадобятся

Для работы нам понадобится библиотека jQuery (откуда её взять — расскажем чуть ниже).

Она используется на большинстве сайтов, потому что у неё много плюсов:

• дружелюбный интерфейс;
• она решает не только проблему анимаций, но и множество других;
• работает на всех браузерах;
• к ней много расширений и плагинов;
• большое комьюнити (если у вас будут вопросы, то вы быстро найдёте на них ответы).

Сегодня мы будем работать в онлайн-редакторе CodePen. Для этого не придётся ничего устанавливать, достаточно перейти по ссылке CodePen и нажать на кнопку Start Coding. Если у вас уже есть любимый редактор, вы можете использовать его.

У вас откроется рабочее пространство с тремя колонками: HTML, CSS и JS (JavaScript):

Теперь нажмём шестерёнку возле JS — на экране появится окошко с настройками. Через строку поиска найдём там jQuery:

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

Создаём простые анимации

Анимация первая

Давайте сделаем блок, который будет реагировать на клик. Для этого сначала определим div в окошке HTML.

Что такое div? Это тег, который группирует другие элементы HTML, объединяет несколько объектов — например, блок новостей. Сейчас у нас это будет просто квадрат. Назовём мы его box, а определим вот так:

Это всё, что нам сейчас нужно от окошка HTML, и мы можем перейти к следующему — CSS. В нём мы опишем, как же будет выглядеть наш div. Пусть это будет красный (red) квадрат со сторонами по 300 пикселей; для этого мы должны задать ширину (width) и высоту (height) такого размера.

Если вам больше нравятся голубые прямоугольники, то просто увеличьте ширину (или высоту) и измените цвет фона (background) на blue.

Теперь мы перейдём в столбик JS и анимируем наш div.

Сначала мы отметим для JavaScript, с каким именно блоком будем работать, а потом — при каком действии будет происходить анимация и какая:

• $(».box») ищет элемент с классом box;
• .on (‘click’), определяет, когда произойдёт анимация (в нашем случае — при клике);
• function() описывает саму анимацию — мы напишем эту функцию в фигурных скобках.

Важный момент: мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его как this.

Мы использовали функцию hide (спрятать), и теперь наш квадрат исчезнет, если на него кликнуть.

Есть ещё пара похожих функций: это slideUp() и fadeOut(). Во всех случаях наш объект исчезнет. В чём же разница?

Если мы используем slideUp, то наш квадрат как бы отъедет вверх, а если fadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.

Как осуществить движение объектов в Javascript: инструкция с примерами

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

Частичн о о рганизовать движение объектов на веб-странице можно, используя CSS-свойства. С приходом CSS 3 т аблица стилей сильно расширила свои возможности , п оэтому сделать простую анимацию при помощи CSS сейчас не проблема. То ест ь з аставить объект «дергаться», «пульсировать», «крутиться» и друго е м ожно при помощи CSS , и в большинстве случае в и спользование CSS будет предпочтительней, потому что таблица стилей потребляет меньше ресурсов браузера, чем JavaScript-скрипт.

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

Движение объектов при помощи JavaScript

Движение объектов — это последовательность из кадров, в которых меняются HTML и CSS свойства. Например, если изменять «style.left» в диапазоне «0рх – 150рх» — это и будет движение объекта. При этом нужно задать «плавность» или «интервал» , в котором будут сменяться кадры, чтобы эффект движения выглядел реалистичным. Например , в нашем случа е м ожно изменять положение объекта на «2рх» с интервалом 30 раз в секунду. В JavaScript за это отвечает «setInterval»

Чтобы добиться реалистичности, нужно помнить принцип кинематографа: 24 кадр а в секунду — это эффект реалистичности движения. В нашем случа е к од JavaScript мог бы быть таким:

<script>

//определяем старт движения объекта по клику на него

object.onclick = function() <

let start = Date.now(); // запоминаем время, когда начинается движение

let timer = setInterval(function() <

// определяем количество времени со старта движения

let timePassed = Date.now() — start;

if (timePassed >= 1500) <

clearInterval(timer); // заканчиваем движение через 1 , 5 секунды

return;

>

// отрисовываем движение на момент «timePassed», который прошел со старта движения объекта

draw(timePassed);

>, 24);

// пока «timePassed» отчисляет время от 0 до 1500 миллисекунд

// «left» корректирует «пиксельное» значение объекта

function draw(timePassed) <

object.style.left = timePassed / 3 + ‘px’;

>

</script>

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

Более сложное движение HTML-объектов

1. «duration» — указывает продолжительность движения ;

2. «timing(timeFraction)» — функция, которая рассчитывает время и прогресс движения ;

3. «draw(progress)» — функция, которая отрисовывает движение объекта.

Заключение

Чтобы организовать движение объекто в т огда , когда не справляется CSS, вам придется использовать JavaScript. Движение объектов в JavaScript ничем не ограничен о . Сегодня мы показали малую часть возможностей JS, но , даже если ими «поиграться» , изменя я значения аргументов, тогда можно будет сотворить что угодно.

Мы будем очень благодарны

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

Преимущество анимации на JavaScript над другими техниками

Анимация на JavaScript предлагает несколько функций, которые отличают ее от других типов анимации, таких как CSS, SVG и GIF:

• Динамическая интерактивность: С помощью JavaScript анимацию можно запрограммировать так, чтобы она динамически реагировала на пользовательский ввод и события, что делает ее высокоинтерактивной.
• Гибкость: JavaScript можно использовать для создания сложных анимаций, которых не достичь с помощью CSS, SVG или GIF.
• Управление: JavaScript обеспечивает детальный контроль над временем анимации, ослаблением и другими свойствами, позволяя разработчикам создавать анимации, которые кажутся более отточенными и профессиональными.
• Совместимость: Анимацию JavaScript можно использовать во всех современных веб-браузерах, включая мобильные устройства.
• Производительность: Анимация JavaScript может быть оптимизирована для повышения производительности, обеспечивая плавную анимацию, которая не влияет на время загрузки страницы.
• Интеграция: Анимация на JavaScript может быть легко интегрирована с другими веб-технологиями, такими как HTML, CSS и SVG.

Основные способы создать анимацию в JavaScript

Вот несколько основных приемов, используемых в анимации на JavaScript:

• Функции setInterval() и setTimeout(): это встроенные функции JavaScript, используемые для управления временем и продолжительностью анимации. setInterval() используется для повторного выполнения функции с заданным интервалом времени, в то время как setTimeout() используется для выполнения функции по истечении заданного промежутка времени.
• CSS-переходы и анимация: JavaScript можно использовать для управления CSS-переходами и анимацией, что позволяет создавать плавные анимационные эффекты, такие как затухание или выдвижение элементов.
• Изменение свойств элемента: JavaScript можно использовать для изменения свойств элементов на веб-странице, таких как размер, положение, непрозрачность или цвет. Изменяя эти свойства с течением времени, можно создавать анимации.
• Функции смягчения: Функции смягчения используются для управления ускорением и замедлением анимации, делая их более естественными и приятными для глаз. Доступны различные функции облегчения, такие как линейная, простота ввода, простота вывода и простота ввода-вывода.
• Функция requestAnimationFrame(): Это встроенная функция JavaScript, используемая для оптимизации анимации для повышения производительности путем синхронизации анимации с частотой обновления браузера.
• Библиотеки: Доступно множество сторонних библиотек анимации на JavaScript, таких как jQuery, GreenSock и Velocity.js , которые предоставляют готовые анимации и упрощают процесс создания сложных анимаций.

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

Анимация с использованием setInterval()

Вот пример использования setInterval() для создания простой анимации, которая создает движущийся бокс на экране. В этом примере у нас есть фиолетовый бокс, который движется с левого края экрана вправо, пока не достигнет 500 пикселей.

Вот пример (кликните на бокс для начала анимации):

Ниже приведен код с подробными комментариями:

Анимация с использованием setTimeout()

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

Ниже приведен код с подробными комментариями:

Анимация с использованием CSS-переходов

Пример анимации с использованием CSS-переходов и JavaScript, где анимация запускается нажатием на бокс.

Ниже приведен код с подробными комментариями.

При нажатии на бокс вызывается функция triggerAnimation(), которая добавляет класс spin к элементу box для запуска перехода.

Анимация с изменением свойств элемента

В этом примере мы используем JavaScript для определения начального и конечного цвета элемента box, и мы определяем функцию animateBox() для переключения поля между этими цветами путем изменения свойства backgroundColor элемента box. Затем мы устанавливаем интервал с помощью setInterval() для запуска функции animateBox() каждую секунду.

Ниже приведен код с подробными комментариями.

Анимация с использованием библиотеки D3.js

В этом примере мы используем D3.js чтобы создать столбчатую диаграмму из массива данных, а затем анимировать ее, обновив данные и переместив столбцы в их новые положения. Мы определяем функцию updateData(), которая генерирует новые случайные данные для графика и анимирует столбцы в их новых положениях. Затем мы устанавливаем интервал для вызова этой функции каждые 2 секунды, в результате чего диаграмма непрерывно обновляется и анимируется.

Ниже приведен код с подробными комментариями.

D3.js предоставляет широкий спектр инструментов и методик для создания сложных и динамичных визуализаций данных, что делает его отличным выбором для веб-разработчиков, которым необходимо работать с данными. Благодаря интуитивно понятному синтаксису и мощным возможностям, D3.js стал универсальным инструментом для создания привлекательных и информативных веб-приложений, управляемых данными.

Заключение

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

В этом руководстве мы рассмотрели основы анимации в JavaScript, включая использование функций setInterval() и setTimeout() для создания простых анимаций, а также использование CSS-переходов в сочетании с JavaScript для создания более сложных эффектов. Также познакомились с библиотекой D3.js для визуализации данных.