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

【问题标题】：Scale and move a text smoothly with javascript使用 javascript 平滑地缩放和移动文本
【发布时间】：2011-03-30 03:52:56
【问题描述】：

我正在通过 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 负载？非常感谢！

史蒂芬

【问题讨论】：

使用.animate()有什么问题？这是一个使用它的演示 - jsbin.com/oxode/2 你应该也可以使用 animate 淡入和淡出而没有问题
@Russ Cam：在一次运行（和其他事情）中增加和减少不透明度不要让我这样做。我希望我能……
如果它被拆分成对animate 的多个调用，这使得文本不断增长并且它在页面上的位置向下和向右移动，但还允许您进行调用以更改不透明度淡入淡出？

标签： javascript jquery text smoothing

【解决方案1】：

首先，绝对不要在 50 毫秒计时器内使用 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）。如您所见，它的缩放更平滑，尽管您必须稍微调整动画设置...

【讨论】：

我可以看到这应该表现得更好（虽然看不到效果，可能没有正确测试）。谢谢，我学到了一些东西。但不能解决文本跳转问题。
也在setTimeout 调用中，查看使用window.setTimeout(doAnimation, 15); 或window.setTimeout(arguments.callee, 15); 删除包装函数调用的不必要的匿名函数
@Steffen Wenzel 文本跳转很大程度上取决于浏览器。在 Firefox 中对我来说似乎是最流畅的。还可以考虑使用setInterval 而不是setTimeout (jsbin.com/oxode/5/edit) 可能会产生更流畅的动画。但最终你可能会得到一些文本跳跃，这就是为什么我建议在可行的情况下使用图像。
切换到 EM 确实有很大的不同，尤其是在 Safari 中（Firefox 似乎能够处理像素分数）。图片不实用，但可以解决问题，我同意。我也会尝试 setInterval。我的代码的主要问题是 px 而不是 em，所以你的回答几乎解决了我的问题。非常感谢！
我用 javascript + html5 编写了一个动画：每帧需要移动、拉伸和渲染超过 30 张图像。我可以轻松地将帧速率提高到 200fps，而无需进行任何优化。我认为你的答案是完美的，因为他只需要一张图片，没有 jQuery，有足够的 cpu 时间来获得流畅的观看体验

【解决方案2】：

几年前我在手机上非常成功地使用了这个库，也许它的开销很小，足以让你足够快：

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

【讨论】：

应该和jQuerys animate()有同样的缺点。

【解决方案3】：

jQuery 并不是真正为长动画设计的（这就是为什么“慢”小于 1 秒）所以高 CPU 负载并不会真正消失。

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

这已经做了很多你在那里编程的事情。

【讨论】：

是的，这会将这段代码减少到三行。但我还必须处理一个动画中增加和减少不透明度的问题。对我平行移动的五个左右元素使用一个间隔对我来说似乎更快。