Question

我正在通过JavaScript / jQuery缩放文本并进行移动。我不能使用jQuerys animate（）因为它必须淡入淡出并且必须重复并且有更多元素（最终结果：从背景“飞行”，向不同方向移动并逐渐消失）。

我的问题：它运行不顺畅并导致cpu使用率相当高。这是一个精简版：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">

    var steps = 300; // steps from start to finish

    // the final css values
    var endValueTop = 300;
    var endValueLeft = 300;
    var endValueFontSize = 100;

    // the current css values (get encreased in doAnimation())
    var currentValueTop = 100;
    var currentValueLeft = 100;
    var currentValueFontSize = 0;

    // the added values in each step
    var stepsTop = (endValueTop - currentValueTop) / steps;
    var stepsLeft = (endValueLeft - currentValueLeft) / steps;
    var stepsFontSize = (endValueFontSize - currentValueFontSize) / steps;

    function doAnimation() {

        // increase current values
        currentValueTop += stepsTop;
        currentValueLeft += stepsLeft;
        currentValueFontSize += stepsFontSize;

        // apply them
        $("#hello").css({
            top: currentValueTop,
            left: currentValueLeft,
            fontSize: currentValueFontSize
        });

        // restart if there are steps left
        if (steps--) {
            window.setTimeout(function(){
                doAnimation();
            }, 50);

        }

    }

    // start the first time
    doAnimation();

</script>

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
  body { position: relative; }
  p#hello { position: absolute; top: 100px; left: 100px; font-size: 0px; }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
</body>
</html>

在JS BIN上运行示例。

有什么建议吗？额外：如何减少CPU负载？非常感谢！

斯特芬

Answer 1

首先，绝对不要在50ms的计时器内使用jQuery。如果有什么导致高CPU使用率就是这样。使用类似的东西

var hello = $('#hello')[0].style;

function doAnimation() {

  //code...

  hello.top = curentValueTop + 'px';
  hello.left = currentValueLeft + 'px';
  hello.fontSize = currentValueFontSize + 'px';

  //rest of code...

}

然而，大多数浏览器无法很好地处理平滑且一致的字体缩放。由于99％的时间网页上的文字没有飞到你面前，我们没有注意到这一点。对于以您需要的最大字体大小呈现的文本图像，您可能会更幸运。

此外，50ms~ = 20fps，对于遍历屏幕一半的动画而言，这不是特别平滑的帧速率。如果不使用jQuery显着降低CPU使用率，您可以尝试更小的间隔。当然，大多数浏览器也不擅长处理高帧速率动画。

是的，现代网络浏览器，努力做到20岁的视频游戏控制台没有问题的事情，占帧率的四分之一。

编辑试试这个http://jsbin.com/oxode/4/edit

我使用em单位作为fontSize，因为它接受小数，并使用15ms计时器（如果浏览器可以跟上，则大约60fps）。正如您所看到的那样，它可以更平滑地进行缩放，但您必须稍微调整一下动画设置......

Answer 2

几年前我在手机上使用过这个库非常成功，可能它没有足够的开销让你足够快：

http://dev.opera.com/libraries/animation/

Answer 3

jQuery实际上并不是为长动画设计的（这就是为什么“慢”不到1秒）所以高CPU负载并没有真正消失。

您可以做的一件事是使用animate功能 http://api.jquery.com/animate/

那已经完成了很多你在那里编程的内容。

使用javascript平滑地缩放和移动文本

3 个答案: