Здравствуйте.
Код ниже демонстрирует ускоренеи элемента.
https://jsfiddle.net/sLy4dz7p/1/
<body style="background-color:#000;">
<div id="test" style="position:absolute;top:50%;left:50%;transform:translate(50%,50%);width:20px;height:20px;background-color:#fff;"></div>
</body>
<script>
window.onload = function(){
var element = document.getElementById('test');
var start;
var minSpeed=1;
var maxSpeed=5;
var minPosY=0;
var maxPosY=250;
var thisPosY=50;
//Движение
function moveMe(speed,pxY){
//Шаг
function step(timestamp){
if (!start) {
start = timestamp;
};
time=timestamp-start;
var px = time * speed / 10;
element.style.transform = "translate("+0+"px,"+px+"px)";
if (px < pxY){
requestAnimationFrame(step);
speed=speed+0.5;
return;
}
console.log("Приехали");
return;
}
requestAnimationFrame(step);
}
moveMe(5,500);
}
</script>
Никак не могу решить задачу.
Необходимо плавно менять скорость перемещения относительно текущей позиции. То-есть если элемент находится на minPosY=0 то необходимо задать minSpeed=1, по мере увеличения Y в +, необходимо плавно наращивать скорость, пока она не станет равной 5 или не будет превышен maxPosY.
По существу, представим поле, сверху обьект движется с минимальной скоростью, внизу с максимальной. Между минимумом и максимумом скорость меняется плавно.
Help!