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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: ,

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

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

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

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