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

Передача значения X в функцию Delta (JS Animation)
Взяв от сюда анимирующую функцию "стрельбы из лука"… столкнулся с проблемой передачи параметра "X", в вычисляющую функцию…
Могу сделать только в ручную назначенный "X", что уменьшает вариацию функции...

<html>
    <head>
<script>
//--------------------------- ANIMATION ----------------------------//
function animate(opts) {
  var el = opts.el || false;
  var start = new Date;
  var delta = opts.delta || linear;
  var from = opts.from || 0;
  var to =  opts.to || 0;
	if(el){ clearInterval(opts.el.timer);
    opts.el.timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;

    opts.step( delta(progress),from,to );

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

function back(progress, x) {
    //var x = 2.9;
    return Math.pow(progress, 2) * ((x + 1) * progress - x)
}

function makeEaseOut(delta) {
  return function(progress) {
    return 1 - delta(1 - progress)
  }
}
//--------------------------- ANIMATION ----------------------------//

</script>
    </head>
  <body>
	<div style="height:400px; background:#ccc;">
		<svg height="400" width="800" style="background:#fff;">
			<circle  id="white" cx="400" cy="200" r="1" fill="#66bad6" />
		</svg>
		<script>
				var div = document.getElementById("white");
				var roundM = Math.round(div.getAttribute('r'));
				setTimeout(function(){
					animate({
					    el : div,
						duration: 1400,
						delta: makeEaseOut(back),//как передать тут значение X?
						step: function(delta) {
							//анимированная смена радиуса
							div.setAttribute('r',delta*(90-(Math.round(roundM*100)/100))+(Math.round(roundM*100)/100));
						}
					});
				}, 100);

			setTimeout(function(){alert("roundM="+roundM);}, 1500); //вывод изначального значения, вместо текущего

		</script>
	</div>
    </body>
</html>
Ответить с цитированием