0

RaphaelJS でテキストをアニメーション化しようとしていますが、途切れ途切れのアニメーション (「ジャダー」?) が発生します。これに関する他の問題を調べてみましたが、これまでのところ、jQuery 固有または非 SVG のトピックしか見つけることができませんでした。同様の質問を見落としていたら教えてください！

基本的に、テキスト要素を rect 要素で視覚的にラップし、アニメーションを介して同時に翻訳しようとしています。「g」要素については知っていますが、古いバージョンの Internet Explorer ではサポートされていないため、使用したくありません。代わりに、テキストと四角形に個別の Raphael アニメーションを使用しています。

var raphRect = paper.rect(
    (paperWidth/2)-rectWidth/2
    ,paperHeight-rectHeight
    ,rectWidth
    ,rectHeight            
    ,rectHeight/2
)
...
,raphText1 = paper.text(
    paperWidth/2
    ,paperHeight-(2*fontSize)
    ,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');

ジャダーは、テキスト要素の各アニメーション フレームのピクセルを丸めることが原因であると想定しています。このジャダーを軽減または防止する方法はありますか? （アニメーション時間を短縮することはオプションではありません...そして、それが役立つようにも見えません。）

(ここでやろうとしていることの例があります。揺れを強調するために、四角形に 2 行のテキストと太字のストロークを含めました。)

4

2 に答える 2

2

私は同じ問題を抱えていて、それを解決するためにさまざまな方法を試しました。私のために働くいくつかのハックを見つけました。しかし、彼らは皆同じ​​考えを持っています: テキストはあまりまっすぐにしないでください。

"transform" : "R 0.01"

たとえば、テキストを小さな角度で回転させます。結果は次のとおりです: jsfiddle。お使いのブラウザで動作することを保証することはできません。安定版の Chrome 36 では問題なく動作しますが、ベータ版またはカナリア版ではさらに悪化します。

また、 no sostraigth font jsfiddleを試すこともできます。FFによく効きます。

"font-family" : "Comic Sans MS"

試してみるのが悪い他のこと：

  • フォントサイズの拡大

  • 太字の使用

  • テキストパスを使用する

于 2014-10-08T10:34:12.437 に答える
0

このアイデアは実際には、Robert Longson のテキスト レンダリング プロパティに関する情報から借用したものです。Raphael がこの機能への直接アクセスを提供していないことは事実ですが、dom ノードへのリンクは提供しています。したがって、このスタイルを自分で適用するのは 2 番目のステップにすぎず、実際に Firefox でより良い結果が得られます。少なくとも。

jquery の使用:

$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );

ここで上演。

于 2012-11-01T03:12:27.837 に答える