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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

Для установки библиотеки переходим на официальный сайт 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,});
}

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

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