6

これまでのところ、流暢ではないようですが、途切れ途切れです。たとえば、font-size: 14 の状態属性が 1 つあり、font-size: 16 の状態にアニメーション化する場合、トランジションは滑らかに見えません。

2段ジャンプです。最初に 15 に変更し、次に 16px に変更します。

よりスムーズに見えるようにすることはできますか?

テストにはFirefox 14を使用しています。

私の現在のコード:

    var fillerText = {
        "fill" : "#00738f",
        "font-size": 14,
        "font-family": "Arial, Helvetica, sans-serif"
        }
    var fillerTextHover = {
        "fill" : "#00738f",
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif",
        "cursor": "pointer"
        }

text.hover(function () {
       text.animate(fillerTextHover, 500);
               },
  function () {
       text.animate(fillerText, 500);
          }
);
4

4 に答える 4

10

これは既知の問題であり、Raphael とは関係ありませんが、サブピクセル レンダリングとは関係ありません。

GPU を利用したサブピクセル ポジショニングをサポートしていないブラウザーで表示すると、テキストは CPU を使用して作成する必要があり、各文字の位置は最も近い整数ピクセルに丸められるため、ジャンプして表示されます。

新しいCSS 3 アニメーションでは可能ですが、アニメーションが終了してから再描画されるまでフォントを拡大しているだけであることがわかります。

解決策がなくて申し訳ありませんが、CSS を使用したスムーズなクロスブラウザー フォント サイズのアニメーションは今まで見たことがありません。

しかし、この効果を少し隠すためにできることは、アニメーションの間隔時間を短縮し、フォント サイズのギャップを広げることです。その後、ステップはより速い時間枠で表示され、単一のステップは見えなくなります。

このフィドルを参照してください

于 2012-07-29T14:01:29.523 に答える
2

font-size を使用してテキスト要素を変更する解決策はわかりませんが、おそらくそのアプローチはとらないでしょう。代わりに、問題のテキストに対応するcufón化されたパスを使用し、手動でスケーリングします. これは、少なくとも Firefox では、テキスト要素を手動でスケーリングするよりも著しくスムーズであることに注意してください。

  1. Cufónにアクセスして、好みのフォントを同等のベクター形式に変換し、カスタマイズ オプションとして Raphael.registerFont を選択します。

  2. paper.printの代わりに使用してテキストを生成しますpaper.text。これは、テキスト要素ではなくパス要素を返します。

  3. font-size の代わりに変換を使用して、結果のパス要素をズームします。paper.print引数として font-size を受け入れるため、ターゲットの font-size に対応する目的のスケールを簡単に計算できます。

これがどのように機能するかを示す大まかなデモンストレーションです (簡単にホバリングできるようにテキストを裏に置きました)。多数の不備があることをご容赦いただければ幸いです。少し急いで製作しました。

于 2012-07-31T23:55:26.770 に答える
0

次のように、パスを拡大する方が簡単でスムーズになると思います。

text.hover(function() {
    text.animate({transform: "s1.5 1.5 "}, 400);
}, function() {
    text.animate({transform: "s1.0 1.0 "}, 400);
});

詳細については、 http://jsfiddle.net/SeeG2/40/を参照してください。

于 2012-07-29T14:28:44.270 に答える
0

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.htmlをチェックしてください

デモを見て、要素をスケーリングするプラグインをダウンロードできます。注意点として、ターゲットのフォント サイズを明示的に選択することはできませんが、少し計算するだけで、ターゲット サイズをスケーリングする数値に変換する小さなプラグインを作成できます。

別のデモを見たい場合は、私の個人的なホームページのウェルカム ページでこのプラグインを使用します。

幸運を！:)

于 2012-07-29T16:00:06.797 に答える