Transform 위젯

Transform 위젯은 4x4 변환 행렬을 사용하여 자식 위젯에 기하학적 변환을 적용합니다.

일반적인 변환

1. 회전:

   Transform({
     transform: Matrix4.rotationZ(angle),
     child: /* widget */
   })
   

2. 크기 조절:

   Transform({
     transform: Matrix4.diagonal3Values(scaleX, scaleY, 1),
     child: /* widget */
   })
   

3. 이동:

   Transform({
     transform: Matrix4.translationValues(x, y, 0),
     child: /* widget */
   })
   

4. 기울이기:

   Transform({
     transform: Matrix4.skewX(value),
     child: /* widget */
   })
   

Matrix4 연산

1. 기본 연산:

   • Matrix4.identity(): 항등 행렬 생성
   • Matrix4.rotationZ(): Z축 기준 회전
   • Matrix4.translationValues(): X, Y, Z 축 이동
   • Matrix4.diagonal3Values(): X, Y, Z 축 크기 조절

2. 변환 조합:

   const matrix = Matrix4.identity()
     .multiply(Matrix4.rotationZ(angle))
     .multiply(Matrix4.translationValues(x, y, 0));
   

일반적인 사용 사례

1. 카드 뒤집기 효과:

   Transform({
     transform: Matrix4.rotationY(isFlipped ? Math.PI : 0),
     child: Card()
   })
   

2. 호버 시 크기 변경:

   Transform({
     transform: Matrix4.diagonal3Values(
       isHovered ? 1.1 : 1,
       isHovered ? 1.1 : 1,
       1
     ),
     child: Button()
   })
   

3. 3D 회전:

   Transform({
     transform: Matrix4.rotationX(angleX)
       .multiply(Matrix4.rotationY(angleY)),
     child: Container()
   })
   

모범 사례

1. 성능:

   • 가능한 하드웨어 가속 사용
   • 불필요한 변환 피하기
   • 단순 이동은 Transform.translate 사용 고려

2. 애니메이션:

   • 부드러운 전환 사용
   • 성능 영향 고려
   • 다양한 기기에서 테스트

3. 레이아웃 고려사항:

   • 변환된 경계 영역 주의
   • 터치/클릭 이벤트 올바르게 처리
   • 부모 제약조건 고려

팁과 요령

1. 원점:

   • 회전을 위한 변환 원점 설정
   • 위젯 중심점 vs 모서리 고려
   • alignment 속성 활용

2. 3D 효과:

   • 깊이감을 위한 원근감 사용
   • 여러 변환 조합
   • 다양한 뷰포트에서 테스트

3. 디버깅:

   • 시각화를 위한 디버그 페인트 사용
   • 변환된 경계 확인
   • 터치 영역 검증