HTML — это язык, на котором построена сеть, и это своего рода странный зверь. Хотя изначально он задумывался как способ легко обмениваться академической информацией через Интернет, он постепенно трансформировался, чтобы приспособиться к богатой средствами массовой информации среде, которую мы знаем и любим. Из-за случайной природы HTML (и JavaScript, языка программирования, который манипулирует элементами в HTML и делает их интерактивными), иногда нам приходится немного думать нестандартно. В этой серии уроков я покажу вам, как выполнять кросс-браузерную анимацию с помощью метода, называемого спрайтингом . И, поскольку это возможность обучения, мы будем делать все это без каких-либо внешних библиотек (например, jQuery).
Это будет серия из четырех частей. Я объясню сам спрайтинг в первой части (в этой статье) с помощью некоторого базового JavaScript, но затем в следующих статьях мы перейдем к некоторым промежуточным методам, таким как инкапсуляция, обработка событий и поддержка сенсорного экрана.
Итак, начнем!
Что такое анимация?
Анимация основана на явлении, называемом постоянством зрения , которое в основном говорит о том, что если ваш мозг видит достаточно много похожих неподвижных изображений достаточно быстро, то это будет выглядеть так, как будто это одно движущееся изображение. Каждый вид фильма или видео использует эту базовую технику — многие немного разные кадры показываются в быстрой последовательности, чтобы что-то казалось движущимся. Фильм обычно работает со скоростью 24 кадра в секунду (₁), в то время как телевизионное вещание в Северной Америке показывается с 29,97 кадрами в секунду (₂). Итак, другими словами, мы хотим создать что-то, что показывает подобные кадры очень быстро (несколько раз в секунду).
Трудности в Интернете
Есть две основные причины, по которым анимацию сложно использовать в Интернете:
- Во-первых, разные браузеры по-разному интерпретируют HTML и JavaScript, поэтому то, что работает на одном устройстве, часто не работает на другом. Flash отлично работает в большинстве браузеров, но поддержка для него начинает падать, и устройства iOS не позволяют этого вообще. У Canvas большой потенциал, но Internet Explorer 8 его не поддерживает. То же самое касается Adobe Edge Animate. GIF-файлы работают на все, но вы не можете управлять анимацией или сделать ее интерактивной.
- И, во-вторых, каждый раз, когда изображение подается на веб-страницу, между браузером и сервером делается отдельный запрос. Эти запросы могут складываться даже через молниеносное интернет-соединение, делая несколько кадров в секунду неуправляемыми.
Решение: спрайтинг
Одним из способов решения этих проблем является создание листа спрайта. В таких элементах, как div s, мы можем установить фоновое изображение для div которое может быть больше, чем сам элемент. Мы также можем установить положение фона, чтобы точно определить, какая часть большего изображения будет отображаться. Спрайт-лист — это увеличенное изображение, состоящее из нескольких небольших изображений, которые мы можем перемещать, чтобы оно могло заменить многие маленькие изображения. Взгляните на пример ниже, используя J, талисман моей компании Joust Multimedia :
Хотя существует десять разных изображений J, они помещаются вместе в один большой файл PNG (мы используем PNG, потому что они могут показывать прозрачность). Если у нас есть div который имеет размер только одного из изображений, и мы устанавливаем этот PNG в качестве фона, он будет выглядеть как одно изображение.
Несмотря на то, что при показе изображения это большая проблема, этот метод прекрасно решает две проблемы, которые у нас были раньше. С очень небольшим количеством JavaScript (одна строка!) Вы можете изменить фоновую позицию div , и это работает на всем. Кроме того, поскольку все эти кадры находятся на одном изображении, для загрузки этого изображения на странице потребуется всего один запрос. Таким образом, после загрузки страницы она может без проблем переключаться между спрайтами.
Итак, как мы можем настроить это, чтобы оживить легко тогда? Первым шагом является создание листа спрайта. Вы хотите знать, какими должны быть конечные размеры вашего изображения, и разместить спрайты соответственно в сетке. Например, мое J-изображение будет иметь ширину 40px и высоту 50px, поэтому я выстроил свои спрайты точно на 40px по горизонтали и точно на 50px по вертикали. Вероятно, будет проще, если вы установите начальный спрайт в верхнем левом углу.
Затем мы установим div с небольшим количеством CSS, чтобы убедиться, что все выглядит правильно:
|
1
2
3
|
<div id=»stage»>
<div id=»j» class=»character»></div>
</div>
|
И вот наш CSS, чтобы убедиться, что спрайт отображается правильно:
|
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
|
.character {
/*
* Very important that we set the height and width of
* our characters to the height and width of the sprites
*/
height:50px;
width:40px;
/*
* We need to position them absolutely so we can have full
* control over their position within the stage
*/
position:absolute;
left:100px;
top:120px;
}
#j {
/*
* And now we set the background image for the character div
* to be the first sprite (in the upper left corner)
*/
background-image: url(‘j.png’);
background-repeat:no-repeat;
background-position:0 0;
}
|
Обратите внимание на следующие вещи:
- Мы указываем ширину и высоту
divв соответствии с размером нашего спрайта - Мы указываем background-repeat для
'no-repeat' - Мы указываем background-position как
'0 0'— это покажет спрайт в верхнем левом углу
Теперь потребуется всего одна строка JavaScript, чтобы изменить положение фона, чтобы показать следующий спрайт.
|
1
|
document.getElementById(‘j’).style.backgroundPosition = ‘-40px 0px’;
|
Здесь мы выбираем элемент (с id='j' ) и устанавливаем атрибут стиля 'backgroundPosition' . Обратите внимание, что это пишется как 'backgroundPosition' в JavaScript, а не как 'background-position' в CSS. Также обратите внимание, что в JavaScript 'px' требуется для обоих значений x и y — мы не можем просто передать ему числа. И поскольку мы перемещаем фоновое изображение, мы должны перемещать его в направлении, противоположном тому, что вы могли ожидать. Чтобы перейти к спрайту справа, нам нужно переместить изображение на 40 пикселей влево.
Теперь, если у нас есть что-то простое для выполнения этого кода (например, кнопки), мы можем увидеть, как кадры меняются в действии: проверьте DIsgk на Codepen.
Кроме того, вам может быть интересно взглянуть на исходный код этой страницы. Здесь есть все примеры с подробными комментариями. И вот лист спрайта, который я использую.
Следующий
То, что мы рассмотрели в этом уроке, является хорошим началом, но это не совсем правильная анимация. Во второй части этой серии мы фактически оживим бег и прыжки, создавая петли с различными спрайтами.
К четвертой части мы будем создавать указатели мыши для небольшого действия робота. Смотрите ByGtv Codepen для предварительного просмотра.
Выводы и недостатки
Хотя это может быть отличным методом для анимации в Интернете, есть несколько недостатков. Во-первых, может потребоваться создать каждый отдельный кадр анимации, что может занять много времени. Во-вторых, браузеры не имеют самых точных таймеров для анимации, поэтому, если для вашей анимации крайне важно, чтобы она была точно синхронизирована, это может не сработать. Наконец, в мобильном Safari (используемом на iPhone и iPad) есть «особенность», при которой, если у вас есть фоновое изображение размером более 2 МБ или более 1024 x 1024 x 3 пикселя (или 3145728 пикселей), оно автоматически масштабирует изображение, разрушающее эффект спрайта. Это означает, что действительно большие спрайты или анимации с очень большим количеством спрайтов исключены. Но для простых маленьких анимаций, которые вы хотите быть очень интерактивными, это простой и отличный способ получить что-то, что работает везде.
Интересные примечания
1 До появления звука в фильмах не было стандартной частоты кадров. Камеры управлялись ручным рычагом, поэтому, если у вас был начинающий оператор, частота кадров могла бы непреднамеренно снизиться и ускориться. Аналогичным образом, менее авторитетные кинотеатры были известны тем, что говорили своим проектировщикам, что нужно быстрее запускать проектор, чтобы ускорить показ, чтобы они могли вписаться в большее количество показов. По этой же причине мы стереотипно считаем, что фильмы с предварительным звучанием движутся комично быстро — большинство из них были сняты со скоростью 16-18 кадров в секунду, поэтому, когда мы воспроизводим их сегодня со скоростью 24 кадра в секунду, они движутся быстрее, чем первоначально предполагалось.
2 Телевидение изначально транслировалось со скоростью 30 кадров в секунду в Северной Америке, но при показе на такой скорости цветное телевидение вызывало сбои. Инженеры выяснили, что они могли бы это исправить, снизив частоту кадров на 0,1%, поэтому сейчас она установлена на 29,97 кадров в секунду. Кроме того, помимо всех дурацких технических проблем, связанных с преобразованием фильма со скоростью 24 кадра в секунду для показа по телевидению со скоростью 29,97 кадров в секунду, показ телевидения с более высокой частотой кадров в секунду оказал интересное влияние на публику. Многие люди, которые смотрели тестовые показы «Хоббита» со скоростью 48 кадров в секунду, сообщали, что из-за повышенной частоты кадров фильм выглядел «дешевле», хотя его качество было намного выше, чем у обычного фильма, просто потому, что он вырос, чтобы ассоциировать более высокие частоты кадров. с просмотром чего-то по телевизору.