От автора: на современных веб-сайтах в данный момент повсеместно используются различные анимационные эффекты для элементов, на которых необходимо акцентировать внимание посетителей. Поэтому в данном уроке я хотел бы представить Вам простую, но в тоже время функциональную библиотеку, благодаря которой можно очень легко реализовать анимацию элементов Ваших веб-страниц. Название данной библиотеки dynamics.js.
Установка библиотеки
Для установки библиотеки переходим на официальный сайт //dynamicsjs.com/ и кликаем по ссылке Download:
Далее нас перенаправляют на сервис github, где можно скачать актуальную версию библиотеки.
После скачивания библиотеки, которая представляет собой файл dynamics.js, скопируем ее в папку тестового сайта, где хранятся скрипты языка JavaScript. После этого подключаем файл dynamics.js к странице, на которой будет отображаться анимация.
1 |
<script type="text/javascript" src="js/ dynamics.js "></script> |
Так же подключаем пустой файл script.js, в котором мы будем вести кодирование на языке javascript/
1 |
<script type="text/javascript" src="js/script.js"></script> |
Для данного урока мы используем очень простую страницу с единственной кнопкой, для которой мы и будем создавать анимации.
Использование библиотеки
Для начала работы необходимо выбрать блок, для которого будет добавляться определенный анимационный эффект. Для этого в файл script.js добавим следующий код:
1 |
var el = document.querySelector('.button img'); |
То есть выбираем кнопку на тестовой странице, используя селектор ‘.button img’. При этом выбранный элемент сохраняется в переменой el. Основой библиотеки dynamics.js является метод animate(el, properties, options), который определяет анимационный эффект и запускает его в работу. В качестве параметров при вызове данного метода необходимо передать следующее:
el – элемент для которого буде применен анимационный эффект;
properties – объект свойств, которые задают анимационный эффект. В качестве свойств указываются правила CSS и соответственно их значения. При этом у выбранного элемента, изначально уже был определен некий набор правил и, задавая новые, мы формируем анимацию, так как применение новых правил будет выполнено не мгновенно, а с заданным темпом – то есть, с определенной анимацией;
options — объект параметров анимации.
Теперь давайте обратимся к методу animate() и создадим первую анимацию:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
dynamics.animate(el, { translateX:150, translateY:150, scale:2, rotate:'60deg', skewX:10, skewY:50 }, { } ); |
Как Вы видите в качестве второго параметра передается объект, с правилами CSS, которые в совокупности и определяют анимационный эффект. Далее, на официальном сайте есть не большая презентация возможностей библиотеки, которая наглядно показывает, как можно изменять тип анимации, управляя опциями третьего параметра метода animate().
В библиотеке определены несколько стандартных типов анимации: dynamics.spring, dynamics.bounce, dynamics.gravity, dynamics.forceWithGravity, dynamics.bezier, dynamics.easeInOut, dynamics.easeIn, dynamics.easeOut, dynamics.linear
К примеру, используем тип анимации dynamics.bounce:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
dynamics.animate(el, { translateX:150, translateY:150, scale:2, rotate:'60deg', skewX:10, skewY:50 }, { type:dynamics.bounce } ); |
Также можно самостоятельно определить тип анимации, используя параметры:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
dynamics.animate(el, { translateX:150, translateY:150, scale:2, rotate:'60deg', skewX:10, skewY:50 }, { type:dynamics.spring, frequency: 8000, friction: 200, duration:2000, anticipationSize: 150, anticipationStrength: 200, } ); |
При этом:
frequency: частота колебаний;
friction: амплитуда колебаний;
duration: время выполнения анимации;
anticipationSize: сдвиг начальной точки анимации;
anticipationStrength: амплитуда колебания перед началом анимации.
Так же в объект третьего параметра, мы можем передать свойство complete, в котором указать имя функции, код которой выполнится после завершения анимационного эффекта. Таким образом, мы можем реализовать пошаговую анимацию:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var el = document.querySelector('.button img'); dynamics.animate(el, { translateX:150, translateY:150, scale:2, rotate:'60deg', skewX:10, skewY:50 }, { type:dynamics.sprin, frequency: 8000, friction: 200, duration:2000, anticipationSize: 150, anticipationStrength: 200, complete:foo } ); function foo () { dynamics.animate(el,{translateX:-150},{type:dynamics.linear,duration:2000,}); } |
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!