Dynamics.js — простая библиотека для создания анимации

Dynamics.js - простая библиотека для создания анимации

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

скачать исходникискачать урок

Установка библиотеки

Для установки библиотеки переходим на официальный сайт //dynamicsjs.com/ и кликаем по ссылке Download:

Далее нас перенаправляют на сервис github, где можно скачать актуальную версию библиотеки.

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

Так же подключаем пустой файл script.js, в котором мы будем вести кодирование на языке javascript/

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

Использование библиотеки

Для начала работы необходимо выбрать блок, для которого будет добавляться определенный анимационный эффект. Для этого в файл script.js добавим следующий код:

То есть выбираем кнопку на тестовой странице, используя селектор ‘.button img’. При этом выбранный элемент сохраняется в переменой el. Основой библиотеки dynamics.js является метод animate(el, properties, options), который определяет анимационный эффект и запускает его в работу. В качестве параметров при вызове данного метода необходимо передать следующее:

el – элемент для которого буде применен анимационный эффект;

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

options — объект параметров анимации.

Теперь давайте обратимся к методу animate() и создадим первую анимацию:

Как Вы видите в качестве второго параметра передается объект, с правилами CSS, которые в совокупности и определяют анимационный эффект. Далее, на официальном сайте есть не большая презентация возможностей библиотеки, которая наглядно показывает, как можно изменять тип анимации, управляя опциями третьего параметра метода animate().

В библиотеке определены несколько стандартных типов анимации: dynamics.spring, dynamics.bounce, dynamics.gravity, dynamics.forceWithGravity, dynamics.bezier, dynamics.easeInOut, dynamics.easeIn, dynamics.easeOut, dynamics.linear

К примеру, используем тип анимации dynamics.bounce:

Также можно самостоятельно определить тип анимации, используя параметры:

При этом:

frequency: частота колебаний;

friction: амплитуда колебаний;

duration: время выполнения анимации;

anticipationSize: сдвиг начальной точки анимации;

anticipationStrength: амплитуда колебания перед началом анимации.

Так же в объект третьего параметра, мы можем передать свойство complete, в котором указать имя функции, код которой выполнится после завершения анимационного эффекта. Таким образом, мы можем реализовать пошаговую анимацию:

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!

Метки: ,

Похожие статьи:

Комментарии Вконтакте: