javascript - 如何使用 Javascript/JQuery CSS 获得平滑的正弦波交替

Question

我在尝试让 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/

Answer 1

您需要调整超时持续时间。

100 毫秒相当于10fps(按1000/100 计算)。

要显得流畅，您至少需要 24-30 fps，因此将延迟设置为至少 40 毫秒或 30 毫秒或(甚至 16ms for 60fps) 以获得流畅的动画。

这就是您看到动画不稳定的原因。

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