1

我在尝试让 html 和 jQuery 在 div 的字体大小上创建平滑的正弦波脉冲时遇到了一些麻烦。我有交替工作，但它似乎太波涛汹涌。是否有更数学的方法来优化 setTimeout() 中的 javascript 的 math.sin() 以便以 px 为单位的字体大小可以以更平滑的速率增加和减少？

$(document).ready(function(e){
  var i = 10;
  var fontsize;
  function pulseLoop() {
        fontsize = (Math.sin(i) * 10) + 50;
        $(".changer-container").css("font-size",fontsize + "px");
        i = i + .5;
    setTimeout(pulseLoop, 100);
  }
  pulseLoop();

  $(document).focus();
});

http://jsfiddle.net/MdQxh/2/

4

1 回答 1

4

您需要调整timeout持续时间。

100 ms 相当于10fps（按 1000/100 计算）。

为了看起来流畅，您至少需要 24-30 fps，因此将延迟设置为至少40ms 或ms 或（对于60fps30甚至ms ）以获得流畅的动画。16

这就是为什么你会看到动画不连贯的原因。

这是 60fps 的小提琴，我将i增量从更改i = i + .5;为：http i = i + .2;: //jsfiddle.net/amyamy86/mecPv/

于 2013-03-26T00:26:53.740 回答