1

Windows 8の読み込みアニメーションに基づいて、単純な小さなスピナーウィジェットを作成しましたが、各ドットがわずかにジッターしているように見える理由を理解できませんでした。値を正規化するためにさまざまなことを試しましたが、それを滑らかにするものは見つかりませんでした。

http://jsbin.com/ilafov/16

私は何が間違っているのですか？

4

2 に答える 2

0

念のためスクリーンショットを撮りました。あなたのアニメーションは、サブピクセル アニメーションを実行していないようです。

アニメーションを本当に滑らかにするには、ピクセルを 1 ピクセルずつ移動するために、ある場所から別の場所に移動するだけでなく、平均で移動することを想像します。ピクセルはゆっくりとある空間から次の空間に移動します。他のピクセルがフェードインするにつれて、ピクセルが徐々にフェードアウトすることで、これをシミュレートできます。

あなたのアニメーションをスクリーンショットすると、サブピクセルアニメーションの兆候のないすべてのドットが表示されます.

私のビジネス ページ ( http://matthewrconsultancy.co.uk/start ) を見ると、Chrome などを使用すると歯車が動いていることがわかります。SVG と SMIL のアニメーションを使用していますが、拡大して見るとサブピクセル レベルでアニメーションが発生していることがわかります。申し訳ありませんが、まだ修正方法を理解する時間がありませんが、何が問題なのかという主な質問に直接答えることができます.

于 2012-12-07T22:33:49.577 に答える
0

いくつかのオプション:

1) canvas を使用して円をアニメーション化してみてください。初期化中に、1 つの円をオフスクリーン キャンバスに描画し、その imageData を (getImageData を使用して) 簡単にアクセスできる変数に保存できます。アニメーションの各フレームで、メインのアニメーション キャンバス上のそれぞれの座標にある数の円に対して putImageData を使用します。新しいフレームごとにクリアすることを忘れないでください。

2) 円を解像度に依存しない画像 (SVG、CSS スタイル、またはユーザーの画面 DPI とブラウザー独自のピクセル表示に基づいてコンテキストを更新する API を使用した Canvas) として保存します。次に、transform: translate3d(x, y, z) を使用して円を移動してみます。これにより、よりスムーズな結果が得られる可能性がありますが、この変換によって有効になるハードウェア アクセラレーションにより、ブラウザーが特定の要素でサブピクセル アンチエイリアシングを使用できなくなると聞いています。また、変換プロパティはベンダー プレフィックスを使用することにも注意してください。

お役に立てれば！

于 2013-01-10T21:28:04.643 に答える