Взяв
от сюда анимирующую функцию "стрельбы из лука"… столкнулся с проблемой передачи параметра "
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>
