如何获得一个平稳的正弦波交替与Javascript/JQuery CSS

How to get a smooth sine wave alternation with Javascript/JQuery CSS

本文关键字：正弦波 Javascript CSS JQuery 何获得 一个      更新时间：2023-09-26

我遇到了一些麻烦，试图让html和jQuery在div的字体大小上创建一个平滑的正弦波脉冲。我有交替工作，但它似乎太起伏。是否有一个更数学的方法来优化javascript的math.sin()在setTimeout()中，使字体大小在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/

需要调整timeout持续时间

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

要看起来平滑，你需要至少24-30 fps，所以将延迟设置为至少40 ms或30 ms或(甚至16 ms 60fps)以获得平滑的动画。

这就是为什么你看到动画是起伏不定的。

这是你的小提琴在60fps，我改变i增量从i = i + .5;到i = i + .2;: http://jsfiddle.net/amyamy86/mecPv/

相关文章：