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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

<script type="text/javascript" src="js/ dynamics.js "></script>

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

<script type="text/javascript" src="js/script.js"></script>

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

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

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

var el = document.querySelector('.button img');

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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:

dynamics.animate(el,
  {
 translateX:150,
 translateY:150,
 scale:2,
 rotate:'60deg',
 skewX:10,
 skewY:50
  },
 
  {
 type:dynamics.bounce 
  }
 
);

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

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, в котором указать имя функции, код которой выполнится после завершения анимационного эффекта. Таким образом, мы можем реализовать пошаговую анимацию:

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,});
}

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree