Среда программирования:
Sublime Text
Статья по теме:
В этом примере используется анимация из компьютерной игры, которая для более плавной анимации использует 7 меняющихся изображений, которые я склеил в одно изображение для удобства, и получилось широкое покадровое изображение.
Используем функцию ,которая анимирует наши спрайты
Код программы:
<code>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS-JS-Animation</title>
<style>
body{
background-color:#white;
}
</style>
</head>
<body>
<div id="mk"></div>
<script>
var styles = {};
styles.width = '65px'; // задаем параметры
styles.height = '135px';
Animation('mk', 'mk.png', styles); // вызываем функцию
function Animation(elementId, Name, styles) {
var img = document.createElement('img');
var q = 0;
img.onload = function () { //как только спрайт загружается
var el = document.getElementById(elementId);
el.style.width = styles.width;
el.style.height = styles.height;
var i = 0;
interval = setInterval(function() { //запускаем интервал
if (q < img.width) { //для смены позиции изображения
i=i+30; // если дошли до конца спрайта
} else {
i = 0; // то возвращаемся к началу
}
q = 8.8*i; //сдвиг по слайду
el.style.background = "url('" + Name + "') " + q + "px 50%";
} , 1000/7) //меняем позиционирование спрайта
}
img.src = Name; //задаем имянашего спрайта
}
</script>
</body>
</html>| Прикрепленный файл | Размер |
|---|---|
| sprite js.rar | 36.04 кб |