Форум

max0n · #1 (**permalink**) 08.08.2013, 18:57

Всем привет!
у меня есть код:

<html>
	<head>
		
		<script src="/animate.js" type="text/javascript"></script>
		<script>
			window.onload = function() {
				var div = document.getElementById("boxer"); //получаю блок по id
				div.onmouseover = function(){ // при наведении....
					animate({ //анимировать ширину
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							div.style.width = delta*(150-100)+100+"px";
						}
					})
				};
				div.onmouseout = function(){ // при отводе мыши....
					animate({ //анимированно вернуть ширину
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							div.style.width = delta*(100-150)+150+"px";
						}
					})
				};
			}
		</script>
	</head>
	<body>
		<div style="background: grey; width:100px; height:100px;" id="boxer"></div>
	</body>
</html>

что в animate.js? (взял от сюда: http://learn.javascript.ru/js-animation)

function animate(opts) {

  var start = new Date;
  var delta = opts.delta || linear;

  var timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;

    opts.step( delta(progress) );

    if (progress == 1) {
      clearInterval(timer);
      opts.complete && opts.complete();
    }
  }, opts.delay || 20);

  return timer;
}

// ------------------ Delta ------------------
function linear(progress) {
  return progress
}
function quad(progress) {
  return Math.pow(progress, 2)
}
function makeEaseOut(delta) {
  return function(progress) {
    return 1 - delta(1 - progress)
  }
}

проблема такова... когда навожу мышкой на блок, и сразу отвожу... начинается дёрганье блока.
я понимаю что это изза того что блок анимированно увеличивается... а уже запущена функция плавного уменьшения.

но я никак не могу додуматься как мне остановить прошлую анимацию перед запуском новой...
или что нужно сделать, чтобы дёрганья небыло, и сразу анимированно возвращались пропорции
что подскажете? (желательно с примером)

рони · #2 (**permalink**) 08.08.2013, 21:51

max0n, var timer сделайте вне функции и
строку 14 в animate продублируйте на 2 строку

max0n · #3 (**permalink**) 09.08.2013, 12:24

привет снова... решил проблему таким способом:

<html>
	<head>
		
		
		<script>
			window.onload = function() {
			globalTimer = 0;
				var div = document.getElementById("boxer");
				div.onmouseover = function(){
					clearInterval(globalTimer),
					animate({
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							div.style.width = delta*(150-100)+100+"px";
						}
					})
				};
				div.onmouseout = function(){
					clearInterval(globalTimer),
					animate({
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							div.style.width = delta*(100-150)+150+"px";
						}
					})
				};
				var diva = document.getElementById("boxe");
				diva.onmouseover = function(){
					clearInterval(globalTimer),
					animate({
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							diva.style.width = delta*(170-120)+120+"px";
						}
					})
				};
				diva.onmouseout = function(){
					clearInterval(globalTimer),
					animate({
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta) {
							diva.style.width = delta*(120-170)+170+"px";
						}
					})
				};
			}
			
			
			
			
			
			
function animate(opts) {

  var start = new Date;
  var delta = opts.delta || linear;

  globalTimer = timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;

    opts.step( delta(progress) );

    if (progress == 1) {
      clearInterval(timer);
      opts.complete && opts.complete();
    }
  }, opts.delay || 20);

  return timer;
}

// ------------------ Delta ------------------
function elastic(progress) {
  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
}
function linear(progress) {
  return progress
}
function quad(progress) {
  return Math.pow(progress, 2)
}

function quint(progress) {
  return Math.pow(progress, 5)
}
function makeEaseInOut(delta) {
  return function(progress) {
    if (progress < .5)
      return delta(2*progress) / 2
    else
      return (2 - delta(2*(1-progress))) / 2
  }
}
function makeEaseOut(delta) {
  return function(progress) {
    return 1 - delta(1 - progress)
  }
}
		</script>
	</head>
	<body>
		<div style="background: grey; width:100px; height:100px;" id="boxer"></div><br>
		<div style="background: green; width:120px; height:120px;" id="boxe"></div>
	</body>
</html>

но столкнулся с новой проблемой...
теперь когда сразу навожу на соседний блок, прошлый не возвращается к старым размерам.
что делать?

рони · #4 (**permalink**) 09.08.2013, 13:01

max0n,
строка 31 --> var timer; и для полного счастья вычислять текущую ширину в строке 37 и корректировать step на эту величину

max0n · #5 (**permalink**) 09.08.2013, 13:19

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

строка 31 --> var timer;

вырубает анимацию на корню...
что не так?

рони · #6 (**permalink**) 09.08.2013, 14:09

max0n,
так создавать массив таймеров для каждого элемента или индивидуальный таймер хранить в самом элементе или анимате раздвоить и каждой свой таймер для работы.

а лучше одна функция -- на входе id элемента + ширина конечная при mouseout и ширина при mouseover и duration чтобы не плодить копи паст.

рони · #7 (**permalink**) 09.08.2013, 15:12

max0n,

<html>
	<head>


		<script>


			window.onload = function() {
				var div = document.getElementById("boxer");
				div.onmouseover = function(){
					animate({
					    el : div,
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta,width) {
							div.style.width = delta*(150-width)+width+"px";
						}
					})
				};
				div.onmouseout = function(){
					animate({
					    el : div,
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta,width) {
							div.style.width = delta*(100-width)+width+"px";
						}
					})
				};
             var diva = document.getElementById("boxe");
				diva.onmouseover = function(){
						animate({
						el : diva,
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta,width) {
							diva.style.width = delta*(170-width)+width+"px";
						}
					})
				};
				diva.onmouseout = function(){
				   		animate({
					    el : diva,
						duration: 1000,
						delta: makeEaseOut(quad),
						step: function(delta,width) {
							diva.style.width = delta*(120-width)+width+"px";
						}
					})
				};






            }






function animate(opts) {
  clearInterval(opts.el.timer);
  var start = new Date;
  var delta = opts.delta || linear;
  var width = parseFloat(opts.el.style.width);
  opts.el.timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;

    opts.step( delta(progress),width );

    if (progress == 1) {
      clearInterval(opts.el.timer);
      opts.complete && opts.complete();
    }
  }, opts.delay || 20);


}

// ------------------ Delta ------------------
function elastic(progress) {
  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
}
function linear(progress) {
  return progress
}
function quad(progress) {
  return Math.pow(progress, 2)
}

function quint(progress) {
  return Math.pow(progress, 5)
}
function makeEaseInOut(delta) {
  return function(progress) {
    if (progress < .5)
      return delta(2*progress) / 2
    else
      return (2 - delta(2*(1-progress))) / 2
  }
}
function makeEaseOut(delta) {
  return function(progress) {
    return 1 - delta(1 - progress)
  }
}
		</script>
	</head>
	<body>
		<div style="background: grey; width:100px; height:100px;" id="boxer"></div>
        <div style="background: green; width:120px; height:120px;" id="boxe"></div>

	</body>
</html>

max0n · #8 (**permalink**) 09.08.2013, 15:17

огромное тебе спасибо!!!!
жаль не могу ещё раз тебе спасибо отправить )))
респект вообщем )

Форум

Справочник

Discord чат

Курсы javascript