Статьи

Представляем Nanimator библиотеку для нано-анимации

Июль 31, 2018

Наниматор Демо

URL-адрес Github: https://github.com/hasinhayder/Nanimator
Демонстрационная версия: http://hasinhayder.github.io/Nanimator/index2.html

Я получил идею для библиотеки Nanimator во время работы с библиотекой jQuery Transit и преобразованиями CSS3 пару дней назад. Я создавал цепочку анимации чисел объектов, записывая обратные вызовы для каждого из них, и внезапно у меня возникла мысль, что я могу сделать это довольно легко, превратив все это в плагин jQuery. Так родился Наниматор. Его основная цель — анимировать набор элементов DOM внутри контейнера, в основном translate, translateX, translateY и opacity. Это также уменьшает ваш код, почти ничего не написав, кроме инициализации библиотеки.

Nanimator хорошо справляется со своей задачей, ставя в очередь элементы DOM в стеке, поддерживая цепочку между ними (которую вы также можете разорвать, но я остановлюсь на этом позже в этой статье). Nanimator использует фантастический плагин jQuery Transit под капотом, чтобы завершить все для вас.

Давайте посмотрим, как легко начать использовать Nanimator, сначала создав небольшой пример.

Зависимости
Ну, будучи плагином jQuery, Nanimator требует, чтобы вы включили библиотеку jQuery, прежде чем включать ее в свое приложение. Кроме того, также необходим плагин jQuery Transit. Давайте включим их:)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js" ></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js' type="text/javascript"></script>
<script src='http://hasinhayder.github.io/Nanimator/js/jquery.nanimator.js' type="text/javascript"></script>

Теперь, когда все необходимые файлы включены и готовы к использованию, давайте напишем некоторую разметку:

<div id="container">
  <div class="object1 nanimate">Hello</div>
  <div class="object2 nanimate">World</div>
</div>

И давайте стилизуем их, используя CSS:

#container{
  position:relative;
}
.object1{
  font-size:24px;
  with:160px;
  margin-right: 10px;
  float:left;
}
.object2{
  font-size:24px;
}

Для успешной анимации очень важно установить положение родительского контейнера как относительное / абсолютное. Так что не забывайте об этом, когда вы работаете с Nanimator. Также добавьте «nanimate» класс к дочерним элементам DOM, которые вы хотите анимировать. Вы можете переопределить это имя класса, но мы поговорим об этом позже.

Код выше покажет вам простой «Hello World» старомодным способом, но подождите минуту — мы собираемся анимировать их с помощью Nanimator:

$("document").ready(function(){
  $("#container").nanimate();
});

Вы можете увидеть этот полный код на http://codepen.io/anon/pen/xKDco и полученную анимацию на http://codepen.io/anon/full/xKDco.

Разве это не было невероятно просто? Может быть, немного скучно, но есть отличные атрибуты данных, поддерживаемые Nanimator, с помощью которых вы можете добавить дополнительные начинки. Давайте изменим нашу разметку, как это, и мы увидим, что дочерние элементы анимированы с противоположных направлений.

<div id="container">
  <div data-direction="right" class="object1 nanimate">Hello</div>
  <div data-direction="left" class="object2 nanimate">World</div>
</div>

Код доступен по адресу http://codepen.io/hasin/pen/Iwdqb, а результат можно увидеть по адресу http://codepen.io/hasin/full/Iwdqb.

Вот полный список атрибутов данных, которые поддерживаются Nanimator. Давайте посмотрим на них:

Поддерживаемые атрибуты
данных data-direction: вы можете указать направление анимации. Поддерживаемые значения: «верх», «низ», «левый» и «правый»

data-distance: расстояние, пройденное анимированным объектом во время анимации. Поддерживаемые значения — любое целое число со значением по умолчанию «40», т.е. 40px.

data-time: продолжительность анимации, выраженная в миллисекундах. Значение по умолчанию 500 (миллисекунд).

data-fade: по умолчанию установлено значение «false». Но если установлено значение «истина», анимированные объекты будут исчезать после анимации. Вы также можете контролировать время до его исчезновения, передав значение атрибуту data «data-fadedelay»

data-fadedelay: это время в миллисекундах, в течение которого анимация будет задерживаться до исчезновения объекта.

выпуск данных: это, пожалуй, самый важный атрибут для разработчиков, которые хотят иметь дело с механизмом внутренней цепочки Nanimator. По умолчанию Nanimator поддерживает очередь элементов DOM, и один элемент анимируется после завершения анимации предыдущего. Теперь, если вы укажете выпуск данных как «true», тогда Nanimator не будет ждать завершения предыдущей анимации, скорее, они будут анимированы одновременно.

События
Nanimator запускает пару событий для каждого объекта перед началом анимации и после ее завершения. Например, «nanimation.started» и «nanimation.finished» запускаются до запуска анимации и после ее завершения, соответственно.

Nanimator также запускает событие «nanimation.complete» для элемента контейнера DOM после завершения анимации всех детей. Взгляните на jquery.nanimato.js, чтобы увидеть доступные события:)

Вы можете взглянуть на следующие примеры и их исходный код, чтобы понять, как легко использовать Nanimator, и как красиво вы можете анимировать практически все без особых усилий. :)

Наниматор Библиотека

Примеры
1. Простая анимация: http://hasinhayder.github.io/Nanimator/index.html
2. Анимация профиля: http://hasinhayder.github.io/Nanimator/index2.html
3. Горизонтальная линейная диаграмма: http: / /hasinhayder.github.io/Nanimator/index3.html
4. Анимация с растиранием : http://hasinhayder.github.io/Nanimator/index4.html

Не стесняйтесь раскошелиться на библиотеку Nanimator в Github по адресу https://github.com/hasinhayder/Nanimator . Запросы на тягу приветствуются.

Happy Nanimating :)

Кстати, Nanimator представлен вам нашим новым стартапом Happy Monster , в котором двое из нас (Мастер WordPress и Front-end Engineer, и Creative Designer) принимают новые задания WordPress. Так что, если вы ищете команду, напишите нам.:)

34
Share: