Руководство, которое поможет вам изучить Two.JS
Устали от повседневного стиля или анимации для вашего веб-сайта? Активизируйте свою работу прямо здесь и сейчас.
В этой статье мы сделаем несколько крутых вещей, используя Javascript с помощью Two.js.
Two.js — это API для двумерного рисования, ориентированный на современные веб-браузеры. Он не зависит от рендерера, позволяя одному и тому же API рисовать в нескольких контекстах: svg, canvas и webgl.
Ниже перечислены функции Two.js, такие как:
Фокус на векторных фигурах
Two.js глубоко вдохновлен плоской моушн-графикой. В результате two.js стремится сделать создание и анимацию плоских фигур более простым и лаконичным.
Сценограф
По своей сути two.js опирается на сценограф. Это означает, что когда вы рисуете или создаете объект (Two.Path или Two.Group), two фактически сохраняет и запоминает это. После создания объекта вы можете применить к нему любое количество операций — например, вращение, положение, масштабирование и т. д.
Цикл анимации
Two.js имеет встроенный цикл анимации. Он прост по своей природе и может быть автоматизирован или объединен с другой анимационной библиотекой. Для получения дополнительной информации ознакомьтесь с примерами.
Интерпретатор SVG
Two.js содержит интерпретатор масштабируемой векторной графики. Это означает, что разработчики и дизайнеры могут создавать элементы SVG в коммерческих приложениях, таких как Adobe Illustrator, и использовать их в вашей сцене two.js. Для получения дополнительной информации ознакомьтесь с примерами.
Дружба с растровыми изображениями
Несмотря на изначальное внимание к упрощению создания векторных фигур и анимации, Two.js предлагает множество простых в использовании функций для обработки и рендеринга растровых изображений. Легко загружайте отдельные изображения, листы спрайтов и последовательности изображений всего несколькими вызовами методов.
Или, в двух словах, Two.js — это полезная библиотека, которая помогает нам рисовать, проектировать и анимировать двухмерные фигуры или объекты.
К концу этого урока вы сможете создавать простые фигуры и некоторые анимации с небольшим знанием JS, LFG!!
Давайте начнем с установки Two.js. Для простоты мы будем использовать простой JS для работы.
# Настройка проекта
Создайте новую папку и дайте ей имя.
В корневой папке создайте:
- index.html
- index.js
- два.js
Я сохраню объяснение для каждого файла в следующих нескольких шагах.
Two.js
Откройте официальный сайт Two.js (two.js.org), найдите раздел «Скачать».
Мы выберем производственный. Просто скопируйте весь код и поместите его в файл с именем «two.js».
Здесь файл «two.js» содержит весь код Two.js, который мы скопировали ранее. Далее мы хотим импортировать файл «two.js» в наш проект, чтобы мы могли использовать все функции Two.js.
index.html и index.js
В этом разделе мы добавим изменения в index.html и index.js, что позволит нам использовать Two.js в нашем проекте. .
<!-- index.html --> <head> <script src="./two.js"></script> </head> <body> <script src="./index.js"></script> </body>
Тег ‹head› представляет собой контейнер для метаданных HTML-документа. (Метаданные не отображаются)
<head> <script src=”./two.js”></script> </head>
Мы используем тег ``script`` в файле HTML для импорта сценария из файла javascript. В нашем случае тег script используется в index.html для импорта "two.js".
<body> <script src=”./index.js”></script> </body>
Между тем, причина, по которой мы используем тег script в разделе body, заключается в том, что мы хотим создать нашу анимацию и поместить ее в HTML body.
// index.js
const elem = document.body
const two = new Two({
fullscreen: true
}).appendTo(elem)
const circle = two.makeCircle(70, 0, 50)
circle.fill = '#FF8000'
circle.linewidth = 10
const rect = two.makeRectangle(-70, 0, 100, 100)
rect.fill = 'rgba(0, 200, 255, 0.75)'
rect.noStroke()
var group = two.makeGroup(circle, rect)
group.position.set(two.width / 2, two.height / 2)
group.stroke = '#63A355'
group.scale = 0.7
two.update()
Прежде чем мы начнем рисовать, начните с объявления нового холста Two.js, а затем добавьте его к нашему телу HTML.
const elem = document.body
const two = new Two({
fullscreen: true
}).appendTo(elem)
# Создание фигур Two.js
Теперь часть ФОРМЫ. Ниже приведены некоторые фигуры, которые мы можем создать с помощью Two.js.
Мы создадим 2 простые формы; круг и прямоугольник. Давайте взглянем на функцию makeBlabla. Это функции, которые Two.js предоставляет нам для создания фигур.
Two.makeCircle()
Функция makeCircle получает 4 параметра: положение координаты X (x), положение координаты Y (y), диаметр круга (радиус), количество привязок на пути круга (разрешение).
const circle = two.makeCircle(70, 0, 50)
Ожидаемый результат этой строки кода: мы создали круг с координатами (70, 0) и радиусом 50. Поскольку мы не указали параметр разрешения в функции makeCircle, для него будет установлено значение по умолчанию, равное 4. .
Two.makeRectangle()
Two.makeRectangle() имеет 4 параметра: координаты X (x), координаты Y (y), ширину прямоугольника (width) и высоту прямоугольника (height).
const rect = two.makeRectangle(-70, 0, 100, 100)
Код выше создаст фигуру прямоугольника, которая начинается с координат (-70, 0) с шириной 100 и высотой 100.
circle.fill = ‘#FF8000’ circle.linewidth = 10
Кроме того, вы можете установить свойства объекта, такие как заливка, обводка, ширина линии и т. д. Полное руководство по свойствам фигур вы можете найти в Документации Two.js.
# Группировка фигур
Допустим, мы хотим выровнять фигуры вместе по центру холста, добавить анимацию или настроить стили фигур. Мы можем добиться этого, сгруппировав фигуры. Группы могут принимать множество форм и/или групп.
const group = two.makeGroup(circle, rect);
Здесь мы пытаемся создать группу, содержащую круг и прямоугольник. Two.makeGroup() получает параметры, содержащие фигуры, которые мы хотим добавить в группу.
group.position.set(two.width / 2, two.height / 2) group.stroke = '#63A355' group.scale = 0.7
Как и в случае с фигурами, вы можете настроить некоторые свойства, например, pz.
# Рендеринг вашего холста
После создания всех фигур, упорядочите их в группы, настройте некоторые свойства фигур, вы хотите визуализировать свой холст, чтобы все фигуры могли отображаться на HTML-странице. Просто вызовите эту строку кода
two.update()
TA-DA!!!
Результат:
# Применение анимации
А теперь самое интересное. После настройки всех фигур и переноса их на холст, мы, наконец, можем применить анимацию к нашим фигурам или группам.
elem.addEventListener('click', play, false)
two.bind('update', update)
function play() {
if(two.playing) {
two.pause()
}else {
two.play()
}
}
function update() {
if (group.rotation >= Math.PI * 2) {
group.rotation = 0;
}
group.rotation += Math.PI/30;
}
Результат:
Здесь мы реализовали анимацию с прослушивателем событий. Поэтому каждый раз, когда мы «щелкаем» по разделу «elem» (document.body), «elem» вызывает функцию «play».
elem.addEventListener('click', play, false)
Не забудь, что нам также нужно привязать обработчик событий к нашему холсту.
two.bind('update', update)
Функция Bind позволяет вызывать слушателя к определенному имени события. Эта функция принимает два параметра: имя события и обработчик. Имя события обозначает конкретное событие, которое мы хотим, чтобы холст прослушивал. Второй параметр, обработчик, является функцией обратного вызова всякий раз, когда событие запускается.
function play() {
if(two.playing) {
two.pause()
}else {
two.play()
}
}
В ключевых кадрах холста есть три свойства, которые мы можем использовать. Two.playing возвращает логическое значение, которое истинно, если воспроизводятся ключевые кадры холста. Two.pause() — это функция для приостановки воспроизведения ключевых кадров холста. Между тем Two.play() является противоположностью Two.pause().
function update() {
if (group.rotation >= Math.PI * 2) {
group.rotation = 0;
}
group.rotation += Math.PI/30;
}
Функция обновления — это функция, которую мы использовали в качестве функции обратного вызова для функции two.bind(). Функция содержит свойства анимации, мы сначала проверяем, действительно ли вращение объекта превышает вращение PI, затем мы устанавливаем вращение обратно на 0. Затем мы также увеличиваем вращение объекта на PI / 30. Вы спросите, где ' PI / 30' исходит из, ПРАВИЛЬНО ли я???. Простое объяснение, полное вращение на 360 градусов равно PI * 2. Каждая секунда содержит 60 кадров. Таким образом, мы можем получить формулу для получения инкрементного значения для каждого кадра, которое равно PI * 2/60 или PI/30.
# Заключение
И вот мы подошли к концу руководства по Two.js. Подводя итог, Two.js — это простая, но мощная библиотека. Это позволяет вам объединить все ваши творческие вещи и заставить их работать легко. Two.js, наполненный множеством функций и возможностей, действительно интересен и заслуживает изучения, если вы готовы рисовать или анимировать вещи. Приведенное выше руководство — это небольшой шаг, который поможет вам лучше познакомиться с механизмом Two.js. Хорошо, давайте сделаем что-нибудь интересное в следующем руководстве, не так ли?
МИР.
