삼각함수와 플래시 - 2. 원형회전

삼각함수와 플래시 - 1.원의좌표  에서

원의 자취를 유지시키며 객체를 배치하는법을 알아보았다
이러한 객체들을 회전시키고 싶다면 어떻게 해야 될까?

바로 머리속에 떠오르는건 아마 십중 팔구 rotation 속성일 것이다.
앞서 원의 좌표편에서는 _listCon 이라는 임의의 DisplayObjectContainer에 객체들을 담았는데
이 부모의 rotation값을 변화시키면 자신에게 포함된 자식객체들도 자연스럽게 회전하게 된다.

문제는 그럴 자식객체들의 rotation은 0일지라도 부모의 rotation이 회전되었으므로
화면상에 보이는 각각의 자식객체들의 rotation마저도 회전되어져 보인다.

텍스트라던지 특정한 그림이 표현되어있는 자식객체들이라면 이것은 문제가 되게 된다.

원본

회전후


rotation을 통한 트윈등을 시킬 경우 각 객체들이 비틀어져 보이는 문제가 있다

객체를 선택하면 전체 객체들이 회전하며 선택된 객체가
각도 0 의 위치로 이동하게만들고 싶다.

step1 - rotation이 아니라면?

만약 rotation값을 변화시키는 회전을 한다면 부모가 30도 회전되었을 경우
모든 자식객체들의 rotation을 -30도씩 시키면 문제는 해결되지만
부모가 없는 경우라던가 전체가 아닌 특정 객체만 회전시킬경우 또다른 문제가 발생하게 된다.

그렇다면 위치를 매순간마다 다시 배치시킨다면 어떨까?
각 객체들은 저마다 자신만의 각도를 가지고 앞장에서 만들었던 함수(getCirclePos)에 의해 배치되었다.
그 각도를 바꾸어가며 다시 재배치 시키면 마치 회전하는듯하게 보이게 된다.

function getCirclePos(radian:Number,Radius:Number=100,hRadius:Number=100,cx:Number=0,cy:Number=0):Point {  
   var tx:Number = cx+wRadius*Math.cos(radian);
   var ty:Number = cy+hRadius*Math.sin(radian);
   return new Point(tx,ty);
}

step2 - object를 이용한 트윈

그럼 회전을 시키긴 하는데 어디로 시켜야 할까

이 포스팅에선 기본적으로 모든 객체를 클릭하면 degree 0 도의 지점,
즉 보이지 않는 원형의 좌취에서 제일 오른쪽 부분을 목표로 한다.

각 객체를 클릭하면 클릭된 객체가 원래 가지고 있던 호도각을 구한다.

선택된 객체가 가지는 호도각이 30도라면  거기서 -30 만큼 뺀뒤 다시 배치시키면
0도 의 위치로 이동하게 된다.

이때 목표변화량이 -30 이라면 0에서부터 -30으로 천천히 변화시키며 재배치 시키면
마치 회전하는 듯한 효과를 낼 수 있다.

그럼 처음으로 돌아가서 객체들을 원형으로 배칠시킬때의 코드를 보자.

for (var i:int=0; i < _listLimit; i++) {         
          var deg:Number=360 / _listLimit * i;
          var radian:Number = deg*Math.PI/180;
          var tgPoint:Point=getCirclePos(radian,_wRadius,_hRadius,_cx,_cy);
          var list:List_mc=new List_mc();
          with (list) {
               x=tgPoint.x;
               y=tgPoint.y;
          }
          _listCon.addChild(list);
     }

 var deg:Number=360 / _listLimit * i; 이부분은

객체가 생성될때 위치할 좌표를 결정할 호도각이다. (360/객체수 *객체고유넘버)
현재 객체가 가지는 호도각이라 할수 있겠다.

이 객체가 0도의 위치로 이동될려면 결과적으로 호도각은

자신이 가지고 있는 호도각만큼 - 값으로 변화되어야 한다.

var deg:Number =현재객체가 가지는 호도각- 현재객체가 가지는 호도각 ( 0 )

하지만 점차적으로 움직여야 하므로 뒤의 - 부분은 0에서 점차적으로 빼주며 배치시키면

회전하는 효과를 얻을 수 있다.

한번 회전된뒤 다시 회전시킬땐 앞서 변회된 각 역시 참조해야 하므로 최종적인 공식은

var deg = 360 /객체수 * 객체고유넘버 + 이전 변화각 + 변화될 각도의 정도;

물론 변화될 각도의 정도는 "현재 객체가 가지는 호도각 * -1" 을 말한다.

변화될 각도를 점차적으로 변화시키기 위해서

빈 오브젝트를 만들어 임의의 변수에 0을 집어넣고 트윈을 이용해서
임의의 변수값을 최종적으로 변화시킬 각도만큼 변화시킨다.

그리고 매번 트윈할때마다 임의의 변수값을 이용하면서
위의 식을 이용하여 재배치 한다.

import myas.utils.MathUtil;
import caurina.transitions.Tweener;
var _cx:int = 0;
var _cy:int = 0;
var _radius:int = 100;
var _listLimit:int = 8;
var _listCon:Sprite = new Sprite;
var _selectedList:Mlist;
var _listArr:Array = new Array();
var _rotateObj:Object=new Object;
//------------------------------------------------------------------------------------
_rotateObj._currentRotation=0;
_rotateObj._toRotation=0;
_listCon.x = 200;
_listCon.y =200;
addChild(_listCon);
//------------------------------------------------------------------------------------
function getCirclePos(radian:Number,wRadius:Number=100,hRadius:Number=100,cx:Number=0,cy:Number=0):Point {
     var tx:Number = cx+wRadius*Math.cos(radian);
     var ty:Number = cy+hRadius*Math.sin(radian);
     return new Point(tx,ty);
}
function addList():void {
     addChild(_listCon);
     for (var i:int=0; i < _listLimit; i++) {
          var deg:Number=360 / _listLimit * i;
          var radian:Number = deg*Math.PI/180;
          var tgPoint:Point = getCirclePos(radian,_radius,_radius);
          var list:Mlist=new Mlist(i);
          _listArr.push(list);
          with (list) {
               x=tgPoint.x;
               y=tgPoint.y;
               addEventListener(MouseEvent.CLICK,onListClick);
          }
          _listCon.addChild(list);
     }
}
function onListClick(e:MouseEvent):void {
     _selectedList=e.currentTarget as Mlist;
     rotate();
}
function degreeParsing(degree:Number):Number {
     var parsingDegree:Number;
     if (Math.abs(degree)<360) {
          parsingDegree = degree;
     } else {
          (degree > 0) ? parsingDegree = degree-360 : parsingDegree = degree+360;
     }
     return parsingDegree;
}
function rotate():void {
     _rotateObj._toRotation=0;
     var tgRotate:int=_rotateObj._currentRotation + 360 / _listLimit * _selectedList.index;;//현재각+(선택각=360/원의갯수*원의인덱스)
     tgRotate= degreeParsing(tgRotate);;//360이상 각은 360이하표현으로
     if (Math.abs(tgRotate) < 180) {
          tgRotate=- tgRotate;
     } else {
          tgRotate > 0?tgRotate=360 - tgRotate:tgRotate=-360 - tgRotate;
     }
     Tweener.addTween(_rotateObj,{_toRotation:tgRotate,time:0.5,transition:"easeOutSine",onUpdate:listRotate,onComplete:listRotateComplete});
}
//트윈중 변화되는 오브젝트의 toRotation을 이용해서 리스트들의 좌표를 재배치
function listRotate():void {
     for (var k:int=0; k < _listArr.length; k++) {
          var tgList:Mlist=_listArr[k];
          var deg:Number=360 / _listLimit * tgList.index + _rotateObj._currentRotation + _rotateObj._toRotation;
          var radian:Number = deg*Math.PI/180;;//호도각으로 라디안각 구함
          var tgPoint:Point=MathUtil.getCirclePos(radian,_radius,_radius);
          tgList.x=tgPoint.x;
          tgList.y=tgPoint.y;
     }
}
//트윈이 끝나면 리스트컨테이너의 현재각을 회전오브젝트에 저장
function listRotateComplete():void {
     _rotateObj._currentRotation=MathUtil.degreeParsing(_rotateObj._currentRotation + _rotateObj._toRotation);
}
addList();

하나가 아닌 여러개의 객체를 움직여야 하므로 빈오브젝트에는
초기생성시와 비교하여 현재 얼마나 회전되었는지를 알수있는 임의의 변수를 추가하였다.

플래시의 좌표계는 수학과는 다르게 시계방향으로 돌기때문에
만약 350도를 0도를 바꿀려면 10도만큼 시계방향으로 돌리면 상관이 없지만
10도의 위치를 0도로 바꾸어야 하는데 +350을 하는것은 부자연스럽다.
여기선 -10도 를 적용하여 반시계방향으로 돌리는것이 자연스럽다.

그걸 구현하기 위해
 degreeParsing 라는 함수와 약간의 코드가 추가되었다.

function degreeParsing(degree:Number):Number {
     var parsingDegree:Number;
     if (Math.abs(degree)<360) {
          parsingDegree = degree;
     } else {
          (degree > 0) ? parsingDegree = degree-360 : parsingDegree = degree+360;
     }
     return parsingDegree;
}

호도각체계에선 -360 과 0 과 360은 수치는 다르지만 결과적으로 같은 상태이다.
이경우 혼란을 없애기 위해서 수치를 0~360으로 고정시킬 필요가 있었다.
degreeParsing 함수를 통하면
-360 -> 0
-180 -> 180
  540 -> 180
등으로 혼란을 피할수 있게 수치를 변환시켜 반환한다.

var tgRotate:int=_rotateObj._currentRotation + 360 / _listLimit * _selectedList.index;;//현재각+(선택각=360/원의갯수*원의인덱스)
     tgRotate= degreeParsing(tgRotate);;//360이상 각은 360이하표현으로
     if (Math.abs(tgRotate) < 180) {
          tgRotate=- tgRotate;
     } else {
          tgRotate > 0 ? tgRotate=360 - tgRotate:tgRotate=-360 - tgRotate;
     }

180도를 기준으로 180이하는 반시계방향으로 180이상은 시계방향으로 0도를 향해 회전해야한다.
여기서 tgRotate란 위에서 구한 식
var deg = 360 /객체수 * 객체고유넘버 + 이전 변화각 + 변화될 각도의 정도의
 deg 에 해당한다.

간단한 수식을 통해 구현시켰다.