PNG спрайт анимация loop delay
Доброго времени суток!
Есть код, взятый с сайта хабрахабр, который воспроизводит анимацию бесконечно, при наведении. Как упростить скрипт, чтобы анимация запускалась при открытии страницы, убрать всякие onmouseover, onmouseout, и задать задержку между каждым проходом спрайта?
<script>
var styles = {};
styles.cursor = 'pointer';
styles.width = '200px';
styles.height = '50px';
var elementId = 'gun';
var imgName = 'canvas.png';
spriteAnimation(elementId, imgName, styles);
spriteAnimation('ship', 'ship.png', styles);
function spriteAnimation(elementId, imgName, styles) {
var img = document.createElement('img');
var offset = 0;
img.onload = function () {
var element = document.getElementById(elementId);
element.style.cursor = styles.cursor;
element.style.width = styles.width;
element.style.height = styles.height;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
var i = 0;
element.onmouseover = function() {
interval = setInterval(function() {
if (offset < img.width) {
i++;
} else {
i = 0;
}
offset = -200 * i;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
} , 1000/15)
then
}
element.onmouseout = function(){
clearInterval(interval)
}
}
img.src = imgName;
}
</script>
http://habrahabr.ru/post/130193/ |
Заменить строки с 23 по 38 следующим:
delay();
function delay() {
interval = setInterval(function() {
if (offset < img.width) i++;
else {
i = 0;
clearInterval(interval);
setTimeout(delay, 1000 * wait)
}
offset = 75 * i;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
} , 1000/24)
}
и добавить переменную wait, которая будет определять задержку в секундах между циклами анимации |
Пустая страница получается, никаких анимаций. Пробовал вставлять
var wait = 'число' в разных местах. Может нужно где-то в определённом месте? |
Значит что-то не так делаете, а в каком месте и что, откуда брали смотрите.
|
:-?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS-JS-Animation</title>
<style>
body{
background-color:#333333;
}
</style>
</head>
<body>
<div id="ship"></div>
<script>
var styles = {};
styles.cursor = "pointer";
styles.width = "75px";
styles.height = "75px";
spriteAnimation("ship", "http://naxel.github.io/demos/canvas-css-js-animation/ship.png", styles);
function spriteAnimation(elementId, imgName, styles) {
var img = document.createElement("img");
var offset = 0;
img.onload = function() {
var element = document.getElementById(elementId);
element.style.cursor = styles.cursor;
element.style.width = styles.width;
element.style.height = styles.height;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
var i = 0;
interval = setInterval(function() {
if (offset < img.width) i++;
else {
i = 0;
clearInterval(interval);
window.setTimeout(function() {
spriteAnimation(elementId, imgName, styles)
}, 2000)
}
offset = 75 * i;
element.style.background = "url('" + imgName + "') " + offset + "px 50%"
}, 1000 / 24)
};
img.src = imgName
};
</script>
</body>
</html>
|
Большая благодарность вам за ответы. Код Рони у меня отлично работает, вариант laimas не получилось запустить.
|
Цитата:
|
рони, ну и глазастый же :)
Исправлено ) |
| Часовой пояс GMT +3, время: 16:05. |