Есть классная библиотека JavaScript, которую бредят такие имена, как Крис Гэннон , Val Head и CodePen . Вы также можете найти его в Product Hunt , где дела идут неплохо. Библиотека — это не что иное, как Zdog Дейва ДеСандро .
В этой статье я собираюсь познакомить вас с Zdog и показать вам несколько симпатичных демонстраций, созданных замечательными разработчиками, которые вы можете перепроектировать и извлечь уроки.
Давайте погрузимся в!
Что такое Здог
ДеСандро объясняет, что такое Zdog на специальном веб-сайте библиотеки:
Zdog — это 3D-движок JavaScript для
<canvas>и SVG. С Zdog вы можете создавать и отображать простые 3D-модели в Интернете. Zdog — псевдо- трехмерный двигатель. Его геометрия существует в трехмерном пространстве, но отображается как плоские формы. Это делает Здог особенным.
Другими словами, вы можете создавать, отображать и анимировать 3D-модели на основе SVG или <canvas> .
Zdog невелик (2100 строк кода для всей библиотеки, сокращен до 28 КБ) и удобен для разработчиков (вы можете быстро реализовать его с помощью простого декларативного API).
Начало работы с Zdog
Как и в случае с большинством библиотек JavaScript, вы можете включить Zdog в свой проект с помощью…
- просто загрузите копию библиотеки в вашу локальную среду по этой ссылке:
https://unpkg.com/zdog@1/dist/zdog.dist.min.js(https://unpkg.com/zdog@1/dist/zdog.dist.jsдля неунифицированной версии); - извлечение библиотеки из CDN:
https://unpkg.com/zdog@1/dist/zdog.dist.min.js - или набрав
npm install zdogесли вы используетеnpm
Вот официальная демонстрация Hello World на CodePen, чтобы вы могли сразу приступить к работе с библиотекой:
DeSandro предлагает отличное руководство по началу работы , которое я буду использовать, чтобы дать вам представление о том, как работает библиотека и каких результатов вы можете ожидать от нее.
Как работает Здог
Давайте начнем с создания статического SVG-круга.
HTML — это просто элемент SVG, который вы можете использовать в качестве оболочки. Если вы предпочитаете создавать рисунок Zdog с использованием элемента canvas, просто замените тег svg тег canvas :
<svg id="circle" width="100" height="100"></svg>
Теперь немного CSS на элемент SVG:
#circle { background-color: #081d3f; width: 100vw; height: 100vh; }
Наконец, JavaScript:
/* create an instance of the Zdog Illustration class */ let circle = new Zdog.Illustration({ element: '#circle' }) /* create an instance of the Zdog shape class Ellipse */ new Zdog.Ellipse({ // add the shape to the circle addTo: circle, // set more properties diameter: 20, stroke: 20, color: '#ccc' }) // display the scene circle.updateRenderGraph()
Чтобы рисовать графику, вам нужно создавать экземпляры классов Zdog. Illustration — это класс верхнего уровня, который имеет дело с элементом <canvas> или <svg> . Формы, которые вы создаете для своей сцены, будут Illustration экземпляра класса Illustration .
Ellipse — это класс формы. Вы создаете новый экземпляр класса формы Ellipse и добавляете его в свой контейнер, в этом случае circle , используя метод addTo() . Zdog предлагает множество предопределенных форм, таких как rect , polygon и многое другое. Чтобы создать свою собственную форму , используйте класс Shape и определите его точки пути. Вы можете добавить другие свойства к вашей форме, такие как diameter , stroke и color . Для получения дополнительных свойств, проверьте API Zdog для класса Shape .
Чтобы отобразить изображение на экране, вызовите метод updateRenderGraph() в вашем экземпляре circle .
Вот как должен выглядеть ваш круг:
Анимация и перетаскивание с помощью Zdog
Анимация требует, чтобы ваш экземпляр circle перерисовывался в каждом кадре. Для этого вы используете .requestAnimationFrame() следующим образом:
function animate() { /* incrementally increase the rotation on the y axis */ circle.rotate.y += 0.03 // re-render the graphic circle.updateRenderGraph() // animate the next frame requestAnimationFrame(animate) } animate()
Zdog позволяет быстро добавлять функции перетаскивания к вашей графике Вот что вам нужно сделать, если вы хотите остановить анимацию, когда начинается перетаскивание, и возобновить анимацию после ее завершения.
Сначала установите для флага isSpinning значение true :
let isSpinning = true
Затем вернитесь к своему экземпляру circle класса Illustration и установите для свойства dragRotate значение true . Кроме того, переключите флаг внутри onDragStart() и onDragEnd() , чтобы при начале перетаскивания флаг устанавливался в значение false , а по окончании перетаскивания он возвращался в значение true :
let circle = new Zdog.Illustration({ element: '#circle', dragRotate: true, onDragStart() { isSpinning = false }, onDragEnd() { isSpinning = true } })
Наконец, настройте функцию animate() , добавив этот условный оператор вверху, чтобы вращение происходило только в том случае, если для флага isSpinning установлено значение true :
if(isSpinning) { circle.rotate.y += 0.03 }
Вот рабочая демоверсия, проверьте это:
Ресурсы и демоверсии
Это только вершина айсберга из всей удивительной графики и анимации, которые вы можете создать с помощью Zdog. Вы также можете смешивать и сочетать его с другими библиотеками, такими как GreenSock, для еще более потрясающих результатов.
Вот куча ресурсов и демонстрационных коллекций, где вы можете узнать больше об этом последнем дополнении к пространству дизайна и анимации, выполненном в коде:
- Веб-сайт Zdog , где вы найдете все подробности об API, больше демонстраций, пошаговые руководства и многое другое
- Holy Zdog , запись в блоге CodePen, заполненная демонстрациями на основе Zdog
- Сделано с Zdog , коллекцией CodePen демонстраций на основе Zdog
- Сделано с Zdog , коллекцией потрясающих демо в Твиттере, все очевидно сделаны с… Zdog
Где твои творения Zdog? Множество мест, где можно их показать, не так ли?