随时间平滑滚动动画距离

Question

我正试图使用javascript来操纵翻译来创建一个流畅的无休止的动画，我很难开发出具有加速和减速的动态速度公式

这就是我目前拥有的

function run() {
    //stride();
    now = Date.now();
    var  delta = (now - time) / 1000;
    draw(delta);
    time = now;
    if(streets.y1 >= h)  streets.y1 = 0 - h + 1;
    else if(streets.y2 >= h) streets.y2 = 0 - h + 1;
    requestAnimationFrame(run);
}
 function draw(delta)
{
  var old_y = streets.y1;
  var n = old_y + delta;
  streets.y1 += Math.abs(n - old_y) * 25.8;
  street[0].style[ $.fx.cssPrefix + 'transform' ] = 'translate(0,'+ Math.round(streets.y1) +      'px)';
  var old_y = streets.y2;
  var n = old_y + delta;
  streets.y2 += Math.abs(n - old_y) * 25.8;
  street[1].style[ $.fx.cssPrefix + 'transform' ] = 'translate(0,'+ Math.round(streets.y2) +'px)';
}

有人能给我一些建议或指导我去上教程吗。

感谢

Answer 1

用手做这种动画很糟糕。我建议使用第三方库，这样你只需要专注于让很棒的事情发生，而不是所有烦人的事情。

（到目前为止）最好的是Greensock的GSAP。

说真的，看看吧。使用起来超级简单。