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