От автора: достаточно часто при разработке веб-приложений необходимо использовать различные анимационные эффекты для отображения определенных блоков. Поэтому в данном уроке я хотел бы рассказать Вам об одной очень интересной библиотеке, благодаря которой можно быстро и легко создавать CSS анимации, название данной библиотеки MOVE.js.
Установка
Move.js — это небольшая библиотека, написанная на языке JavaScript, используя функции которой, можно очень быстро и просто создавать различные анимационные эффекты. При этом используется анимации языка каскадных таблиц стилей CSS3. Для установки библиотеки, необходимо перейти по ссылке //github.com/visionmedia/move.js/ и кликнуть по ссылке Download ZIP.
После распаковки скачанного архива Вы получите папку move.js-master, в которой содержится файл move.js – это и есть, интересующая нас библиотека (либо файл move.min.js – сжатая версия библиотеки). Также обратите внимание, что на данной странице присутствует ссылка на документацию по данной библиотеке — //visionmedia.github.io/move.js/:
Далее подключаем данный файл к определенной странице и можно использовать функционал библиотеки.
|
1 |
<script src="js/move.js"></script> |
Обратите внимание, что разработчики рекомендуют подключать данную библиотеку перед закрывающим тегом </body>. Также для работы библиотеки необходима библиотека jQuery, которую можно скачать с официального сайта //jquery.com.
Начало работы с библиотекой
Для сегодняшнего урока я создал простую html страницу со следующим кодом:
|
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 29 30 31 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"/> <script src="js/jquery-1.11.2.min.js"></script> <title>Move.js</title> </head> <body> <div class="wrap"> <h1>Move.js</h1> <input type="button" value="Animation" id="button" class="button" /> <div class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem </div> </div> <script> jQuery("document").ready(function($) { $('.button').click(function() { }); }) </script> <script src="js/move.js"></script> </body> </html> |
Блок с классом content – будет использоваться для тестирования анимации. Кнопка с классом button , необходима для запуска анимации. Обратите внимание, что вызывая метод click, я описал анонимную функцию, которая будет вызываться при срабатывании события click по кнопке, в теле данной функции, мы и будем вести дальнейшее кодирование. Итак, для начала, необходимо выбрать блок, с которым мы будем работать:
|
1 2 |
move('.content') .end(); |
Выбор блока осуществляется стандартными селекторами CSS. Метод end(), вызывается в конце цепочки методов формирующих анимационный эффект, так как запускает анимацию в работу. Так же в качестве параметра, при вызове метода end(), можно передать анонимную функцию, которая выполнит определенные действия по завершению анимационных эффектов.
Методы библиотеки
Метод set(‘param’,’val’) – устанавливает значение — val для правила CSS — param. К примеру, для выбранного блока, установим зеленый цвет фона, и покажем его на экран (так как изначально он был скрыт – правилу ‘opacity’ была передана 1).
|
1 2 3 4 |
move('.content') .set('background-color','green') .set('opacity',1) .end(); |
Метод add(prop, val) – добавляет (инкрементирует) значение – val в правиле – prop. При этом значение должно быть целочисленного типа (при этом данный метод можно использовать многократно).
|
1 2 3 |
move('.content') .add('margin-left',200) .end(); |
Метод sub(prop, val) – уменьшает (декрементирует) значение – val в правиле – prop. При этом значение должно быть целочисленного типа (при этом данный метод можно использовать много кратно).
|
1 2 3 |
move('.content') . sub('margin-left',200) .end(); |
Метод rotate(deg) – поворачивает выбранный блок, на значение – deg (данное значение в градусах). К примеру, поворот блока на один оборот
|
1 2 3 |
move('.content') . rotate(360) .end(); |
Метод duration(n) – задает время выполнения анимационных эффектов. При этом передавать в качестве параметра, можно количество миллисекунд – выполнения анимации, а также строку вида – ‘5s’, то есть 5 секунд.
|
1 2 3 |
move('.content') .duration('5s') .end(); |
Метод translate(x[, y]) – перемещает выбранный блок на определенное количество пикселей по оси абсцисс – x, и, если необходимо, на определенное количество пикселей по оси ординат – y.
|
1 2 3 |
move('.content') .translate(200,100) .end(); |
Методы x(n) / y(n) – перемещают выбранный блок на определенное количество пикселей по оси абсцисс, и по оси ординат соответственно.
|
1 2 3 4 |
move('.content') .x(200) .y(10) .end(); |
Метод skew(x[, y]) – наклоняет выбранный блок на определенный угол по оси абсцисс – x, и, если необходимо, на определенный угол по оси ординат – y.
|
1 2 3 |
move('.content') .skew(10,30) .end(); |
Метод scale(x[, y]) – масштабирует выбранный блок с коэффициентом – х, по оси абсцисс, и, если необходимо, с коэффициентом – y, по оси ординат.
|
1 2 3 |
move('.content') .scale(.5) .end(); |
Метод delay(n) – задает время задержки – n перед началом выполнения анимации.
|
1 2 3 |
move('.content') .delay('2s') .end(); |
Метод then() – позволяет разбить анимацию на несколько шагов, таким образом можно поэтапно манипулировать выбранным блоком. Но если Вы создаете пошаговую анимацию с использованием метода then(), и при этом на разных шагах используются методы, воздействующие на одни, и те же правила CSS – необходимо использовать метод pop(), который применяется, для возврата родителя текущего объекта Move в цепочке вызываемых методов. При этом метод pop(), можно использовать несколько раз, но не более, чем количество вызываемых методов than().
К примеру, можно создать анимацию, состоящую из трех шагов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
move('.content') .set('background-color','green') .set('opacity',1) .x(500) .rotate(360) .scale(.5) .duration('2s') .ease('ease-in-out-back') .then() .delay('2s') .rotate(270) .scale(3.5) .set('background-color','white') .then() .set('opacity',0) .pop() .pop() .end(); |
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (1)