Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.08.2013, 17:57
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

Дёрганье при смене анимации
Всем привет!
у меня есть код:
<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, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,271

max0n, var timer сделайте вне функции и
строку 14 в animate продублируйте на 2 строку
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2013, 11:24
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

привет снова... решил проблему таким способом:
<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>


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

Последний раз редактировалось max0n, 09.08.2013 в 11:46. Причина: не могу решить
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2013, 12:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,271

max0n,
строка 31 --> var timer; и для полного счастья вычислять текущую ширину в строке 37 и корректировать step на эту величину
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2013, 12:19
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

Сообщение от рони
строка 31 --> var timer;
вырубает анимацию на корню...
что не так?
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2013, 13:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,271

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

а лучше одна функция -- на входе id элемента + ширина конечная при mouseout и ширина при mouseover и duration чтобы не плодить копи паст.
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2013, 14:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,271

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>
Ответить с цитированием
  #8 (permalink)  
Старый 09.08.2013, 14:17
Аватар для max0n
Аспирант
Отправить личное сообщение для max0n Посмотреть профиль Найти все сообщения от max0n
 
Регистрация: 23.05.2012
Сообщений: 44

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

Последний раз редактировалось max0n, 09.08.2013 в 14:37. Причина: очепятка
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оставить выделение при смене фокуса DZHETIGAPA Events/DOM/Window 5 01.02.2018 19:11
Эффекты при смене background-position Semen55338 jQuery 0 26.09.2012 18:45
Почему скрипт отрабатывает в IE только при первом входе на сайт? tygeddar Элементы интерфейса 3 20.09.2012 00:37
Подружить два скрипта (скроллер+скрипт эффекта при наведении) Che jQuery 26 29.08.2012 09:59
Как сделать плавное изменение размеров контейнеров при смене AJAX-содержимого Nominus umbra Общие вопросы Javascript 3 27.01.2010 12:32