使用Flex時非常波濤洶涌的動畫

我正在嘗試使用Flex（在瀏覽器中運行）連續地在屏幕上水平移動300個像素來創建一個非常簡單的動畫。我發現動畫非常不連貫。每次運行動畫時，結果都不一樣。有時動畫會在發生猝倒之前幾秒鐘播放，有時會立即發生。這已在Internet Explorer和Firefox中的多臺Windows 7計算機上進行了測試。使用Flex時非常波濤洶涌的動畫

我已經嘗試了幾種不同的方法，而且似乎沒有任何方法可以阻止猝倒/抖動。

方法1：使用S：移動

<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（）調用;

我嘗試的第二種方法是在每個輸入框架上移動圖像對象。 Image的新x位置是通過計算時間差和乘以速度來計算的。看起來像這樣：

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

第三個，也是最後一個嘗試的方法是將其創建爲Flash中的影片剪輯。這也是波濤洶涌。

最好的結果是接近1

我與S試驗：BitmapImage的，MX：圖片以及使用FlexSprite但我開始想一定有我丟失的東西，使這個平穩。

任何想法或最佳實踐我錯過了這將有助於這個動畫？

編輯：感謝所有的建議，但沒有任何工作。

這是一個簡單的例子。我已經啓用了視圖源，所以你可以看到實現。 http://legionofderp.com/sword-demo/SwordTestDemo.swf

可能流暢運行在第幾秒鐘，但隨後在動畫開始運行得波濤洶涌

編輯2：這裏是另外一個例子，這是一個用Flash創建的。 http://legionofderp.com/testing-sword-03.swf

答案感謝所有人的建議。我可以通過設置html模板中的wmode參數來使動畫順利運行。

來源

2012-05-06 Kat Y

我很想看到這個運行......這聽起來像是別的東西正在發生;沒有理由簡單的移動過渡在桌面上不會平滑。我可能會建議尋找GreenSock的補間庫。（我在這裏做了演示：https://www.flextras.com/blog/index.cfm/2011/11/15/TweenLite--10142011--- Episode-118--Flextras-Friday-Lunch）如果你正在構建一個你可能想要調查Blitting概念的遊戲。 – JeffryHouser

kb for sword.png的大小是多少？ –

大小是2.59kb –

嘗試使用比定時器（getTimer或setInterval）更大的Enterframe事件。根據我的經驗，我注意到定時器是CPU密集型的，因此也會影響動畫。而enterFrame事件運行更平滑。嘗試一下。

addEventListener(Event.ENTER_FRAME , move) 

function move (e:Event) 
{ 

    // your animation code here 
}

來源

2012-05-06 13:22:15

我已經嘗試了輸入框架和基於計時器的動畫。 –

和位圖緩存怎麼樣？ –

當它抖動是動畫運動真的很慢（< 1px移動每次迭代）？如果是這樣，你可能想嘗試強制位圖上的pixelSnapping屬性爲NEVER。

另外，你有沒有嘗試過切換CPU或GPU加速 - 如果是這樣，相同的結果？

在獨立Flash播放器中運行效果是否相同？

編輯：只是注意到你添加了縮放屬性，它應該覆蓋像素捕捉。

來源

2012-05-06 16:38:56

使用Flex時非常波濤洶涌的動畫

回答

相關問題