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

Posted 2023-05-08

【中文标题】jQuery中短距离和长持续时间的微妙字体大小动画

【英文标题】：Subtle font size animation over short distances with long durations in jQuery

【发布时间】：2012-08-31 13:19:54

【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

原来这很难！我在让动画工作方面取得了一些成功，但浏览器似乎忽略了大值（80-90 像素）的非整数字体大小。 Can you improve on this?

在玩了最后一个小时的小提琴之后，我认为主要问题是字体大小在小数区域之间在视觉上没有太大变化。我认为最小的显着变化是 0.5 个像素。如果您要求在 2 秒内将点或像素增加 10，则结果为每毫秒 0.005 像素。看到你只注意到下一个 0.5 的字体大小变化，你只会每 100 毫秒看到一次变化，因此它看起来“滞后”。当然，让这 10 像素的变化在更短的时间内“平滑”动画。

您可以尝试进行转换而不是直接操作文本。

@FlavorScape，一位同事在评论中推荐了类似的东西。你有什么具体的我可以开始的吗？甚至只是某些文档的 URL？

【参考方案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 秒的动画间隔，动画就会保持平滑。

【讨论】：

这绝对比我想出的 jQuery 版本更好看。虽然它仍然有一点抖动。我实际上是在尝试通过 html5 重现原生 ios 应用程序的流畅性，即使这个解决方案也不是很流畅。今天我离开办公室时，一位同事建议我研究一些 3D 变换，希望通过纹理来加速这个硬件。听起来不错，但我还没有研究过。

@DrewNoakes：我完全同意。我认为任何使用 jQuery animate 的设置都不会给你带来这种流畅性。当您找到解决方案时，请发布它，因为我认为这是一个非常有趣的问题需要解决。 Bubbles 的答案的转换看起来非常好，它可以让你指定一个持续时间:)

其实我应该澄清一下，我的目标是 iOS/WebKit。您的演示在 Firefox 中看起来很棒，但在 Chrome/iOS 上看起来不如原生 iOS 应用。

【参考方案2】：

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

【讨论】：

这看起来非常流畅，并且还考虑了持续时间。很不错。我发现使用 jQuery 动画很难实现这一点，因为字体大小的最小增加必须在字体大小视觉变化之前发生。

这非常顺利 - 为我试图复制的原生 iOS 应用程序提供了一个赚钱的机会！当它放大时，您可以在文本边缘看到一些锯齿。是否可以从较大区域的缩小版本开始，以使这种混叠不明显？

我应该指出，我只是在 iPad 上通过 iOS 和 Chrome 在 android 平板电脑上真正针对 WebKit。当然，这在一般意义上也很有趣。

我能够摆脱 doubling the default font size, and halving the default scale 的别名。这看起来非常接近我的需要 - 我明天会重新访问。

我将您的代码稍微修改为get the effect I wanted。它现在在 Chrome 上又可爱又流畅，明天我会在 iOS 上测试它。非常感谢您指出这条途径！

【参考方案3】：

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

【讨论】：

我能够通过 jQuery 动画获得流畅的真实值流，但问题似乎在于文本的渲染。简单地将这些数字应用到 text-size 属性并不能解决问题。

【参考方案4】：

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