퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 트리거와 애니메이션
  4. 변형[Transforms]

변형[Transforms]

Transform 클래스

변형[Transforms]는 퓨즈 레이아웃 엔진에 의해 할당된 배치를 넘어서 요소를 이동, 회전, 크기 조정 및 기울이기 위해 사용됩니다.

변형은 다른 요소 및 트리거와 마찬가지로 요소에 추가됩니다.

예제

이 예제에서는 원래 크기의 3배가 되도록 원의 배율을 조정합니다:

1
2
3
<Circle Color="Green" Width="50" Height="50">
    <Scaling Factor="3" />
</Circle>

사용 가능한 변형들

링크로 대신합니다: https://www.fusetools.com/docs/fuse/transform#available-transforms

Transform의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/transform#section-table-of-contents

비고

왜 직접적으로 이동, 크기 조정 및 회전하지 않습니까?

같은 요소에 대해 여러 변형을 수행하려는 경우 적용되는 순서가 중요합니다. 변형 추가에 대해 명시적으로 설정하면 문제가 생길 수 있습니다.

1
2
3
4
5
6
7
8
9
<Rectangle Color="Green" Width="50" Height="50">
    <Translation X="100" />
    <Rotation Degrees="45" />
</Rectangle>

<Rectangle Color="Red" Width="50" Height="50">
    <Rotation Degrees="45" />
    <Translation X="100" />
</Rectangle>

위쪽 사각형이 오른쪽으로 100 포인트 이동한 다음 45도 회전합니다. 그것은 원래 위치의 오른쪽에 100 포인트를 놓고 끝납니다.

그러나 두 번째 사각형은 먼저 회전한 다음 이동합니다. 초기 회전때문에 양의 X 방향이 이제 오른쪽 하단을 향하고 있습니다. 이 때문에 직사각형은 오른쪽 아래쪽으로 100 포인트가 됩니다.

주의 사항

요소를 너무 많이 확장하면 앨리어싱 효과가 발생할 수 있습니다. 스케일링되는 요소가 먼저 텍스처로 렌더링되고 크기가 조정되기 때문입니다. 이렇게 하면 요소의 Width 및 Height에 애니메이션을 적용하는 것과 비교하여 Scaling 애니메이션을 매우 빠르게 애니메이트 될 수 있습니다.

Was this article helpful to you? Yes No

How can we help?