ActionScript 3 - 補間rotateAroundExternalPoint

Question

我沒有成功嘗試在補間時圍繞外部點旋轉矩形。我試圖鎖定紅色矩形的頂部，當它從左到右補間並從0º旋轉到90º。

alt text http://www.freeimagehosting.net/uploads/0b937c92e6.png

上面顯示補間的3個狀態的圖像。狀態1在沒有角度的線的起點處顯示紅色矩形。狀態2顯示紅色矩形沿着線的中間偏移45°，也是總角度90°的一半。狀態3顯示補間的最終位置，其中紅色矩形具有90°的角度並放置在線的邊緣。

看來我遇到的問題是，雖然補間，旋轉導致紅色矩形的頂部失去與黑色線的同步。

這是我的代碼，不工作，但希望能給你一個更清晰的圖片我正在嘗試。

var angle:Number = 90; 
var previousAngle:Number = 0; 

var distanceObject:Object = new Object(); 
distanceObject.distance = line.width; 

distanceTween = new Tween(distanceObject, "distance", None.easeNone, 0, distanceObject.distance, 5, true); 
distanceTween.addEventListener(TweenEvent.MOTION_CHANGE, tweenHandler); 

function tweenHandler(evt:TweenEvent):void 
    { 
    var angleShift:Number = (angle/distance) * distanceObject.distance; 

    //1:tween RedBox position 
    redBox.x = line.x + line.width * distanceObject.distance; 

    //2:tween RedBox angle 
    var externalPointMatrix:Matrix = redBox.transform.matrix; 
    MatrixTransformer.rotateAroundExternalPoint(externalPointMatrix, 0 + redBox.width * distanceObject.distance, 0, angleShift - previousAngle); 
    redBox.transform.matrix = externalPointMatrix; 

    previousAngle = angleShift; 
    } 

Answer 1

我不認爲你所指定的問題不夠好，一個通用的解決方案。有三件事情在這裏改變：x，y和旋轉。其中的每一個計算都是隨着時間的推移而變化的矩形上的一個點（圖中的藍色「x」）的結果。這意味着你需要關注的東西第一個是矩形上隨時間變化的點。接下來，您需要知道可以使用該點和旋轉來計算x和y。

所以把它分解成幾個步驟。

1. 找到的「X」點的位置就行
2. 旋轉對象
3. 找到的「X」點WRT的位置基於旋轉角度和矩形
4. 的「X」點的已知位置計算矩形的x和y位置（SOHCAHTOA）

下面是一些代碼來說明：

package 
{ 

import com.greensock.TweenNano; 

import flash.display.Sprite; 
import flash.events.Event; 

[SWF(width='500', height='300', backgroundColor='#ffffff', frameRate='30')] 
public class BoxAnim extends Sprite 
{ 
    private static const LINE_WIDTH:int = 350; 
    private static const RECT_WIDTH:int = 150; 
    private static const RECT_HEIGHT:int = 100; 
    private static const FINAL_ROTATION:Number = Math.PI/2; 

    public var point:Number; 

    private var line:Sprite; 
    private var rect:Sprite; 
    private var cross:Sprite; 

    public function BoxAnim() 
    { 
     addEventListener(Event.ADDED_TO_STAGE, addedToStage); 
    } 

    private function addedToStage(event:Event):void 
    { 
     line = new Sprite(); 
     addChild(line); 
     line.graphics.lineStyle(10, 0x0); 
     line.graphics.lineTo(LINE_WIDTH, 0); 
     line.x = 50; 
     line.y = 175; 

     rect = new Sprite(); 
     addChild(rect); 
     rect.graphics.lineStyle(4, 0xFF0000); 
     rect.graphics.beginFill(0xFF0000, 0.5); 
     rect.graphics.drawRect(0, 0, RECT_WIDTH, RECT_HEIGHT); 
     rect.x = 50; 
     rect.y = 175; 

     cross = new Sprite(); 
     addChild(cross); 
     cross.graphics.lineStyle(5, 0x41a9f4); 
     cross.graphics.moveTo(-5, -5); 
     cross.graphics.lineTo(5, 5); 
     cross.graphics.moveTo(5, -5); 
     cross.graphics.lineTo(-5, 5); 
     cross.x = 50; 
     cross.y = 175; 

     point = 0; 
     TweenNano.to(this, 3, {point: 1, onUpdate: tick}); 
    } 

    private function tick():void 
    { 
     // first calculate where the point should be on the line 
     cross.x = (point * LINE_WIDTH) + line.x; 

     // calculate the angle of rotation 
     var rotationRadians:Number = (point * FINAL_ROTATION); 
     rect.rotation = rotationRadians*180/Math.PI; 

     // calculate where on the rectangle the point would be 
     var rectCrossX:Number = (point * RECT_WIDTH); 
     // use trig to find the x & y points 
     rect.x = cross.x - Math.cos(rotationRadians)*rectCrossX; 
     rect.y = cross.y - Math.sin(rotationRadians)*rectCrossX; 
    } 
} 

} 

我只是使用變量point作爲從0到1的百分比。然後對其進行縮放以找到線上「x」點的位置。再次縮放以找出旋轉。再次縮放以找出它沿矩形頂部的位置。然後，trig解決矩形對角點的位置。