4

我想以缓慢而微妙的方式为一些文本设置动画。jQuery 动画使用整数值，所以如果你想在两秒内为超过 10px 的大小设置动画，你会看到一系列 5 FPS 的小步骤，看起来很生涩。

这是一个jsFiddle，它显示了我在说什么。

我发现了一个关于动画位置的类似问题，但是top/ left/etc 属性是不可或缺的，因此接受的答案说这是不可能的。但是，如果 jQuery 会吐出实数，则可以将其设置为实数font-size 。

我还想将一系列这样的动画链接在一起。

有任何想法吗？

4

4 回答 4

2

我又看了一下视觉上可识别的最小点值。pt我注意到变化的最小单位是0.2pt.

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

关键是，如果您想将字体大小平滑地更改 10 个点，您必须一次应用0.2ptor0.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 秒动画间隔，动画就会保持平滑。

于 2012-09-06T18:18:40.603 回答
1

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

于 2012-09-06T18:12:27.613 回答
0

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

于 2012-09-06T17:33:34.377 回答
0

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

于 2012-09-06T18:31:18.997 回答