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)

max0n 15.10.2014 13:46

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

XelaNimed 15.10.2014 14:10

Здравствуйте.
В объявлении функции укажите второй параметр:
function makeEaseOut(delta*!*, х*/!*) {

Затем в вызове передавайте х:
delta: makeEaseOut(back*!*, x*/!*)

max0n 15.10.2014 14:37

неработает

XelaNimed 15.10.2014 14:48

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

kostyanet 15.10.2014 15:28

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

max0n 15.10.2014 15:40

Цитата:

Сообщение от kostyanet (Сообщение 335695)
Используйте именно для этого геморроя jquery и не мучайте свой мозг.

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

danik.js 15.10.2014 16:11

Цитата:

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

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

kostyanet 15.10.2014 16:47

Цитата:

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

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

max0n 15.10.2014 17:00

Цитата:

Сообщение от danik.js (Сообщение 335713)
Забыл же пробросить в вызов функции back, передаваемой как аргумент delta в функцию makeEaseOut

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

danik.js 15.10.2014 17:12

Цитата:

Сообщение от max0n
return 1 - delta(1 - progress)

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


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