Красивые анимации с bounce.js
Сайтодел
Bounce.js - это библиотека JS для создания красивой анимации ключевых кадров на основе CSS3. Инструмент на bouncejs.com позволяет вам создавать статические ключевые кадры, которые можно использовать без какого-либо дополнительного JS, но если вы хотите, чтобы ваше приложение генерировало их на лету, вы можете использовать библиотеку bounce.js.
Установка
Библиотека доступна для установки из Bower или NPM:
Вы также можете просмотреть и скачать все версии отсюда.
Использование
Чтобы создать анимацию, создайте экземпляр нового объекта Bounce:
Объект Bounce - это то, что вы будете использовать, чтобы сначала создать свою анимацию из различных компонентов: scale, rotate, translate и skew. Затем это может быть определено как именованная анимация для последующего использования или непосредственно применено к элементам на странице.
Добавление компонентов анимации
Как упоминалось выше, вы будете использовать методы scale, rotate, translate и skew для создания своей анимации, как и в случае с инструментом bounce.js. Все эти методы принимают ряд общих параметров (объясненных ниже), а также параметры from и to, которые определяют начальную и конечную точки анимации. Обратите внимание, что все эти методы объединяются в цепочку.
scale
Параметры from и to определяют масштаб элемента по X (ширина) и Y (высота) как соотношение. В приведенном выше примере элемент анимируется от половинного до полного. (Посмотрите в примере)
rotate
Параметры from и to определяют поворот элемента в градусах. В приведенном выше примере элемент анимируется на четверть поворота вправо. (Посмотрите в примере)
translate
Параметры from и to определяют перемещение (положение) элемента по X и Y в пикселях. В приведенном выше примере анимируется элемент на 100 пикселей вправо. (Посмотрите в примере)
skew
Параметры from и to определяют наклон элемента по X и Y в градусах. В приведенном выше примере анимирован наклон элемента на 20 градусов по горизонтальной оси. (Посмотрите в примере)
Использование анимации
После того, как вы создали свою анимацию, вы можете определить ее как именованную анимацию по ключевым кадрам или напрямую применить ее к любому элементу в DOM.
define
Определяет анимацию с заданным именем. Затем анимацию можно использовать в вашем CSS с помощью animation: my-animation 1s linear both
applyTo
Непосредственно применяет анимацию к отдельному элементу или к списку элементов. Этот метод также принимает ряд опций:
- loop: бесконечно зацикливает анимацию, если установлено значение true. По умолчанию false.
- remove: Удаляет анимацию после ее завершения. Если ваша анимация заканчивается в состоянии, отличном от того, что элемент имел раньше, в некоторых браузерах элемент вернется в исходное состояние. По умолчанию false
- onComplete: функция обратного вызова, запускаемая после завершения анимации.
Remove
Анимацию также можно удалить вручную после того, как она была определена:
Browser Support
Вы можете проверить поддержку в текущем браузере с помощью:
Библиотека должна работать во всех браузерах, которые поддерживают как 3D-преобразования, так и анимацию по ключевым кадрам.
Полный пример
Вот полный пример создания предустановки анимации Splat в инструменте и применения ее к элементу с классом animation-target.
Разработка
Если вы хотите запустить сайт Bounce.js локально и отредактировать библиотеку JavaScript, вы можете сделать это, клонировав это репо и выполнив следующие команды (при условии, что у вас установлены Node, NPM и Bower):
Установить зависимости
$ npm install $ bower install
Запустите сервер на localhost: 9000.
$ grunt serve
Запустите тесты
$ grunt test
Выводы
Bounce.js - это аккуратная библиотека анимации, которая поставляется с примерно десятью предустановками анимации - отсюда и небольшой размер библиотеки. Bounce.js с более 6К звездами на Github заслуживает вашего внимания, если вы хотите увидеть в своем сайте плавные и безупречные анимации.
Ссылка на канал: https://t.me/sitodel