Форум

markovsdima · #1 (**permalink**) 30.03.2015, 02:31

Доброго времени суток!

Есть код, взятый с сайта хабрахабр, который воспроизводит анимацию бесконечно, при наведении.
Как упростить скрипт, чтобы анимация запускалась при открытии страницы, убрать всякие 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/

laimas · #2 (**permalink**) 30.03.2015, 04:46

Заменить строки с 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, которая будет определять задержку в секундах между циклами анимации

markovsdima · #3 (**permalink**) 30.03.2015, 13:20

Пустая страница получается, никаких анимаций. Пробовал вставлять
var wait = 'число' в разных местах. Может нужно где-то в определённом месте?

laimas · #4 (**permalink**) 30.03.2015, 13:33

Значит что-то не так делаете, а в каком месте и что, откуда брали смотрите.

рони · #5 (**permalink**) 30.03.2015, 13:45

<!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>

markovsdima · #6 (**permalink**) 30.03.2015, 15:36

Большая благодарность вам за ответы. Код Рони у меня отлично работает, вариант laimas не получилось запустить.

рони · #7 (**permalink**) 30.03.2015, 16:24

Сообщение от markovsdima

вариант laimas не получилось запустить.

пост 2 строка 13 }

laimas · #8 (**permalink**) 30.03.2015, 16:29

рони, ну и глазастый же

Исправлено )

Форум

Справочник

Discord чат

Курсы javascript