Космические картинки используются на многих сайтах в качестве фонового изображения. Эти картинки, несомненно, прекрасны, но, в конце концов, они все еще являются изображениями, которые обеспечивают немного живости. С помощью jQuery мы можем создать неподвижное космическое изображение тридцати жизней, добавив немного космической пыли (частиц), летящих как светлячки. В этом уроке мы увидим, как реализовать этот эффект за 30 минут. Мы также изучим немного объектно-ориентированных техник Javascript.
Характеристики
- Частицы движутся с произвольной скоростью и в разных направлениях ( броуновское движение ).
- В этом уроке представлены четыре модели частиц. Каждый имеет немного разные взгляды.
- Общее количество частиц настраивается.
Мы будем долго смотреть на этот космический фон. Чтобы сделать наши глаза более удобными, в качестве фона в этом уроке используется темное и простое изображение. Не стесняйтесь использовать более красочные изображения в ваших собственных проектах.
Частицы
Чтобы сделать этот эффект более реалистичным, в этом уроке мы имеем четыре модели частиц. Это крошечные изображения с разным размером и внешним видом. Посмотрите на рисунок ниже для более подробной информации:
- Частица 1 меньше, но ярче. Похоже, что это правильно в фокусе, чтобы мы могли видеть это ясно.
- Частица 4 больше, но темнее (настолько темная, что вы едва ее видите), которая имитирует объект не в фокусе.
HTML
В отличие от большинства учебных пособий, это фон веб-страницы, на которой мы сосредоточимся сегодня, что делает HTML довольно простым:
- В теге body нет элементов. Так что ничто не будет отвлекать нас от фона и анимации.
- С помощью определения CSS для тела этой страницы устанавливается космический фон. Это должно быть очень просто.
- JQuery включен как обычно.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>The Firefly Effect</title>
<style>
body {
margin: 0;
background: #000 url(images/bg.jpg) 60% 0 no-repeat;
}
</style>
</head>
<body>
<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js»></script>
<script type=»text/javascript»>
// The magic goes here…
</script>
</body>
</html>
|
Объектно-ориентированный JavaScript
Теперь давайте подробнее рассмотрим жизнь частицы. Каждая частица может отличаться по внешности. И они движутся с разными скоростями и направлениями. Но все они следуют одному и тому же набору правил, которые можно описать как последовательность действий:
- Случайно выбрать модель частиц.
- Создайте DOM для этой частицы.
- Генерация случайной скорости для этой частицы.
- Создайте начальную позицию (Точка X и Точка Y) для этой частицы.
- Показать частицу в позиции, сгенерированной в 4.
- Создайте другую позицию (Точка X и Точка Y), в которую перемещается частица.
- Анимируйте движение частицы в позицию, созданную в 6.
- Повторите 6 и 7, как только анимация, упомянутая в 7, заканчивается.
Каждая частица следует точно за этими восемью шагами в течение своего жизненного цикла. И случайные факторы, такие как положение и скорость, заставляют каждую частицу вести себя уникальным образом. Это идеальный случай для реализации некоторых методов объектно-ориентированного программирования. Давайте обернем эти восемь шагов в «класс», который будет многократно создаваться для создания нескольких экземпляров одной и той же логики. Каждый экземпляр (частица) движется в отдельной полосе и имеет свою скорость и направление.
Важно отметить, что в JavaScript нет классов. Функции можно использовать для имитации классов, но в целом JavaScript основан на прототипах, а не на классах. Все является объектом. Для получения дополнительной информации о том, как определить и создать экземпляр класса JavaScript, ознакомьтесь с этими статьями .
В этом самом эффекте «класс» определяется и затем создается 50 раз с помощью следующего кода.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function Particle() {
// 1. Randomly pick a particle model.
// 2. Create a DOM for this particle.
// 3. Generate a random speed for this particle.
// 4. Generate the initial position (Point X and Point Y) for this particle.
// 5. Display the particle at the position generated in 4.
// 6. Generate another position (Point X and Point Y) to which the particle moves.
// 7. Animate the particle movement to the position generated in 6.
// 8. Repeat 6 and 7 once the animation mentioned in 7 finishes.
};
function randomInt(max) {
// Generate a random integer (0 <= randomInt < max)
return Math.floor(Math.random() * max);
}
$(function(){
var total = 50;
var particles = [];
for (i = 0; i < total; i++){
particles[i] = new Particle();
}
});
|
- Восьмиэтапная логика заключена в функцию с именем Particle . Определение функции — это способ определения «класса» в Javascript.
- Нам нужно будет генерировать много случайных целых чисел в этом эффекте, от скорости до позиций XY. Итак, давайте напишем функцию для этой единственной цели и назовем ее randomInt . Он генерирует случайное целое число меньше заданного числа. Мы будем использовать эту функцию время от времени, поэтому не забывайте об этом.
- В конце мы создаем экземпляр функции Particle в цикле, создавая 50 экземпляров частиц, каждый из которых хранится в массиве с именем частиц . Обратите внимание на ключевое слово « new », которое мы используем для создания объекта.
Некоторые основные настройки
В этом разделе мы определим свойства и методы для класса Particle. И мы увидим, как случайным образом выбрать модель частиц.
Мы можем использовать ключевое слово this для определения свойств класса. Когда дело доходит до определения методов, свойство ‘ prototype ‘ — это путь. Посмотрите на код ниже, и мы дадим некоторые пояснения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function Particle() {
this.path = ‘images/’;
this.images = [‘particle1.png’, ‘particle2.png’, ‘particle3.png’, ‘particle4.png’];
// Randomly Pick a Particle Model
this.image = this.images[randomInt(this.images.length)];
this.file = this.path + this.image;
// Create a Particle DOM
this.element = document.createElement(‘img’);
// A Sequence of Actions to Take
this.speed().newPoint().display().newPoint().fly();
};
// Generate a Random Speed
Particle.prototype.speed = function() {};
// Generate a Random Position
Particle.prototype.newPoint = function() {};
// Display the Particle
Particle.prototype.display = function() {};
// Animate Particle Movements
Particle.prototype.fly = function() {};
|
- В строках 2 и 3 мы определяем путь и имена файлов наших изображений частиц. Существует более одного изображения частиц, поэтому мы храним их в массиве (свойство Particle ).
- В строке 6 случайное изображение частицы выбирается из массива, упомянутого выше. Функция randomInt, которую мы определили ранее, используется здесь. Очень удобно, а?
- В строке 7 мы объединяем путь и имя файла.
- В строке 10 создается img DOM. Это контейнер частицы.
- Строка 13 является ядром этого эффекта. Последовательность методов вызывается в цепочке. Эта единственная строка кода охватывает шаги с 3 по 8, упомянутые в предыдущем разделе. Мы рассмотрим каждый из этих методов очень скоро.
- От строки 17 до конца, четыре класса определены для класса частиц . Каждый из них заботится об одной конкретной вещи для частицы. Speed () генерирует случайную скорость. NewPoint () генерирует случайный набор позиции XY. Display () гарантирует, что частица отображается правильно. И fly () заботится о анимации.
- Обратите внимание на то, как мы определяем методы для «класса» в строках 17, 20, 23 и 26. Новые методы определены в свойстве прототипа класса. Это может показаться немного сложным для ребят из C, Java или PHP фона (как я). Если вам это неудобно, не стесняйтесь потратить минуту на чтение этой статьи .
На самом деле есть много разных способов определения свойств и методов для класса Javascript. Вот отличная статья на эту тему.
Случайная скорость
К настоящему времени у нас есть идея, как работает этот эффект. Из этого раздела мы начнем писать функции, которые мы используем для управления движением частицы.
Во-первых, давайте сгенерируем случайную скорость для частицы. Скорость определяет, как быстро движется частица. Если вы знакомы с jQuery, вы поймете, что мы не можем просто передавать реальную скорость, скажем, 100 пикселей в секунду. Фактически, параметр, используемый для описания скорости в jQuery, — это длительность, измеряемая в миллисекундах. Таким образом, возникает вопрос, как создать разумную продолжительность, в течение которой частица перемещается из одного места в другое. Как насчет следующего кода?
|
1
2
3
4
5
6
|
// Generate Random Speed
Particle.prototype.speed = function() {
this.duration = (randomInt(10) + 5) * 1000;
return this;
};
|
- В строке 3 мы просто генерируем случайное целое число в диапазоне от 5000 до 14000. То есть частица будет сохранять свою скорость и направление неизменными в течение 5–14 секунд, прежде чем совершить поворот и двинуться куда-то еще.
- Посмотрите на Строку 5. Почему мы возвращаем это ? Помните, что эти функции будут вызываться в цепочке? Возврат исходного объекта обеспечивает правильную работу функции трейлинга. Нам понадобится это и в других методах.
- Как только эта функция выполнена, свойство duration становится доступным в экземпляре Particle .
Случайная позиция
Случайный набор позиции XY очень полезен в этом эффекте. Может использоваться для определения:
- В какой момент частица появляется изначально,
- К какой точке движется частица, когда она рождается или заканчивает путешествие.
Вот код, который нам нужен для генерации случайного набора позиции XY.
|
1
2
3
4
5
6
7
|
// Generate a Random Position
Particle.prototype.newPoint = function() {
this.pointX = randomInt(window.innerWidth — 100);
this.pointY = randomInt(window.innerHeight — 100);
return this;
};
|
Размер текущего окна браузера можно узнать из window.innerWidth и window.innerHeight . Если частица летит за границу окна, появятся полосы прокрутки. Возможно, мы не хотим, чтобы это произошло. Итак, давайте ограничим движение частицы в области, которая на 100 пикселей меньше и шире, чем окно браузера. Приведенный выше код должен быть довольно простым. После выполнения этой функции свойства pointX и pointY становятся доступными. Как только функция запустится во второй раз, pointX и pointY будут обновлены в случае Particle .
Показать частицу
В предыдущих разделах img DOM уже был создан для новой частицы. Теперь мы собираемся установить несколько атрибутов и отобразить частицу где-нибудь в окне браузера. Это достигается с помощью следующего кода.
|
01
02
03
04
05
06
07
08
09
10
11
|
// Display the Particle
Particle.prototype.display = function() {
$(this.element)
.attr(‘src’, this.file)
.css(‘position’, ‘absolute’)
.css(‘top’, this.pointY)
.css(‘left’, this.pointX);
$(document.body).append(this.element);
return this;
};
|
- В строке 3 this.element содержит созданный img DOM. Мы установим атрибуты для этого в этой функции.
- В строке 4 this.file содержит случайное изображение, которое мы выбрали из четырех моделей частиц. Устанавливая атрибут src , мы переносим изображение частицы в новый img DOM.
- В строках с 5 по 7 частица располагается где-то в окне браузера.
- В строке 8 только что созданный img DOM добавляется к телу. Частица никогда не появится, если мы не напишем эту строку простого кода.
Анимация движения частиц
Наконец, мы подошли к анимационной части, которая может оказаться проще, чем вы думали.
Функция animate в jQuery поможет нам. Он принимает четыре параметра: анимация (параметры, длительность, ослабление, обратный вызов) . Проверьте документацию, если вы не знаете, что она делает.
|
01
02
03
04
05
06
07
08
09
10
|
// Animate Particle Movements
Particle.prototype.fly = function() {
var self = this;
$(this.element).animate({
«top»: this.pointY,
«left»: this.pointX,
}, this.duration, ‘linear’, function(){
self.speed().newPoint().fly();
});
};
|
То, что делает приведенный выше код, довольно просто:
- Он оживляет частицу в случайном положении.
- Анимация занимает миллисекунды this.duration для завершения.
- Частица движется с постоянной скоростью. (Режим ослабления является «линейным».)
- Как только анимация завершится, код в строке 8 будет выполнен как обратные вызовы.
- В строке 8 будет сгенерирована новая скорость, будет рассчитана новая позиция, и функция fly () (та самая, о которой мы пишем в этом разделе) будет выполнена снова.
- Повторите с шага 1.
Так что функция fly () вызывает себя неоднократно. С помощью этой рекурсивной функции анимация продолжается и продолжается вечно. К настоящему времени мы можем написать всю историю жизни частицы. Все еще помните следующую цепочку?
|
1
|
this.speed().newPoint().display().newPoint().fly();
|
Давайте рассмотрим, что он делает:
- Новая скорость генерируется.
- Новый набор позиции XY рассчитывается.
- Частица обнаруживается в положении, рассчитанном на шаге 3.
- Новая позиция рассчитывается.
- Частица перемещается в положение, рассчитанное на шаге 5.
- Новая скорость генерируется.
- Новый набор позиции XY рассчитывается.
- Частица перемещается в положение, рассчитанное на шаге 7.
- После завершения анимации повторите процедуру, начиная с шага 6.
Если эти шаги звучат для вас как скороговорка … Посмотрите на эту фигуру еще раз. Вы должны быть в состоянии кодировать каждый шаг сейчас. И вы должны знать, как организовать все вещи в объектно-ориентированной структуре. Наконец эффект светлячка завершен.
Вывод
Теперь каждый сможет реализовать этот эффект в своих проектах. Надеюсь, вы лучше понимаете объектно-ориентированный Javascript.
Первое, что мне нравится в этом эффекте, это то, что, изменяя фон и изображения частиц, вы можете создавать совершенно разные образы и ощущения. Вы можете иметь самолеты или даже суперменов, летающих на вашей веб-странице, если хотите. Ваше воображение это предел.
Вот и все для этого урока. Надеюсь, тебе понравится. Спасибо за прочтение!