Search
▪️

Building Delightful Animations

Animation의 4요소
1.
Animation
Animation에 사용되는 현재 값들을 갖고 있다.
어떤 식으로 증감할 지에 대해 차후에 설정하게 된다.
Animation의 상태를 갖고 있다.
2.
Animation Controller
Animation의 진행 시간을 설정 가능하다.
Animation의 상태 설정 가능하다.
3.
Tween
Animation에 사용 되는 두 값의 범위를 가진다.
4.
Animated Builder
Animation과 Builder Function을 가진다.
매 시간 마다 animation을 tick을 한다. (값을 바꿔가며 builder를 계속 부른다.)
debugPaintSizeEnabled = true 시에 디버깅 모드 처럼 영역 볼 수 있다.
stack은 positioned가 붙지 않은 Widget에 대해서 row column 크기를 잡는다. 따라서 해당 row, column보다 더 큰 positioned의 Widget이 나오면 오버플로우 오류를 내지 않고, 그냥 잘라서 나오지 않게 한다. 결과적으로 constraints가 필요하다. (left, right 동시 설정 가능하다.) positioned등 stack 밖으로 벗어나는 것에 대해서 overflow 옵션을 주어 벗어난 애들 사라진 것 보이게 할 수 있다.
Widget 회전에 대해서는 RotatedBox를 쓸 수도 있고, Transform.rotate라는 것을 쓸 수도 있다.
RotatedBox의 경우 회전 시, layout이 겹치지 않는다.
Transform.rotate의 경우 회전 시, layout이 겹쳐 진다.
물론 RotatedBox도 Stack과 Positioned를 잘 접목 시키면 겹치게도 가능하다.
또한 Overlay가 되지 않는다고 하면, 사실 RotatedBox나 Transform.rotate 무엇을 써도 무방함
Transform.rotate는 Radian 단위로 돌아간다. (따라서 double 값이 radian임 3.14가 180 degree)
또한 회전 시, 회전 정점이 Widget의 center point이다.
이런 회전 정점을 바꿔서 회전 할 수 있음 ⇒ alignment 속성을 이용하면 된다.