4

ゆっくりと微妙な方法でテキストをアニメーション化したいと思います。jQueryアニメーションは整数値で動作するため、たとえば10pxを超えるサイズを2秒間でアニメーション化する場合は、5FPSで一連の小さなステップがぎくしゃくしているように見えます。

これが私が話していることを示すjsFiddleです。

位置のアニメーション化について同様の質問を見つけましたが、 top// leftetcプロパティは不可欠であるため、受け入れられた回答はそれが不可能であると述べています。ただし、jQueryが実数を吐き出す場合は、実数としてアニメーション化font-size できます。

また、そのような一連のアニメーションをつなぎ合わせたいと思います。

何か案は？

4

4 に答える 4

2

視覚的に認識できる最小点の値をもう一度見てみました。ptの変化に気付いた最小単位はでした0.2pt。

ただし、whileループの増分ごとに1ミリ秒の期間にわたって0.2ポイントのステップで変更を適用すると、まだ少し「遅れている」ように見えることに気付きました。ただし、jsfiddleで実行されていない場合はそうではない可能性があります。

重要なのは、フォントサイズを10ポイントスムーズに変更したい場合は、一度に0.2ptまたは0.25ptまたは0.5pt（最もスムーズに見つけたもの）のステップで変更を適用する必要があり、その後、スムーズを維持するために1の間隔を使用する必要があるということです。別の間隔を適用しないでください。適用すると、増分ステップが小さすぎて気付かず、アニメーション全体が再び途切れてしまいます。

この変更を2秒以上強制しようとすると10pt、使用するフレームワークに関係なく、小数点以下のフォントサイズに視覚的な変更がないため、常に途切れ途切れに見えると思います。

これは私にとって非常にうまくいきました:(
この例ではフォントサイズのアニメーションの減少を考慮していませんが、コース外で追加することができます）

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-滑らかな（っぽい）フォントサイズのアニメーション

滑らかに見えるようにするには、increments値を0.25またはに増やします0.5。スムーズなステップがある場合は、ポイントを他の値に設定でき、2秒のアニメーション間隔を強制しない限り、アニメーションはスムーズに保たれます。

于 2012-09-06T18:18:40.603 に答える
0

現在のところ、フォントのサブピクセル レンダリングをサポートしているのは Firefox だけなので、他のブラウザーのアニメーションは常にピクセルにスナップします。

于 2012-09-06T18:31:18.997 に答える
0

jQuery アニメーションはひどいものです。requestAnimationFrame 手法またはより優れたタイミング メカニズムを利用する別のトゥイーン ソリューションを調べてください。tween.jsのような tween lib を試してみてください。Romeのデモを見てください。

于 2012-09-06T17:33:34.377 に答える