Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Anime.js — это библиотека для создания анимаций, с помощью которой можно анимировать различные объекты, свойства и атрибуты. Библиотека проста в освоении и использовании за счёт понятного синтаксиса.


Начало работы

Для начала необходимо скачать библиотеку с официального сайта, после чего перейти в папку lib и выбрать саму библиотеку anime.js, либо её минимизированный вид anime.min.js. Рекомендуется подключать минимизированную (сжатую) библиотеку, поскольку она имеет меньший размер и в следствии этого сайт будет быстрее загружаться.

После чего подключить её в html-файле:

<script src="js/anime.min.js"></script>


Возможности библиотеки

Поскольку возможности этой библиотеки довольно обширные, рассмотрим некоторые из них.


CSS-селекторы

Для первого примера создадим блок-контейнер и в нём блок поменьше, на котором уже и будем совершать все манипуляции:

<div class="block">
	<div class="block_example"></div>
</div>

Зададим им стили:

.block {
	width: 500px;
	height: 250px;
	background-color: #000;
	overflow: auto;
}
 
.block_example {
	width: 50px;
	height: 50px;
	background-color: red;
	margin-left: 50px;
	margin-top: 100px;
}

По итогу у нас должно получиться что-то вроде этого:

Итак, приступим к первому примеру:

anime({
	targets: '.block .block_example',
	translateX: 250
});

В данном случае вызывается функция anime(), в которой должны содержаться пары "ключ-значение". В рассмотренном случае по ключевому слову targets мы указываем, что именно хотим анимировать. Указываем родительский блок и внутренний, чтобы функция понимала, с каким объектом мы хотим работать. После чего, используя команду translateX, которая двигает объект по оси х, задаём расстояние в пикселях. После выполнения мы получим это:


Несколько CSS-селекторов

Естественно, данная библиотека может работать как с одним, так и с несколькими селекторами. Для этого создадим несколько блоков в нашем контейнере:

<div class="block">
	<div class="block_example__2"></div>
	<div class="block_example__2"></div>
	<div class="block_example__2"></div>
</div>

После чего с помощью метода querySelectorAll в значение переменной elements заносим наши блоки:

var elements = document.querySelectorAll('.block .block_example__2');
 
anime({
  targets: elements,
  translateX: 270
});

На выходе получим следующее:


JS-объекты

Данная библиотека также способна работать с JS-объектами.

Добавим в html-файл блок с текстом и по умолчанию укажем там финальные значения для вывода:

<pre class="battery-log">{"charged":"100%","cycles":130}</pre>

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

var logEl = document.querySelector('.battery-log');
 
var battery = {
  charged: '0%',
  cycles: 120
}
 
anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

Результат:


Массивы

Anime.js способна работать также с массивами.

Создадим три блока с различными классами:

<div class="block">
	<div class="block_example__1"></div>
	<div class="block_example__2"></div>
	<div class="block_example__3"></div>
</div>

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

var el = document.querySelector('.block .block_example__1');
 
anime({
  targets: [el, '.block .block_example__2', '.block .block_example__3'],
  translateX: 250
});

Результат:


CSS-свойства

Данная библиотека способна изменять CSS-свойства объекта.

anime({
  targets: '.block .block_example',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad',
  translateX: 250
});

Здесь указано, какой цвет будет приобретать наш блок, а также насколько сильно будут скругляться его углы. Помимо этого через параметр easing укажем то, насколько плавно будет выполняться наша анимация. Для наглядности также подвинем блок по оси х.

В результате мы получим это:

Или, например, можно вращать объект: увеличить его, а также указать то, как будет отображаться вращение:

anime({
  targets: '.block .block_example',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

Результат:


Помимо всего прочего, библиотека может работать с задержкой времени, анимации, SVG-файлами и многим другим. Больше примеров можно найти на официальном сайте в разделе документации.