CSS3 이야기를 다루다보니 엑스플랫폼 transformation에 대해서는 한번도 언급을 하지 않은 것 같아서..
transformation 은 형태를 변형시키는 값을 지정하는 속성입니다.
애니메이션 효과의 기본이 되는 요소이기도 합니다.
transformation 에는 다음과 같은 속성(기능)을 제공합니다.
- flip : 뒤집기 변환을 지정하는 속성. 마치 딱지 치기 같은 기능입니다.
- origin : 말로 설명하기는 애매한데 컴파스 같은 기능?
- rotate : 회전변환을 지정하는 속성
- scale : 확대/축소 변환을 지정하는 속성
- skew : 비틀기 변환을 지정하는 속성
- translate : 이동 변환을 지정하는 속성
여러개의 속성을 동시에 지정할 수 있습니다.
하지만 문법상 동일한 속성이 반복되어 지정되면 마지막 속성만 유효하게 됩니다.
UX 스튜디오에서는 직접 속성값을 입력할 수도 있지만
숫자가 잔뜩 나오면 어지러워지기 때문에 툴의 기능을 사용합니다.
적용할 대상을 선택하고 컨텍스트 메뉴에서 Transform Component 메뉴를 선택합니다.
그러면 컴포넌트의 색상과 포인트의 모양이 바뀌면서 편집상태로 전환됩니다.
그리고 컨텍스트 메뉴에서 적용 가능한 항목이 표시됩니다.
작업이 끝나면 Enter 키를 치거나 메뉴에서 End Edit를 선택해주면 됩니다.
좌측 상단에 보이는 흰색 포인트는 회전변형의 중심좌표입니다.
마우스로 클릭하고 이동하거나 소스코드에서 수정할 수 있습니다.
기본값은 0,0 입니다.
컨텍스트 메뉴에서 Center Origin을 선택하면 중심좌표를 컴포넌트의 중심에 오게 할 수 있습니다.
flip은 수치를 지정하지는 않고 뒤집는 방향만 결정합니다.
가로방향(horizontal)과 세로방향(vertical) 옵션이 있는데
둘 다 지정할 수 있습니다.
편집을 마치고 나면 원래 컴포넌트는 희미하게 보이고 변형된 컴포넌트가 보여집니다.
실제 애플리케이션을 실행했을때는 원래 컴포넌트는 보이지 않습니다.
그리고 컴포넌트의 외형만 변경되는 것이 아니라 내부 컴포넌트에도 동일한 효과가 적용됩니다.
버튼의 경우 내부에 있는 텍스트도 동일하게 뒤집어진것을 확인할 수 있습니다.
* 편집 단계에서 Reset All 을 선택하면 모든 변형을 취소할 수 있습니다.
rotate 같은 경우에는 컨텍스트 메뉴에는 주로 사용하는 3가지 값만 정의되어 있지만 실제 작업시에는
값을 직접 지정하거나 마우스로 컴포넌트를 움직일 수 있습니다.
마우스는 각 꼭지점에 가져가면 커서 모양이 바뀌고 원하는 방향으로 돌려볼 수 있습니다.
scale 옵션은 현재 상태의 컴포넌트를 확대하는 것이기 때문에
이미지나 텍스트가 깨질 수 있습니다.
translate 는 그냥 이동입니다. x,y 축 기준으로...
또 한가지 더 있는 기능이 skew 입니다.
편집상태에서 면의 가운데 지점에 마우스를 가져가면 포인트가 아래 그림과 같이 변경됩니다.
해당하는 지점을 잡고 위치를 바꾸어주면 해당 축으로 모양을 비틀 수 있습니다.
여기서 비튼다는 개념은 3차원은 아니고 2차원 개념입니다. ~~
원래 의도는 아니지만 잘 조정하면 이런 입체 모양도 나온다는..^^
