Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   анимация фона (https://javascript.ru/forum/dom-window/19387-animaciya-fona.html)

qwertyuiop 02.08.2011 23:15
анимация фона
 
есть код, я доволен, все работает даже в ие, но мне всёравно кажется, что код кривой, код заставляет ехать фон влево, у меня есть его реализация с jQwery и mootools, но она тормозит и много весит, это намного проще, но хотел бы узнать, что тут лишнего, и что лучше добавить:
<div onclick="animate('ex1', function(p) {return p;})" id="ex1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>


function animate(id, delta, dur) {
	element = document.getElementById(id);
	from = 0;
	to = 1;
	duration = dur || 100;
	start = new Date().getTime();

	setTimeout(function() {
	    var now = (new Date().getTime()) - start;
	    var progress = now / duration;
	        var result = (to - from)*delta(progress)+from;

	    element.style.backgroundPosition = "-"+result+"mm 0mm";
	    //element.innerHTML = result;

	    if (true)
	        setTimeout(arguments.callee, 1);
	}, 10);
}

qwertyuiop 03.08.2011 01:06 
function animate(id, delta) {
	element = document.getElementById(id);
	from = 0;
	to = 1;
	duration = 100;
	start = new Date().getTime();

	setTimeout(function() {
	    var now = (new Date().getTime()) - start;
	    var progress = now / duration;
	        var result = (to - from)*delta(progress)+from;

	    element.style.backgroundPosition = "-"+result+"mm 0mm";
	    //element.innerHTML = result;
	        setTimeout(arguments.callee, 1);
	}, 10);
}

убрал лишнее

Sweet 03.08.2011 01:20
Не то, что бы лишнее, просто не понимаю, зачем так сложно:
(new Date().getTime()) - start;
??? Я бы написал так:
new Date - start;
А вот что element, from, to и т.д. - глобальные переменные, - плохо! Будет конфликт, если запустить несколько функций.

qwertyuiop 03.08.2011 01:25
Sweet,
function animate(id) {
	element = document.getElementById(id);
	from = 0;
	to = -1;
	duration = 100;
	start = new Date().getTime();
	setTimeout(function() {
	    now = new Date() - start;
	    progress = now / duration;
	        result = (to - from)*progress+from;

	    element.style.backgroundPosition = result+"mm 0mm";
	    //element.innerHTML = result;
	        setTimeout(arguments.callee, 1);
	}, 10);
}

пока это получилось, я думаю переменные убрать, прописать в формеле все, что можно

qwertyuiop 03.08.2011 01:27
Sweet,
function animate(id) {
	element = document.getElementById(id);
	duration = 100;
	start = new Date().getTime();
	setTimeout(function() {
	    now = new Date() - start;
	    progress = now / duration;
	        result = -1*progress;

	    element.style.backgroundPosition = result+"mm 0mm";
	    //element.innerHTML = result;
	        setTimeout(arguments.callee, 1);
	}, 10);
}

получилось так

qwertyuiop 03.08.2011 01:30 
function animate(id) {
	element = document.getElementById(id);
	duration = 100;
	start = new Date()
	setTimeout(function() {
	    now = new Date() - start;
	    progress = now / duration;
	        result = -1*progress;

	    element.style.backgroundPosition = result+"mm 0mm";
	    //element.innerHTML = result;
	        setTimeout(arguments.callee, 1);
	}, 10);
}

qwertyuiop 03.08.2011 01:34 
function animate(id) {
	element=document.getElementById(id);
	start=new Date()
	setTimeout(function() {
		now=new Date() - start;
		progress=now / 100;
		result=-1*progress;
		element.style.backgroundPosition=result+"mm 0mm";
		setTimeout(arguments.callee,1);
	},10);
}

Sweet 03.08.2011 01:45
qwertyuiop,
качественно флудишь! Ты не видишь кнопочку "Ред." в правом нижнем углу сообщений? Рекомендую пользоваться ей.
И используй var!

qwertyuiop 03.08.2011 02:32
Sweet,
ок, ток зачем вар? может глупый вопрос, но всё же, я никогда не использую

qwertyuiop 03.08.2011 02:35
Sweet,
понял, чтобы за пределы функции не лезли

Sweet 03.08.2011 11:22
Цитата:
Сообщение от qwertyuiop
чтобы за пределы функции не лезли
Это слишком безобидно звучит. Вот пример:
<style>
div {
  position: absolute;
  height: 100px; width: 100px;
  background: green;
}

#test2{ top: 150px; }
</style>
<div id="test1"></div>
<div id="test2"></div>
<script>
function animate(id) {
	element=document.getElementById(id);
	start=new Date()
	setTimeout(function() {
		now=new Date() - start;
		progress=now / 100;
		result=1*progress;
		element.style.left=result+"px";
		setTimeout(arguments.callee,1);
	},10);
};

animate( "test1" );
setTimeout(function(){
  animate( "test2" ); // Второй вызов animate "выключит" первую анимацию
}, 3000);
</script>

kobezzza 03.08.2011 12:03
Цитата:
Сообщение от qwertyuiop (Сообщение 116975)
Sweet,
ок, ток зачем вар? может глупый вопрос, но всё же, я никогда не использую
Я настоятельно рекомендую всегда использовать var. Почему:
  1. Задача с var ставит переменную в соответствие с контекстом;
  2. В ИЕ могут быть баги при задаче без var;
  3. В ECMAScript 5 задача без var не работает;
  4. Такой способ задачи не очевиден и может наплодить кучу логических ошибок.

Андрей38 04.08.2011 16:48
<script>
var e=$('#divTwo')
$('#divClick1 ').live('click',function (){
e.show()
})
<script>

<script>
// тут нет var e=$('#divTwo')
$('#divClick2 ').live('click',function (){
e.hide()
})
<script>

Подскажите, пожайлуста, как сделать так,чтоб независимые друг от друга скрипты обращались к одной и той же VAR?
Такая необходимость возникает ОЧЕНЬ часто. Я читал, что бывают глобальные и локальные переменные .В наведенном примере - это локальная переменная?...Куда копать ? Может массив следует использовать для варов?

walik 04.08.2011 17:07
Если обе функции находятся в одном файле, то переменная e у тебя и так глобальная

Андрей38 04.08.2011 17:29
Цитата:
Сообщение от walik (Сообщение 117296)
Если обе функции находятся в одном файле, то переменная e у тебя и так глобальная
спасибо за эту часть ответа :thanks:


Часовой пояс GMT +3, время: 10:12.