Javascript-форум - Передача значения X в функцию Delta (JS Animation)

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Передача значения X в функцию Delta (JS Animation) (https://javascript.ru/forum/misc/50874-peredacha-znacheniya-x-v-funkciyu-delta-js-animation.html)

Передача значения 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>

Здравствуйте.
В объявлении функции укажите второй параметр:

function makeEaseOut(delta*!*, х*/!*) {

Затем в вызове передавайте х:

delta: makeEaseOut(back*!*, x*/!*)

неработает

Чудес на свете не бывает. Код в студию :)

Используйте именно для этого геморроя jquery и не мучайте свой мозг.

Цитата:

Сообщение от kostyanet (Сообщение 335695)

Используйте именно для этого геморроя jquery и не мучайте свой мозг.

я не использую сторонние билиотеки…
по мне, так лучше познать азы оригинального языка.

Цитата:

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

неработает

Забыл же пробросить в вызов функции back, передаваемой как аргумент delta в функцию makeEaseOut

Цитата:

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

я не использую сторонние билиотеки…

Я же отметил особенность - именно для этого геморроя. Там нечего познавать. Анимация это смена кадров. Кадры можно или нарисовать, или сгенерировать по функции. Так вот вы там отрезали дюжину функций, а вообще их просто невероятно немеряно. И вы все собираетесь познать? Познавалка не отвалится? :)

Цитата:

Сообщение от danik.js (Сообщение 335713)

Забыл же пробросить в вызов функции back, передаваемой как аргумент delta в функцию makeEaseOut

эм.. что? не понял….

Цитата:

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

return 1 - delta(1 - progress)

Вот тут, свой X вторым параметром забыл пробросить, не видишь чели?
Нафиг ты в эти дебри лезешь если разобраться не можешь?

Цитата:

Сообщение от danik.js (Сообщение 335736)

Познаю азы иерархии передачи значений.
И ничего не выходит ((((

<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, x) {
  return function(progress, x) {
    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, 0.5),
						step: function(delta) {
							//анимированная смена радиуса
							div.setAttribute('r',delta*(90-(Math.round(roundM*100)/100))+(Math.round(roundM*100)/100));
						}
					});
				}, 100);

		</script>
	</div>
    </body>
</html>

Цитата:

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

return 1 - delta(1 - progress)

delta - это что у тебя за функция такая? Где ее определение? Сколько в ее определении агрументов и каких прописано?

Сейчас у него это back. Там обычный набор и парочка вложенных методов, ТС угадал захотеть пользоваться одним из вложенных. Меж тем на JQ этот изиаут по умолчанию функциклирует.

Интересный факт, я нашел исходник за 1 минуту, еще 5 минут щелкал по полоскам и 1 минуту искал форум в гугле потому что случайно закрыл окно. ТС хочет изучать основы, типа, азы, без жиклера - и не искал, не нашел, зато неделю сношает этот кусок.

Вот оно все http://javascript.info/tutorial/animation