2

トゥイーン中に、外部ポイントを中心に長方形を回転させようとして失敗しました。赤い長方形の上部を線に固定しようとしています。線は左から右にトゥイーンし、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;
    }
4

1 に答える 1

2

一般的な解決策として、問題を十分に特定していないと思います。ここで変更されるのは、x、y、回転の3つです。これらのそれぞれは、時間の経過とともに変化する長方形上の点（図の青い「x」）の結果として計算されます。つまり、最初に焦点を当てる必要があるのは、時間の経過とともに変化する長方形上の点です。次に、回転とともにその点を使用してxとyを計算できることを知っておく必要があります。

それで、それをステップに分解してください。

  1. 線上の「x」ポイントの位置を見つけます
  2. オブジェクトを回転させる
  3. 長方形に対する「x」点の位置を見つけます
  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;
    }
}

}

変数を0から1までのパーセンテージとして使用していますpoint。次に、変数をスケーリングして、線上の「x」ポイントの位置を見つけます。もう一度スケーリングして、回転を計算します。もう一度スケーリングして、長方形の上部に沿った場所を見つけます。次に、trigは、ポイントに対する長方形のコーナーの位置を解決します。

于 2010-06-22T01:36:22.967 に答える