我在补间时尝试围绕外部点旋转矩形没有成功。我试图将红色矩形的顶部锁定到线,同时它从左到右补间并从 0º 旋转到 90º。
替代文字 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;
}