Glatte Gleitanimation in Flex mit großen Mengen an Komponenten

Question

Ich habe eine Komponente erstellt, die wie ein Viewstack funktioniert, aber die nächste Indexkomponente wird von einer der vier Seiten eingefügt. Ich habe es gut genug funktioniert, dass es akzeptabel ist, aber ich möchte es effizienter machen.

Momentan verwende ich ein Canvas als Basiskomponente, ich erstelle einen Snapshot der aktuellen Ansicht mit einem ImageSnapshot (new Bitmap(ImageSnapshot.captureBitmapData(this))), und ich schiebe den neuen Index über das Bild bei Indexänderung.

Ich bin im Grunde auf der Suche nach Vorschlägen, wie man das besser macht. Wenn ich das Image nach dem Laden der Komponente und nach der Folie nehme, habe ich die anfänglich abgestumpften Bewegungen auf ein Minimum reduziert, aber normalerweise verwenden wir dies für den Übergang von Rastern, so dass es fast immer langsam auf den ersten oder ersten paar Dias ist.

Hier ist, was einige davon wie bisher aussieht:

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)); 
} 

Wenn Sie sich fragen, ich bin für die Bild Index 0 der Leinwand verwenden, und meine benutzerdefinierten selectedIndex Offset um 1

Ich poste mehr davon, wenn es sein muss, aber ich möchte die Frage auf ein Minimum beschränken und das fasst es ziemlich zusammen.

Jede Hilfe wird sehr geschätzt! Ich möchte wirklich, dass diese Komponente besser funktioniert. Dies muss auch mit Flex 3

Answer 1

Was sind mv1 und mv2? Sind sie Flex-Effekte? Wenn sie notorisch langsam sind, empfehle ich die Verwendung TweenLite. Wenn Sie sie unbedingt verwenden müssen, setzen Sie suspendBackgroundProcessing = true auf ihnen. Zu guter Letzt stellen Sie sicher, dass Sie kein Layout für sie haben. Wenn Sie dies tun, verursachen Sie ein neues Layout für jeden Frame, was die Animation beeinträchtigen kann.

Answer 2

durchgeführt werden. Sie erhalten wahrscheinlich einige Speicherzugriffe von allen Komponenten, die erstellt werden, und werden dann sofort in ein Bild konvertiert. Ich würde definitiv versuchen, etwas Intelligenz zur Erzeugungszeit hinzuzufügen. Versuchen Sie, die Speichernutzung und Test gegen maximale mem Last überprüfen, bevor das Bild zu erstellen:

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

Allerdings müsste ich schauen, was in dem Objekt erstellt wird. Ich vermute, dass Sie einige ziemlich schwere Objekte in jeder der Ansichten laden. Und wenn Sie für jedes Objekt Daten vom Server laden, wird es möglicherweise eine Verzögerung geben.

Richten Sie eine Prioritätswarteschlange zum Erstellen von Objekten innerhalb der Klasse ein, die erstellt wird. . . Wenn Sie beispielsweise über ein Menüsystem verfügen, das standardmäßig ausgeblendet ist, laden Sie das Front-End, und laden Sie das Menü-Dropdown nur dann, wenn ein Benutzer darauf klickt oder nachdem alle anderen sofort sichtbaren Objekte erstellt wurden. Sie haben auch den Vorteil, dass Sie einen Schnappschuss machen können, wenn alle sofort sichtbaren Objekte vorhanden sind und bevor die ausgeblendeten Objekte erstellt werden.

Schließlich, Event-Listener nach der Erstellung von Objekten hinzufügen, wenn Sie können, und vergessen Sie nicht, Listener so schnell wie möglich zu entfernen.

Answer 3

Verwenden Sie Flex 3 oder Flex 4?

Da, wenn Sie Flex 4 verwenden, würde ich empfehlen, Animate Filter mit Shader-Filter zu verwenden. Shader-Filter verwenden Pixel Bender, sodass Sie in Pixel Bender einen Shader erstellen können, der den Übergang zwischen Ihren beiden Bildern ermöglicht.

Sehen Sie diese 2 Videos für weitere Informationen:

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

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

Answer 4

Es wäre hilfreich, um zu sehen, wie Sie Ihre Move Effekte erstellen, mv1 und mv2. Es ist möglich, Kombinationen der Attribute *From, *To und/oder *By - oder verschiedene Manipulationen der Eigenschaften, die die Geschwindigkeit/Dauer des Tweens steuern - festzulegen, die zusammen "Jitter" oder "Ruckeln" in der resultierenden Animation verursachen können.

natürlich ist es auch möglich, dass Sie gegen eine Leistungsbarriere irgendeiner Art schlagen, aber ich vermute, dass es etwas heimtückischer ist. Die einfache Übersetzung ("x/y sliding") eines beliebigen Clips sollte relativ gut funktionieren, solange der Clip nicht gedreht, verzerrt oder skaliert wurde. und solange der Prozessor nicht vollständig mit einer anderen Operation ausgereizt ist, die gleichzeitig läuft.

In den meisten Fällen möchten Sie beim Definieren eines -Effekts so wenig Informationen wie möglich festlegen und Flex die optimalen Werte für die anderen Dinge berechnen lassen. Normalerweise bedeutet dies nur xTo und yTo einzustellen.

Achten Sie außerdem darauf, dass Sie in Ihren Tweens end() anrufen, bevor Sie mit dem Einrichten der neuen Werte beginnen (nur für den Fall, dass eine vorherige Sequenz noch läuft).

Schließlich - stellen Sie sicher, dass Sie während des Tweens nicht mit dem Layout-Manager der Komponente konkurrieren. Während das Tween läuft, sollten Sie das Layout komplett deaktivieren (durch setting autoLayout=false on your container component) - oder Sie können das Layout (vorübergehend) in ein absolutes Layout ändern. So oder so muss das Tween erlaubt sein, Dinge zu bewegen, während es läuft, und das Verschieben von Sachen darf nicht bewirken, dass der Layout-Manager Dinge neu berechnen, bis nach es alles vorbei ist. Sobald es fertig ist, können Sie den ursprünglichen Layout-Manager wieder aktivieren.