Flex 4.5.1當使用MOUSE_MOVE事件觸發動畫的TileGroup在一個畫布內時動畫不規則動畫

Question

基本上我試圖做的是有一個TileGroup組件的horizo​​ntalCenter和verticalCenter屬性與鼠標動作相反地修改，並使用一個spark移動效果使該動作平穩。 TileGroup是一個mx：Canvas的子集，它被設置爲100％寬和100％高。他們在TileGroup中大約有20個左右的BorderContainer。

有關它應該如何工作的一個例子，看看http://gallery.artofgregmartin.com/

我的移動版就是這樣一個，但它不是幾乎一樣光滑。縱觀CPU使用情況的礦井和他差不多的（當運動持續80-90％）使用，但我們在GPU的使用有所不同。我的礦工只用了大約4％，而他的礦工接近10％。

這裏是我的移動代碼：

private function onMouseMove(event:MouseEvent):void{ 
    var stageCenterX:Number = this.stage.stageWidth/2; 
    var stageCenterY:Number = this.stage.stageHeight/2; 
    var sliderPanelCenterX:Number = sliderPanel.width/2; 
    var sliderPanelCenterY:Number = sliderPanel.height/2; 
    var mouseX:Number = event.stageX; 
    var mouseY:Number = event.stageY; 
    var offsetX:Number = 0; 
    var offsetY:Number = 0; 
    var padding:Number = 400; 

    var multX:Number = (stageCenterX - mouseX)/stageCenterX; 
    offsetX = (multX * sliderPanelCenterX); 

    if(mouseX <= stageCenterX){ 
     offsetX = offsetX - Math.abs(multX * stageCenterX) + Math.abs(multX * padding); 
    } 
    else { 
     offsetX = offsetX + Math.abs(multX * stageCenterX) - Math.abs(multX * padding); 
    } 

    var multY:Number = (stageCenterY - mouseY)/stageCenterY; 
    offsetY = (multY * sliderPanelCenterY); 

    if(mouseY <= stageCenterY){ 
     offsetY = offsetY - Math.abs(multY * stageCenterY) + Math.abs(multY * padding); 
    } 
    else { 
     offsetY = offsetY + Math.abs(multY * stageCenterY) - Math.abs(multY * padding); 
    } 

    panelHC = Math.round(offsetX); 
    panelVC = Math.round(offsetY); 

    movePanel.captureStartValues(); 
    sliderPanel.verticalCenter = panelVC; //sliderPanel is the id for the TileGroup 
    sliderPanel.horizontalCenter = panelHC; 
    movePanel.play(); 
} 

這裏是虔誠的MXML代碼：

<fx:Declarations> 
    <s:Move id="movePanel" target="{sliderPanel}" /> 
</fx:Declarations> 
<mx:Canvas width="100%" height="100%" backgroundColor="#111111" 
    horizontalScrollPolicy="off" 
    verticalScrollPolicy="off"> 
    <s:TileGroup id="sliderPanel" horizontalGap="2" verticalGap="2" width="2010" 
     horizontalCenter="0" verticalCenter="0" z="1" /> 
</mx:Canvas> 

Answer 1

那麼它似乎是內置的動畫程序不完全優化。我將TweenMax（http://www.greensock.com/tweenmax/）的所有補間方法都切換出來，並遵循了該網站上的一些優化提示，並且現在可以像黃油一樣順暢運行。

感謝您的所有幫助！

-Nigel

TweenMax方法：

Replaced 

movePanel.captureStartValues(); 
movePanel.easer = powerEasing; 
sliderPanel.verticalCenter = panelVC; 
sliderPanel.horizontalCenter = panelHC; 
movePanel.stop(); 
movePanel.play(); 

With 

TweenMax.to(sliderPanel,2.5, 
    {verticalCenter:panelVC,horizontalCenter:panelHC, ease:Back.easeOut}); 

Answer 2

這種情況可能發生：

閃光燈默認的幀更新屏幕邊框 - 在框架之後。鼠標事件可以每幀調度多次。屏幕更新只使用最後分派的鼠標事件的值。

你能說服屏幕通過調用事件的updateAfterEvent()方法立即更新。如果你這樣做，Flash會在你的框架中增加一個額外的屏幕更新。

您可以通過聽RENDER事件的任何顯示對象的跟蹤屏幕更新。這是一個顯示updateAfterEvent正在運行的測試課程。有兩個盒子可以用鼠標懸停。左邊的方框使用updateAfterEvent()。正確的方框更新爲常規屏幕更新。你會看到左邊的框被立即更新。相反，在框架結束後更新右邊的框。由於幀速率爲.5，這可能需要2秒。也嘗試在兩個框內移動鼠標。左邊的框會立即更新，右邊的框只能逐幀更新。

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.utils.getTimer; 

    public class UpdateAfterEvent2 extends Sprite { 
     public var box1 : Sprite; 
     public var box2 : Sprite; 

     public function UpdateAfterEvent2() { 
      stage.frameRate = .5; 

      box1 = new Sprite(); 
      box1.name = "box1"; 
      box1.x = 10; 
      box1.y = 10; 
      colorize(box1, 0xFF0000); 
      box1.addEventListener(MouseEvent.MOUSE_OVER, mouseOver); 
      box1.addEventListener(MouseEvent.MOUSE_OUT, mouseOut); 
      box1.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove); 
      addChild(box1); 

      box2 = new Sprite(); 
      box2.name = "box2"; 
      box2.x = 70; 
      box2.y = 10; 
      colorize(box2, 0xFF0000); 
      box2.addEventListener(MouseEvent.MOUSE_OVER, mouseOver); 
      box2.addEventListener(MouseEvent.MOUSE_OUT, mouseOut); 
      box2.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove); 
      addChild(box2); 

      addEventListener(Event.ENTER_FRAME, enterFrame); 
      addEventListener(Event.EXIT_FRAME, exitFrame); 
      addEventListener(Event.RENDER, render); 
     } 

     private function enterFrame(event : Event) : void { 
      trace ("----------------enterFrame", getTimer()); 
     } 

     private function exitFrame(event : Event) : void { 
      trace ("----------------exitFrame", getTimer()); 
     } 

     private function mouseMove(event : MouseEvent) : void { 
      var box : Sprite = event.currentTarget as Sprite; 
      trace ("move", box.name, getTimer()); 
      if (box == box1) { 
       trace ("--------UPDATE_AFTER_EVENT"); 
       event.updateAfterEvent(); 
      } 

      box.alpha = box.alpha == 1 ? .5 : 1; 

      stage.invalidate(); 
     } 

     private function mouseOut(event : MouseEvent) : void { 
      var box : Sprite = event.currentTarget as Sprite; 
      trace ("out", box.name, getTimer()); 
      if (box == box1) { 
       trace ("--------UPDATE_AFTER_EVENT"); 
       event.updateAfterEvent(); 
      } 
      colorize(box, 0xFF0000); 

      stage.invalidate(); 
     } 

     private function mouseOver(event : MouseEvent) : void { 
      var box : Sprite = event.currentTarget as Sprite; 
      trace ("over", box.name, getTimer()); 
      if (box == box1) { 
       trace ("--------UPDATE_AFTER_EVENT"); 
       event.updateAfterEvent(); 
      } 
      colorize(box, 0x0000FF); 

      stage.invalidate(); 
     } 

     private function render(event : Event) : void { 
      trace ("--------RENDER", getTimer()); 
     } 

     private function colorize(box : Sprite, color : uint) : void { 
      with (box.graphics) { 
       clear(); 
       beginFill(color); 
       drawRect(0, 0, 50, 50); 
      } 
     } 
    } 
} 

Answer 3

難道您的效果可能不適用？

在事件處理程序中，您直接將verticalCenter和horizontalCenter屬性設置爲面板。從我所瞭解的情況來看，專家組在這裏沒有被修改，而是被設置爲新的職位。

我敢打賭，註釋掉：

// movePanel.captureStartValues(); 
sliderPanel.verticalCenter = panelVC; //sliderPanel is the id for the TileGroup 
sliderPanel.horizontalCenter = panelHC; 
// movePanel.play(); 

將不得不動畫沒有影響。

有設置爲您movePanel沒有吐溫值。你應該這樣做：

movePanel.xBy = ... 
movePanel.xTo = ... 
movePanel.yBy = ... 
movePanel.yTo = ... 
... 

文檔：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/effects/Move.html