圍繞其中心旋轉X正方形

Question

我在一個Sprite中有3個正方形（50 px x 50 px），彼此相鄰。每個樞軸的位置爲0,0。 第一個方形X，Y：0,0 第二個方形X，Y：50,0 第三個方形X，Y：100,0 我想旋轉X圍繞其中心的每個正方形-線。我似乎無法弄清楚如何設置消失點，以便所有方塊圍繞各自的點旋轉，而不是圍繞同一點旋轉。 任何幫助非常感謝！

Answer 1

您可以通過旋轉並將它們翻譯到較新的位置來旋轉子動畫片段。要求兒童movieclip的樞軸與它的註冊點

重合，在以下代碼中，持有者是您的精靈，內容是正方形。 （要求正方形具有支點，與註冊點重合）

PS：支架的寬度和高度必須大於內容的寬度和高度。假設這裏的持有人是某種大容器（比如舞臺）。

var holder_Mc:MovieClip = holder_Mc 
var content_Mc:MovieClip = holder_Mc.content_Mc ; 
var rotation_val_num:Number = 50// in degrees 

     var bnd = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ; 
     var cw:Number = bnd.width ; 
     var ch:Number = bnd.height; 

     var cx:Number = bnd.x ; 
     var cy:Number = bnd.y ; 
      content_Mc.rotation = rotation_val_num ; 


      var bnd2 = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ; 
      var cw2 = bnd2.width ; 
      var ch2 = bnd2.height; 

      var cx2 = bnd2.x ; 
      var cy2 = bnd2.y ; 



      var dx = Math.abs(holder_Mc.x - cx2) ; 
      var dy = Math.abs(holder_Mc.y - cy2) ; 

      holder_Mc.x = cx + cw/2 + dx - cw2/2 
      holder_Mc.y = cy + ch/2 + dy - ch2/2 

Answer 2

基本上，您需要移動盒子才能獲得該效果。既然你也知道盒子的寬度/高度和軸心點位置，那麼計算就不那麼困難了。

但是，爲什麼要自己計算一下？使用​​，您可以使用TransformAroundCenterPlugin，它爲您處理轉換。我會推薦使用它。如果您不想補間它，請將補間持續時間（第二個參數）設置爲0。

// Activate plugin (should be called once) 
TweenPlugin.activate([TransformAroundPointPlugin]); 

// Transform your boxes around it's center, does not use the pivot point. 
TweenLite.to(this.mcBox1, 1, new TweenLiteVars().transformAroundCenter({rotationX: 50})); 
TweenLite.to(this.mcBox2, 1, new TweenLiteVars().transformAroundCenter({rotationX: 190})); 
TweenLite.to(this.mcBox3, 0, new TweenLiteVars().transformAroundCenter({rotationX: 5}));