0

円弧の回転アニメーションを作成してみました。これらの例をすべて試した後でも、中心を中心に回転させることができません。左上隅を中心に回転しています。

private function init():void
        {
            var hgroup:Group=new Group();
            this.addElement(hgroup);

            arc1=new Graphic();
            arc1.graphics.lineStyle(12,0xff0000,1,false,"normal",CapsStyle.SQUARE);
            draw_arc(arc1,CENTER,CENTER,70,14,288,1);

            hgroup.addElement(arc1);

            var matrix:Matrix = arc1.transform.matrix; 
            var rect:Rectangle = arc1.getBounds(arc1.parent); 
            matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2))); 
            matrix.rotate((90/180)*Math.PI); 
            matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2));

            var rot:Rotate = new Rotate();
            rot.angleBy = 360;
            rot.duration = 1000;
            rot.target = arc1;
            rot.play();

        }

        public function draw_arc(movieclip:Sprite,center_x:Number,center_y:Number,radius:Number,angle_from:Number,angle_to:Number,precision:Number):void {
            var angle_diff:Number=angle_to-angle_from;
            var steps:Number=Math.round(angle_diff*precision);
            var angle:Number=angle_from;
            var px:Number=center_x+radius*Math.cos(angle*deg_to_rad);
            var py:Number=center_y+radius*Math.sin(angle*deg_to_rad);
            movieclip.graphics.moveTo(px,py);
            for (var i:Number=1; i<=steps; i++) {
                angle=angle_from+angle_diff/steps*i;
                movieclip.graphics.lineTo(center_x+radius*Math.cos(angle*deg_to_rad),center_y+radius*Math.sin(angle*deg_to_rad));
            }
        }
4

4 に答える 4

1

you need this property:

rot.autoCenterTransform="true"

see the example at the bottom of the documentation: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Rotate.html

于 2013-01-07T20:29:18.000 に答える
0

私は以前にこのソリューションを使用しました。それはうまく機能し、非常に簡単です：

http://www.chadupton.com/blog/2008/02/rotate-on-center-in-adobe-flex/

于 2013-01-09T04:27:11.403 に答える
0

同様の問題（回転矢印）があり、次のように修正しました。

<s:Group width="0" height="0" verticalCenter="0" right="14">
    <s:Graphic id="arrow" rotation="90" rotation.selectedStates="0">
        <s:Path data="M 0 0 L 5 5 L 0 10 Z" left="-2.5" top="-5">
            <s:fill>
                <s:SolidColor id="arrowFill"/>
            </s:fill>
        </s:Path>
    </s:Graphic>
</s:Group>

コンテナーは、コンテナーに含まれるグラフィックのアンカー ポイントとしてのみ機能するため、Groupそのサイズは に設定されています。0この位置がGroup回転中心点です。のPathはGraphic、アンカー ポイントが中央にくるように配置されます (つまり、幅 5 ピクセル、高さ 10 ピクセルなので、左に 2.5 ピクセル、上に 5 ピクセル再配置されます)。

実際の回転はStatesとTransformationsここで行われますが、Effectは同じことを行います。

于 2013-01-07T10:01:31.403 に答える