用Flex在大量組件中平滑滑動動畫

我有一個創建的組件，它的工作方式類似於Viewstack，但下一個索引組件從四個邊中的一個滑入。我的工作效果很好，可以使用，但我想讓它更有效率。用Flex在大量組件中平滑滑動動畫

現在，我使用Canvas作爲基礎組件，使用ImageSnapshot（new Bitmap(ImageSnapshot.captureBitmapData(this))）創建當前視圖的快照，並在索引更改時將新索引放在該圖像的頂部。

我基本上尋找如何做到這一點的更好方法的建議。通過在組件加載之後拍攝圖像，並在幻燈片發生後，我已經將初始毛刺移動降至最低，但我們通常將此用於轉換網格，因此在第一張或第一張幻燈片上它幾乎總是很慢。

下面是一些它看起來像迄今：

private function creationComplete(e:Event):void 
{ 
    tmpImage.source = new Bitmap(ImageSnapshot.captureBitmapData(this)); 
} 

public function set selectedIndex(value:int):void 
{ 
    if(_selectedIndex == value + 1) 
    return; 
    _selectedIndex = value+1; 

    var obj:UIComponent; 

    tmpImage.height = height; 
    tmpImage.width = width; 
    tmpImage.visible = true; 
    tmpImage.x = 0; 
    //tmpImage.includeInLayout = true; 

    for (var i:int = 1; i < numChildren; i++) 
    { 
    obj = UIComponent(getChildAt(i)); 
    //obj.x = width; 
    if(i == _selectedIndex){ 
     obj.visible = true; 
     objDisplay = obj; 
    } 
    else 
     obj.visible = false; 
    } 

    mv1.target = tmpImage; 
    mv2.target = objDisplay; 

    switch (direction) 
    { 
    // X/Y sliding logic 
    } 
    parEfect.play(); 

    tmpImage.source = new Bitmap(ImageSnapshot.captureBitmapData(this)); 
}

如果你用1

琢磨，我使用的畫布圖像索引0，且偏移我的自定義的selectedIndex

如果需要，我會發布更多，但我希望將問題保持在最低限度，這幾乎總結了它。

任何幫助，非常感謝！我真的想讓這個組件更好地運行。此外，這必須使用Flex 3完成

來源

2010-11-19 wajiw

爲什麼試圖重新發明輪子？你可以擴展viewstack（其中你的selectedIndex是一個準確的值），並簡單地讓你的mv1和mv2成爲你的showEffect和hideEffect。下面是一個示例（在Flex4中），它爲Moves添加了緩動功能：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf5fdc3-7fe2.html – 2010-11-22 22:26:18

這個人有一個關於使用ImageSnapshot的Swipe效果的教程，也許它可以有一些幫助：http://insideria.com/2009/12/flex-101-creating-an-swipeslid.html – Ryan 2010-11-23 09:57:09

@jeremy我真的不想重新發明輪子，我只需要知道什麼最好。當我從我的vaca回來時，我會檢查放鬆。發佈它作爲答案，如果你想我的觀點:-) @bishop我也會檢查出來，謝謝你的建議 – wajiw 2010-11-23 23:28:21

什麼是mv1和mv2？他們是Flex效果嗎？如果是這樣，他們是慢得出名的，我推薦使用。如果你絕對需要使用它們，請在其上設置suspendBackgroundProcessing = true。最後但並非最不重要的一點是，確保你沒有設置佈局。如果你這樣做，你正在導致重新佈局每一幀，可以輕鬆地停止動畫。

來源

2010-11-26 17:17:52 Greg

您可能正在從所有正在創建的組件獲取一些內存命中，然後立即轉換爲圖像。我一定會在創作時嘗試添加一些情報。嘗試創建映像前，檢查內存使用和測試針對最大負荷MEM：

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/system/System.html

不過，我需要看的對象被創建的內容。我懷疑你是在每個視圖中加載一些很重的對象。如果您要從服務器爲每個對象加載數據，可能會有滯後。

在正在創建的類中設置用於創建對象的優先級隊列。。。例如，如果您有默認隱藏的菜單系統，請加載前端，然後僅在用戶單擊該菜單時或者在創建了所有其他立即可見對象後加載菜單下拉菜單。當所有立即可見的對象就位時，以及在創建隱藏對象之前，您還可以獲得快照的優勢。

最後，在創建對象後添加事件偵聽器（如果可以的話），並記得儘快刪除偵聽器。

來源

2010-11-22 19:47:55 iND

感謝您的建議，我會在嘗試執行新的實施後再回來查看。 – wajiw 2010-11-23 23:30:24

您是否使用Flex 3或Flex 4？

因爲如果您使用Flex 4，我會建議使用帶有着色器濾鏡的Animate濾鏡。着色器過濾器使用Pixel Bender，因此您可以在Pixel Bender中構建着色器，該着色器將執行2張圖像之間的過渡。

看到這些2個視頻的詳細信息：

http://tv.adobe.com/watch/codedependent/pixel-bender-shaders-and-flex-4/

http://tv.adobe.com/watch/codedependent/shader-transitions-in-flex-4

來源

2010-11-28 11:46:01

仍然在我們項目的Flex 3上... – wajiw 2010-11-28 15:48:25

這將有助於瞭解您創建Move效果，mv1和mv2。可以設置組合的*From,*To和/或*By屬性 - 或控制補間動畫速度/持續時間的屬性的各種操作 - 一起會導致所產生動畫中的「抖動」或「急動」。

當然，你也可能會遇到某種性能障礙，但我懷疑它更隱蔽。只要剪輯沒有旋轉，傾斜或縮放，任何剪輯的簡單翻譯（「x/y滑動」）應該表現相對較好;並且只要處理器沒有完全用其他一些正在同時進行的操作完成。

在大多數情況下，當定義Move效果時，您希望設置儘可能少的信息，並讓Flex爲其他事物計算最佳值。通常，這意味着只設置xTo和yTo。

此外，在開始設置新值之前，請確保在您的補間上調用end()（以防萬一以前的任何序列仍在運行）。

最後 - 確保您沒有在補間期間與組件的佈局管理器競爭。當補間運行時，您應該完全禁用佈局（通過setting autoLayout=false on your container component） - 或您可以將佈局（暫時）更改爲絕對佈局。無論哪種方式，補間必須允許運行時，東西不得導致佈局管理器重新計算，直到後它的全部結束。一旦完成，您可以重新啓用您最初的任何佈局管理器。

來源

2010-11-28 23:06:52 Lee

用Flex在大量組件中平滑滑動動畫

回答

相關問題