анимация на js примеры с кодом
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
Anime.js — небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.
Вы полностью контролируете последовательность воспроизведения анимации и управляете синхронизацией анимации разных элементов друг относительно друга. Библиотека поддерживает все современные браузеры, включая IE10 и новее.
В этой серии обучающих статей вы узнаете обо всех функциях Anime.js и сможете применять библиотеку в своих проектах.
Примечание Если вы совсем новичок в JavaScript, предлагаем вам ознакомиться с вводной статьёй по этому языку программирования.
Установка библиотеки
Для установки можно использовать команды npm или bower :
Вы также можете загрузить библиотеку и включить в свой проект или ссылаться на её последнюю версию через CDN.
После успешной установки вы сможете использовать Anime.js для добавления интересных анимаций к вашим элементам. Давайте начнём с базовых возможностей библиотеки.
Определение целевых элементов
Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения targets в Anime.js.
Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.
Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из AAA в BOY будет выведено сообщение об ошибке.
Какие свойства можно анимировать с помощью Anime.js
Теперь вы знаете, как определить разные элементы, которые нужно анимировать. Пришло время узнать, какие свойства и атрибуты могут быть анимированы при использовании библиотеки.
Свойства CSS
CSS-трансформирование
Атрибуты SVG
Единственное условие заключается в том, что значение атрибутов должно быть числовым. Способность анимировать разные атрибуты открывает возможности для создания некоторых классных эффектов. Поскольку эта статья ознакомительная, в ней будут приведены простые примеры.
Атрибуты DOM
Заключение
Вы познакомились со всеми вариантами выбора элементов в Anime.js, а также узнали, как анимировать разные свойства CSS и атрибуты, связанные с ними.
В следующей статье вы узнаете, как контролировать плавность, задержку и длительность анимации как для единичных свойств, так и для группы. Затем вы научитесь контролировать все эти параметры для каждого отдельного элемента.
Как создать анимацию в 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, с каким именно блоком будем работать, а потом — при каком действии будет происходить анимация и какая:
Важный момент: мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его как this.
Мы использовали функцию hide (спрятать), и теперь наш квадрат исчезнет, если на него кликнуть.
Есть ещё пара похожих функций: это slideUp () и fadeOut (). Во всех случаях наш объект исчезнет. В чём же разница?
Если мы используем slideUp, то наш квадрат как бы отъедет вверх, а если fadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.
Простые анимации
Поскольку для управления элементами используется JavaScript, не составляет труда сделать (интерактивные) анимации. В этой главе мы рассмотрим, как делаются некоторые базовые анимации.
Вероятно, самым большим ограничением является то, что когда фигура нарисована, её уже нельзя двигать. Чтобы изобразить движение нам нужно перерисовать фигуру и всё, что было нарисовано до неё. Перерисовка сложных кадров занимает много времени, и производительность сильно зависит от скорости компьютера, на котором она выполняется.
Основные шаги анимации
Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:
Управление анимацией
Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя.
Это значит, нужен способ выполнения функций отрисовки через интервалы времени. Есть два способа для управления такой анимацией.
Запланированные обновления
setInterval(function, delay) (en-US) Начинает периодически исполнять функцию function каждые delay миллисекунд. setTimeout(function, delay) Запускает выполнение указанной функции function через delay миллисекунд. requestAnimationFrame(callback) Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию callback для обновления анимации перед следующей перерисовкой.
В примерах ниже мы будем использовать функцию window.requestAnimationFrame() для контроля анимации. Функция requestAnimationFrame является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью Анатомия видеоигр В Зоне разработке игр.
Анимированная солнечная система
В этом примере анимируется небольшая модель солнечной системы.
| Screenshot | Live sample |
|---|---|
 |
Анимированные часы
В этом примере создаются анимированные часы, показывающие правильное время.
| Screenshot | Live sample |
|---|---|
 |
Зацикленная панорама
В этом примере панорама прокручивается слева направо. Мы используем фото национального парка Йосемити взятое из Википедии, но вы можете использовать любое изображение, большее элемента canvas.
Создание анимации в JavaScript
Если вы не являетесь поклонником JavaScript, то сразу им станете, как только увидите, сколько классных анимаций можно создать этого языка.
Зачем анимировать элементы с помощью JavaScript
При использовании CSS браузер выполняет за вас большую часть анимации. Для ее реализации разработчик просто определяете начальное и конечное состояние:
Если анимация используете ключевые кадры, вы также задаете несколько промежуточных состояний:
Но это не является анимацией. Это значения свойств, заданные в определенные моменты анимации. Именно изменение значений между этими точками важно для работы анимации:
Эту интерполяцию для вас выполняет браузер. Но эта помощь обходится дорого. Вы должны точно указывать ключевые кадры в различные моменты времени, когда свойства должны иметь определенное значение. Эта точность делает CSS-анимацию сложной в реализации.
С помощью JavaScript мы можем намного проще создавать сложную анимацию. Например, создать что-то вроде эффекта падающего снега без использования JavaScript будет трудно.
Цикл анимации
Цикл анимации — это функция, которая вызывается с повторяющимися интервалами. Она содержит код, отвечающий за изменение значений свойств. Чтобы было понятнее, взгляните на следующий пример ( запустите его в отдельном окне ):
Чем быстрее вы нажимаете кнопку, тем быстрее будет двигаться круг. После нескольких нажатий круг исчезнет справа. Если вы продолжите нажимать кнопку, круг снова появится слева и продолжит движение вправо.
Разметка и код примера:
Создайте новый HTML-документ и скопируйте в него приведенный выше код. Сохраните файл и откройте его в браузере. Вы должны увидеть тот же пример, который работает локально на вашем компьютере:
В нашем примере функция animate вызывается каждый раз, когда для кнопки запускается событие click :
Код, окружающий функцию animate, выглядит следующим образом:
В результате позиция круга переходит влево, и он появляется, когда мы продолжаем нажимать кнопку.
Но чтобы получить настоящую анимацию нужно, чтобы круг двигался автоматически. Это можно сделать, повторно вызывая функцию animate через равные промежутки времени. Тут в игру вступает цикл анимации.
Цикл анимации — это функция, которая вызывается многократно благодаря обычной функции таймера requestAnimationFrame. Давайте изменим наш пример.
Как сделать js анимацию с помощью Anime.js
Существует много JavaScript библиотек для веб анимации, и Anime.js одна из лучших. Ей легко пользоваться, у нее есть небольшой и простой API и она имеет все что нужно современному анимационному движку. Anime.js мало весит и поддерживает все современные браузеры, включая IE/Edge 11+.
Как сделать js анимацию с помощью Anime.js
Единственное, что может вас остановить от использования Anime.js, так то ее скромная документация. Более подробные объяснения были бы полезней, но это мы постараемся исправить в этом уроке.
Anime.js — первая анимация
Для того, чтобы начать, скачаем и подключим anime.js файл в наш HTML код.
Либо можно использовать последнюю версию, которая хостится на CDN.
Для описания анимации используется несколько свойств. Они сгруппированы в четыре различных категории:
Посмотрим как это применяется на практике.
Мы сделали нашу первую js анимацию. В приведенном выше примере:
Вы можете заметить, что мы не используем никаких единиц измерения, потому что они добавляются автоматически. Но если вы хотите использовать специфические единицы измерения, можно намеренно их указать.
Давайте создадим более значимую анимацию.
Анимация маятника
В этом примере мы создадим анимацию маятника, нарисуем его используя наши навыки HTML и CSS.
Давайте перейдем к следующему примеру.
Js анимация зарядки аккумулятора
В этом примере мы создадим анимированную иконку зарядки батареи, похожую на ту, что в наших смартфонах. Это легко сделать, используя небольшое количество HTML и CSS. Вот код анимации:
Также мы используем параметр endDelay для приостановке анимация перед повторным запуском.
Улучшаем анимацию зарядки аккумулятора
Наша анимация выглядит хорошо, но мы можем ее улучшить, добавив метку прогресса, которая будет показывать процент заряда.
Далее, мы используем две callback функции Anime.js.
В результате анимация зарядки будет воспроизводиться до тех пор, пока прогресс не станет 100%, а затем он остановится и батарея придет к финальному состоянию анимации. Значок будет отображаться как полностью заряженный.
Более сложные js анимации с кейфреймами
До сих пор мы имели дело с анимациями в один шаг, которые перемещали объект из точки А в точку Б. А как на счет перемещения его из А в Б, а потом в В и Г?
В следующем примере мы рассмотрим как использовать кейфреймы для создания многоступенчатой js анимации. Мы будем перемещать обычный квадрат вокруг другого, который будет служить в качестве коробки.
Для каждого свойства, которое мы хотим анимировать, мы используем массив объектов, где каждый объект описывает определенный кейфрейм.
В нашем случае мы хотим переместить квадрат вертикально и горизонтально. Поэтому мы используем свойства translateY и translateX и описываем массив кейфреймов для каждого из них. Важно правильно вычислить параметры длительности и задержки, это может быть трудно.
Результатом нашей анимации является то, что квадрат выходит из коробки, делает полный оборот вокруг нее, а затем снова входит внутрь.
Создание текстовых эффектов
Выше мы рассмотрели разные примеры простой анимации, настало время сделать js анимацию классного текстового эффекта.
Мы поместили каждую букву внутри элемента span. В коде анимации мы выбираем все буквы, делаем их видимыми и перемещаем их на 50 пикселей вниз.
Мы заставляем подождать секунду, прежде чем она начнется (определив начальное значение), а затем 100-миллисекундная относительная задержка добавляется для каждой буквы.
Мы намеренно добавляем свойство translateX в конце, чтобы создать эффект вращения букв по спирали.
Анимации с таймлайнами
Таймлайны позволяют управлять сразу несколькими анимациями. Рассмотрим простой пример:
В результате получается плавная анимация движения шаров.