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。

说真的，看看吧。超级简单易用。

随着时间的推移平滑滚动动画距离

1 个答案: