그래 저번에 모바일로 찔끔만 글썼던 그 갤럼이야


아마 이 아라보자 시리즈는 그냥 내 꼴릴때마다 툭툭 던져댈거라서 일관성은 별로 없을거야


개념에 대해 장황히 설명할까 생각도 해봤는데, 그냥 예시 던져가면서 질문 오가는 편이 더 나을거 같아서 이런 식으로 진행해보기로 했어



이번에 알려줄 익스프레션 코드는 원이동 하는 코드야


그러니깐 쉽게 말해서 지구 옆으로 달이 공전하고, 태양계에서 지구가 공전하고...뭐 이런 이동 말이야

//엄밀히는 타원 이동이기는 함


일단 이 원이동을 익스프레션 없이 구현할려면, 아마 null 레이어로 회전축을 고정하고서, 돌리려는 레이어가 해당 null 레이어를 parent 레이어가 되게끔 하면 될거야


대략 이따구로


그러고서 null 레이어의 로테이션값만 돌려도 원회전을 하기는 할거야



그러나 이 방법에는 한가지 문제점이 있어

바로 돌면서 연결시킨 레이어가 추가로 자전을 하게 된단 거지


위에 스샷의 예시로 보면 저 상황에서 아래 null 레이어의 rotation값을 +30 해버리면, 쉐이프 레이어도 30도만큼 기울어지게 될거야


이를 해결할라면 물론 그만큼 쉐이프 레이어의 각도를 회전하게끔 별도로 수치를 조절하면 되지만, 귀찮을뿐만 아니라, 회전속도가 일정하지 않게 되면 상당히 까다롭게 될거야


그러면 이 방법 말고 다른 방법을 생각해보자




이 짓을 위해서 잠깐만 이과충 등판해볼게

//읽어두면 후에 다른 곳에서 장난치기 좋기는 한데 꼭 알지 않아도 구현은 가능해


좌표에는 직교좌표랑 극좌표라는게 있어

직교좌표는 우리가 흔히 아는 x축, y축으로 물체의 좌표를 나타내는거고, 극좌표는 x축을 기준으로 물체가 어느 각도로(Θ), 어느만큼 떨어져 있는지(r)를 기준으로 나타내는 좌표야

극좌표의 값을 직교좌표계로 나타내게 되면, (x,y)=(r*cos(Θ),r*sin(Θ))가 될 거야


왜 직교좌표랑 극좌표 이야기가 나왔느냐 하면, 원운동에 대한 기술은 극좌표의 개념을 쓰면 더 편하게 되거든

원의 정의대로면 위의 (x,y)=(r*cos(Θ),r*sin(Θ))에서 r은 일정한 값을 나타내게 되거든


//극좌표 개념 없이 직교좌표로만 표현하면 x^2+y^2=r^2꼴이 되는데, x랑 y에 대한 정의를 내리기 매우 힘들어져


따라서 원운동을 할라면, 포지션에 다음과 같은 코드를 입력하면 될거야


/////////////////////

r=100;

rota=time*30;

transform.position+[r*Math.cos(degreesToRadians(rota)),r*Math.sin(degreesToRadians(rota))]

/////////////


//당연하게도 오타는 얄짤 없고, 심지어 대소문자도 구별해야 해, 물론 이 함수들은 익스프레션 입력란 옆에 (▶)처럼 생긴 아이콘을 클릭해서 찾아보면 직접 끌여다가 쓸 수 있는 것들이 많아

// //time은 시간변수, 작업하고 있는 컴포지션에서의 재생 시간값을 의미하게 될거야

// // //자바 스크립트를 기반으로 하고 있는 에펙 익스프레션에서는 sin, cos내의 각도는 라디안 값을 기준으로 하기에 직접 디그리를 라디안으로 변환시켜주는 함수를 별도로 한번 걸쳐줘야 해, 라디안이 뭔지 모르겠다면 검색 ㄱㄱ


뭔가 부연설명하기에는 설명할게 너무 많으니, 자세한 설명은 댓글 남겨주면 그거대로 설명해볼게


이 코드 입력 후에는 시간에 따라 100픽셀 정도의 반경으로 30도씩 공전하는, 회전 각도를 그대로 유지하는 레이어 운동을 만들 수 있어

//r=100에서의 100, rota=time*30;에서의 30을 다른 숫자로 변경시키면 그대로 변환 가능

물론 저기에서의 transform.position을 다른 레이어의 포지션값으로 가져오면 그 레이어를 공전하게끔 만들수도 있고, 이 코드를 연속적으로 연결시키면 태양계 형태도 구현이 가능해


막상 컴터 끼면서 설명하려 해도 좀 많이 부족하다 나를살


혹시 질문할거나 이해 안되는거 있으면 댓글 부탁할게