0

Flexを使用して（ブラウザで実行するために）300ピクセル連続して画面上を水平に移動する画像の非常に単純なアニメーションを作成しようとしています。アニメーションが非常に途切れ途切れになっていることがわかりました。アニメーションを実行するたびに結果が異なります。途切れ途切れが発生する前に、アニメーションが数秒間正常に再生される場合もあれば、すぐに発生する場合もあります。これは、Internet Explorer および Firefox の複数の Windows 7 マシンでテストされました。

私はいくつかの異なるアプローチを試しましたが、途切れ/ジッターを止めるものはないようです。

アプローチ 1: s:move を使用する

<fx:Declarations>
<s:Power id="_powerEasing" exponent="1" />
<s:Move id="_moveRight" target="{_sword}" xFrom="{_swordMin}" xTo="{_swordMax}"
                duration="1000"
                easer="{powerEasing}" />
</fx:Declarations>

<s:BitmapImage id="_sword" visible="true" scaleX=".99" scaleY=".99"
    source="@Embed('/assets/images/combat2/attackbar/sword.png')" x="0" y="0" />

_moveRight.play(); を使用して呼び出されます。

私が試した 2 番目のアプローチは、入力フレームごとに画像オブジェクトを移動することでした。イメージの新しい x 位置は、時間の差を取り、速度を掛けることによって計算されます。次のようになります。

var now:Number = getTimer();
var toMove:Number = ((now - _lastTime) / 1000) * _speed;
_sword.x += toMove;
_lastTime = now;

試みられた 3 番目の最後のアプローチは、これを Flash でムービー クリップとして作成することでした。これもガタガタでした。

最良の結果はアプローチ 1 でした。

私は s:BitmapImage、mx:Image、および FlexSprite を使用して実験しましたが、これをスムーズにするために欠けているものがあるに違いないと考え始めています。

このアニメーションに役立つ、私が見逃しているアイデアやベスト プラクティスはありますか?

編集:すべての提案に感謝しますが、何も機能していません。

簡単な例を次に示します。実装を確認できるように、ソースの表示を有効にしました。http://legionofderp.com/sword-demo/SwordTestDemo.swf

最初は数秒間スムーズに実行されるかもしれませんが、その後アニメーションが非常に不安定になり始めます

編集 2:これは別の例です。これは Flash を使用して作成されました。 http://legionofderp.com/testing-sword-03.swf

回答 皆様、ご提案いただきありがとうございます。HTML テンプレートの wmode パラメータを direct に設定することで、アニメーションをスムーズに実行することができました。

4

2 に答える 2

0

ジッターするとき、アニメーションの動きは本当に遅いですか (反復ごとに <1px の動き)? その場合は、ビットマップの pixelSnapping プロパティを強制的に NEVER に設定してみてください。

また、CPU または GPU アクセラレーションの切り替えを試しましたか? もしそうなら、同じ結果ですか?

スタンドアロンの Flash Player で実行しても同じ結果になりますか?

編集：ピクセルスナップをオーバーライドするスケーリングプロパティを追加したことに気付きました。

于 2012-05-06T16:38:56.893 に答える
0

タイマー (getTimer または setInterval) ではなく、Enterframe イベントを使用してみてください。私の経験では、タイマーは CPU を集中的に使用するため、アニメーションにも影響を与えることに気付きました。enterFrame イベントはよりスムーズに実行できます。それを試してみてください。

addEventListener(Event.ENTER_FRAME , move ) 

function move ( e:Event)
{

  // your animation code here
}
于 2012-05-06T13:22:15.430 に答える