Home-theater-designers
Если вы хотите начать свой собственный сайт , красивая анимация может заставить его сиять. Есть несколько способов добиться этого, просто создание анимированного GIF от части существующего фильма, чтобы научиться создавать свой собственный с нуля с помощью программного обеспечения, такого как Блендер или майя .
Существуют также библиотеки для программного создания анимации. Исторически веб-программисты использовали jQuery для создания простых анимаций, но по мере развития Интернета и HTML5 стал новым стандартом, появились свежие варианты. Библиотеки CSS для анимации стали невероятно мощными благодаря новой структуре, наряду с библиотеками JavaScript, разработанными специально для векторной анимации в браузере.
Сегодня мы рассмотрим mo.js, одного из новичков в области создания красивых изображений из кода. Мы рассмотрим несколько основных функций, прежде чем создавать серию реактивных анимаций, создающих красивые узоры.
Введите Mo.js
Mo.js - это библиотека для легкого создания анимированной графики для Интернета. Он разработан, чтобы упростить создание красивых вещей для тех, кто не слишком разбирается в коде, и в то же время позволяет опытным программистам открыть для себя художественную сторону, о которой они даже не подозревали. Как следует из названия, он основан на популярном языке программирования JavaScript, хотя реализован таким образом, что каждый может легко освоить основы.
Прежде чем идти дальше, давайте посмотрим, что мы собираемся создать сегодня:
Мы будем использовать CodePen для сегодняшнего проекта, поскольку он позволяет нам работать со всем в одном окне браузера. Если хотите, можете работать в редактор по вашему выбору вместо. Если вы хотите пропустить пошаговое руководство, полный код доступен здесь.
Установите новое перо, и вы увидите этот экран:
Прежде чем мы начнем, вам нужно внести пару изменений. Нажать на Настройки в правом верхнем углу и перейдите к JavaScript таб.
Мы собираемся использовать Вавилон в качестве препроцессора кода, поэтому выберите его в раскрывающемся меню. Babel упрощает понимание JavaScript, а также предоставляет ECMAScript 6 поддержка старых браузеров. Если вы не знаете, что это значит, не волнуйся , здесь нам станет немного легче.
Также нам нужно импортировать в проект библиотеку mo.js. Сделайте это, выполнив поиск mo.js в Добавить внешние скрипты / ручки текстовое приглашение и выделив его.
Установив эти две вещи, нажмите Сохрани и закрой . Мы готовы приступить к работе!
Основные формы с Mo.js
Прежде чем приступить к работе с графикой, давайте сделаем что-нибудь с ослепляющим белым фоном на панели просмотра. Измените свойство цвета фона, написав этот код в CSS хлеб.
body{
background: rgba(11,11,11,1);
}Создание фигуры - это простой процесс, и концепция, лежащая в его основе, управляет всей библиотекой. Давайте настроим форму круга по умолчанию. Введите этот код в JS хлеб:
const redCirc = new mojs.Shape({
isShowStart:true
});Здесь мы создали const значение с именем красныйCirc и назначил его новые mojs.Shape . Если вы новичок в программировании, обратите внимание на порядок скобок здесь и не забудьте поставить точку с запятой в конце!
Пока мы не передали никаких параметров, кроме isShowStart: true , то есть он появится на экране даже до того, как мы назначим ему какое-либо движение. Вы увидите, что он поместил розовый кружок в центр экрана:
Этот круг используется по умолчанию Форма для mo.js. Мы можем легко изменить эту форму, добавив строку в наш код:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Чтобы добавить к объекту дополнительные свойства, мы разделяем его запятыми. Здесь мы добавили форма собственности, и определил его как 'rect' . Сохраните перо, и вместо этого вы увидите, что форма по умолчанию изменится на квадрат.
Этот процесс передачи значений в Форма объект - это то, как мы их настраиваем. Прямо сейчас у нас есть квадрат, который на самом деле мало что делает. Попробуем что-нибудь оживить.
Основы движения
Чтобы получить что-то более впечатляющее, давайте создадим круг с красной обводкой вокруг него и без заливки внутри.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Как видите, мы также назначили ширина значение штриха, а радиус для круга. Вещи уже начинают выглядеть немного иначе. Если ваша фигура не обновляется, убедитесь, что вы не пропустили запятые или одинарные кавычки вокруг 'сеть' или 'никто' , и убедитесь, что вы нажали спасти в верхней части страницы.
Давайте добавим к этому анимацию. В приведенном выше примере этот красный кружок появляется там, где пользователь щелкает, перед тем как исчезнуть. Один из способов добиться этого - изменить радиус и прозрачность с течением времени. Модифицируем код:
radius: {15:30},
opacity: {1:0},
duration:1000Изменяя радиус свойство и добавление непрозрачность а также продолжительность properties, мы дали инструкции по формированию формы, которые необходимо выполнять с течением времени. Эти Дельта объекты, содержащие начальную и конечную информацию для этих свойств.
Вы заметите, что пока ничего не происходит. Это потому, что мы не добавили .играть() функция, чтобы заставить его выполнять наши инструкции. Добавьте его между конечными скобками и точкой с запятой, и вы увидите, как ваш круг оживает.
Теперь мы к чему-то приближаемся, но чтобы сделать это по-настоящему особенным, давайте рассмотрим еще несколько более подробных возможностей.
Заказ и упрощение работы с Mo.js
Прямо сейчас, как только появляется круг, он начинает исчезать. Это будет работать отлично, но было бы неплохо иметь немного больше контроля.
Мы можем сделать это с помощью .тогда() функция. Вместо того, чтобы изменять радиус или непрозрачность, давайте оставим нашу форму там, где она начинается, прежде чем измениться через заданный промежуток времени.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Теперь наша фигура появится со значениями, которые мы ей присвоили, подождите 1000 мс, прежде чем выполнять что-либо, что мы поместили в .тогда() функция. Добавим в скобки несколько инструкций:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Этот код вводит еще одну важную часть анимации. Где мы проинструктировали шкала чтобы изменить с 1 на 2, мы также назначили ослабление на основе синусоидальной волны с sin.in . Mo.js имеет множество встроенных кривых плавности, и опытные пользователи могут добавлять свои собственные. В этом случае масштаб с течением времени происходит в соответствии с изгибающейся вверх синусоидальной волной.
Для визуального просмотра различных кривых ознакомьтесь с easings.net . Совместите это с strokeWidth изменение на 0 в течение установленной продолжительности, и вы получите гораздо более динамичный эффект исчезновения.
Формы - это основа всего в Mo.js, но они - только начало истории. Давайте посмотрим на Всплески .
Расширение возможностей в Mo.js
К Лопаться в Mo.js - это набор фигур, исходящих из центральной точки. Мы собираемся сделать их основой нашей готовой анимации. Вы можете вызвать серию по умолчанию так же, как и форму. Сделаем искры:
const sparks = new mojs.Burst({
}).play();Вы можете увидеть, просто добавив пустой Лопаться объект и приказывая ему играть, мы получаем эффект серийной съемки по умолчанию. Мы можем повлиять на размер и поворот пакета, анимировав его радиус а также угол характеристики:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Мы уже добавили настраиваемый радиус и вращение к нашему всплеску:
Чтобы они больше походили на искры, давайте изменим формы, которые использует вспышка, и сколько форм генерирует вспышка. Вы делаете это, обращаясь к свойствам потомков всплеска.
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();Вы заметите, что дочерние свойства такие же, как свойства формы, с которыми мы уже работали. На этот раз мы выбрали крест в качестве формы. Все 50 этих фигур теперь обладают одинаковыми свойствами. Это начинает выглядеть неплохо! Это первое, что увидит пользователь, щелкнув мышью.
Хотя мы уже видим, что красный штрих нашего начального красныйCirc форма остается слишком долго. Попробуйте изменить его продолжительность, чтобы обе анимации совпадали. Это должно выглядеть примерно так:
Мы еще далеки от завершения нашей анимации, но давайте сделаем ее так, чтобы она реагировала на пользователя.
Главное событие
Мы будем использовать обработчик событий для запуска нашей анимации в позиции, по которой щелкает пользователь. В конце блока кода добавьте следующее:
document.addEventListener( 'click', function(e) {
});Этот фрагмент кода прослушивает щелчки мыши и выполняет все инструкции в скобках за нас. Мы можем добавить наши красныйCirc а также искры возражает этому слушателю.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Мы вызываем две функции: .tune () а также .replay () . Функция воспроизведения аналогична функции воспроизведения, но указывает, что анимация должна начинаться заново с самого начала каждый раз, когда по ней щелкают.
В настраивать функция передает значения нашему объекту, чтобы вы могли что-то изменить, когда он запускается. В этом случае мы передаем координаты страницы, на которой была нажата мышь, и соответственно назначаем позиции x и y нашей анимации. Сохраните свой код и попробуйте щелкнуть по экрану. Вы заметите пару проблем.
Во-первых, наша первоначальная анимация все еще отображается в центре экрана, даже если пользователь ничего не нажимает. Во-вторых, анимация запускается не при наведении курсора мыши, а смещается вниз и вправо. Мы можем легко исправить обе эти вещи.
Наша форма и взрыв имеют .играть() в конце соответствующих блоков кода. Нам это больше не нужно, так как .replay () вызывается в обработчике событий. Вы можете удалить .play () из обоих блоков кода. По той же причине вы можете удалить isShowStart: true тоже, поскольку нам больше не нужно, чтобы он отображался в начале.
Чтобы решить проблему с позиционированием, нам нужно будет установить значения позиции для наших объектов. Как вы помните из самой первой фигуры, mo.js по умолчанию помещает их в центр страницы. Когда эти значения комбинируются с положением мыши, создается смещение. Чтобы избавиться от этого смещения, просто добавьте эти строки в оба красныйCirc а также искры объекты:
left: 0,
top: 0,Теперь единственные значения положения, которые принимают наши объекты, - это значения положения мыши, передаваемые слушателем событий. Теперь все должно работать намного лучше.
Этот процесс добавления объектов в обработчик событий - это то, как мы будем запускать все наши анимации, поэтому не забудьте с этого момента добавлять к нему каждый новый объект! Теперь, когда у нас есть основы, работающие так, как мы хотим, давайте добавим несколько более крупных и ярких серий.
Получение психоделиков
Начнем с вращающихся треугольников. Идея заключалась в том, чтобы создать гипнотический стробоскопический эффект, и настроить его на самом деле довольно просто. Добавьте еще один пакет с этими параметрами:
const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});К настоящему времени все здесь должно быть достаточно знакомо, хотя есть несколько новых моментов. Вы заметите, что вместо того, чтобы определять форму как треугольник, мы назвали ее многоугольник перед присвоением количества точки он имеет как 3.
Мы также дали наполнять функция массив цветов, с которым нужно работать, каждый пятый треугольник снова станет красным, и узор продолжится. Высокая ценность угол Эта настройка делает серию достаточно быстрой для создания стробоскопического эффекта.
Если код не работает для вас, убедитесь, что вы добавили объект треугольников в класс прослушивателя событий, как мы это сделали с предыдущими объектами.
Довольно психоделический! Давайте добавим еще один всплеск, чтобы последовать за ним.
Танцующие пятиугольники
Мы можем использовать что-то почти идентичное нашему треугольники объект, чтобы произвести следующую за ним серию. Этот слегка измененный код создает ярко окрашенные перекрывающиеся вращающиеся шестиугольники:
const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});Основное изменение здесь заключается в том, что мы добавили задерживать 500 мс, так что всплеск не начнется до тех пор, пока не появятся треугольники. Идея заключалась в том, чтобы изменить несколько значений, чтобы всплеск вращался в направлении, противоположном треугольникам. По счастливой случайности, когда появляются пятиугольники, стробоскопический эффект треугольников создает впечатление, будто они вращаются вместе.
Немного случайности
Давайте добавим эффект, использующий случайные значения. Создайте пакет со следующими свойствами:
const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});Эта вспышка создаст линии, которые сначала станут красными, а затем станут прозрачными, со временем уменьшаясь. Что делает этот компонент интересным, так это то, что для определения некоторых его свойств используются случайные значения.
В степень сдвига дает дочернему объекту начальный угол. Благодаря рандомизации это дает совершенно разные всплески при каждом щелчке. Случайные значения также используются для радиус а также задерживать функции, чтобы добавить к хаотическому эффекту.
Вот эффект сам по себе:
Поскольку здесь мы используем случайные значения, нам нужно добавить дополнительный метод в наш обработчик событий для объекта:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();В генерировать () функция вычисляет свежие случайные значения каждый раз при вызове события. Без этого фигура будет выбирать случайные значения при первом вызове и продолжать использовать эти значения для каждого последующего вызова. Это полностью испортит эффект, поэтому обязательно добавьте это!
Вы можете использовать случайные значения почти для каждого элемента объектов mo.js, и это простой способ создавать уникальные анимации.
как вытащить звук из видео
Однако случайность - не единственный способ добавить динамические движения к анимации. Посмотрим на шататься функция.
Ошеломляющие линии
Чтобы показать, как шататься функция работает, мы собираемся сделать что-то вроде колеса Екатерины. Создайте новый пакет со следующими параметрами:
const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});Здесь все знакомо, всплеск создает 50 детей, которые представляют собой красные или оранжевые линии. Разница в том, что мы передаем задерживать свойство а шататься (10) функция. Это добавляет 10 мс задержки между излучением каждого дочернего элемента, придавая ему эффект вращения, который мы ищем.
Функция stagger не использует случайные значения, поэтому вам не понадобится генерировать на этот раз в обработчике событий. Давайте посмотрим, что у нас есть на данный момент в действии:
На этом мы могли бы легко остановиться, но давайте просто добавим еще один всплеск, чтобы завершить этот проект.
Умные квадраты
Для этого последнего пакета давайте сделаем что-нибудь из прямоугольников. Добавьте этот объект в свой код и в прослушиватель событий:
const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});Этот объект не добавляет ничего нового к тому, над чем мы уже работали сегодня, он включен просто для того, чтобы показать, как сложные геометрические узоры могут быть легко созданы с помощью кода.
Это не было предполагаемым результатом этого объекта, когда он был создан на этапах тестирования при написании этого руководства. После запуска кода стало ясно, что я наткнулся на что-то гораздо более красивое, чем я мог бы сделать специально!
С этим последним добавленным объектом мы закончили. Давайте посмотрим на все это в действии.
Mo.js: мощный инструмент для веб-анимации
Это простое введение в mo.js охватывает основные инструменты, необходимые для создания красивой анимации. По способу использования этих инструментов можно создавать практически все, и для многих задач веб-библиотеки являются простой альтернативой использованию Фотошоп , After Effects или другое дорогостоящее программное обеспечение.
Эта библиотека полезна для тех, кто работает как в программировании, так и в веб-разработке. Обработка событий, используемая в проекте, может легко использоваться для создания реактивных кнопок и текста на веб-сайтах или в приложениях. Развлекайтесь: ошибок нет, только счастливые случайности!
Делиться Делиться Твитнуть Эл. адрес Стоит ли переходить на Windows 11?Окна были переработаны. Но достаточно ли этого, чтобы убедить вас перейти с Windows 10 на Windows 11?
Читать далее Похожие темы- Программирование
- JavaScript
Ян Бакли - независимый журналист, музыкант, исполнитель и видеопродюсер, живущий в Берлине, Германия. Когда он не пишет или на сцене, он возится с электроникой или кодом своими руками в надежде стать безумным ученым.
Ещё от Ian BuckleyПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться