在jQuery中短距离的微妙字体大小动画，持续时间很长

Question

我希望以缓慢而微妙的方式为一些文本制作动画。 jQuery动画使用整数值，所以如果你想在两秒钟内设置一个超过10px的大小的动画，你会看到一系列小步骤，五个FPS看起来不稳定。

这是jsFiddle that shows what I'm talking about。

我找到了关于动画位置的similar question，但top / left / etc属性是不可或缺的，因此接受的答案表明这是不可能的。但是font-size 可以动画为实数，如果jQuery会吐出实数。

我还希望将一系列此类动画链接在一起。

有什么想法吗？

Answer 1

我又看了一个可视化识别的最小点值。 pt的最小单位我发现变化为0.2pt。

然而，我注意到，当在一个while循环中每增加1毫秒的时间段内应用0.2点的变化时，它仍然看起来有点“滞后”。如果没有在jsfiddle中运行，可能不会。

关键是，如果您想要平滑地将字体大小更改10分，则必须按照0.2pt或0.25pt或0.5pt的步骤应用更改（您发现的任何内容）最平滑的）然后你必须使用1的间隔来保持平滑，但是你不应该应用不同的间隔，否则增量步骤要小到要注意，整个动画再次变得不稳定。

我认为，无论您使用什么框架，尝试强制进行10pt更改超过2秒都会看起来不稳定，因为小数字较小的字体大小缺乏视觉上的变化。

这对我很有用：
（我不会在此示例中考虑减少字体大小的动画，但可以在课程中添加）

function smoothAnimation($selector, startPoints, points){
    var increments = 0.2;
    var currentPoints = startPoints;
    var endPoints = currentPoints + points;

    while(currentPoints < endPoints){
        currentPoints += increments;
        $selector.animate({"font-size": currentPoints.toString() + "pt"}, 1, "swing");
    }
}

$('#msg').click(function() {
    $msg = $('#msg');
    $msg.animate({"font-size": "80pt"}, 400, "swing");

    smoothAnimation($msg, 80, 10);

    $msg.animate({"font-size": "40pt"}, 400, "swing");
});

DEMO - 平滑（ish）字体大小的动画

为了让它看起来更平滑，将increments值增加到0.25甚至0.5。如果您没有强制2秒的动画间隔，那么您可以将点设置为任何其他值并且动画保持平滑。

Answer 2

另一种选择是直接操作css转换 - here's an example（我只包含webkit css以使其可读，但所有现代浏览器中都存在类似的功能）。 “缓出”属性包括您瞄准的快速然后慢的功能。它肯定比你到目前为止所获得的更顺畅，但是它非常模糊 - 不确定它是否是你想做的权衡。由于它是一个实验性的属性，你可能仍然希望你现有的jQuery动画作为旧浏览器的后备。

Answer 3

jQuery动画很糟糕。查看另一种利用requestAnimationFrame技术或更好的计时机制的补间解决方案。也许尝试像tween.js这样的文件来看看罗马的演示，漂亮的缓慢移动的云......

Answer 4

目前，只有firefox支持字体的子像素渲染，因此其他浏览器中的动画将始终捕捉到像素。