Animation Basics with Implicit Animations
번역 및 정리
Flutter에는 Container 위젯에서 AnimatedContainer, Align 위젯에서 AnimatedAlign, DefaultTextStyle 위젯에서 AnimatedDefaultTextStyle과 같이 앱에서 이미 사용해 본 적이 있는 기존 위젯의 애니메이션 버전인 일련의 위젯들이 포함되어 있습니다.
이러한 위젯들은 해당 속성의 변경 사항에 자동으로 애니메이션을 적용합니다. Stateful 위젯에서 setState()를 호출하여 새로운 속성 값으로 위젯을 다시 빌드할 때. 위젯은 이전 값에서 새 값으로 애니메이션을 구동하는 작업을 처리합니다. 이러한 위젯을 암시적으로 애니메이션이 적용된 위젯이라고 합니다.
그리고 이러한 위젯은 일반적으로 앱에 애니메이션을 추가해야 할 때 가장 먼저 찾게 됩니다. 위젯은 복잡한 작업을 추가하지 않고도 애니메이션을 추가할 수 있는 수단을 제공합니다. 이러한 암시적 애니메이션 위젯 중 하나를 사용하여 앱에 애니메이션을 추가하는 방법을 좀 더 자세히 살펴보겠습니다.
이 앱에는 컨테이너와 버튼이 있습니다. 버튼을 누르면 setState가 호출되고 컨테이너가 새로운 너비 값으로 다시 빌드됩니다. 애니메이션 없다면, 컨테이너의 너비가 즉시 변경되는 것을 볼 수 있습니다. Container 위젯을 AnimatedContainer 위젯으로 바꾼다면, duration을 지정하여 이 앱에 애니메이션을 추가할 수 있습니다.
이제 버튼을 누르면 컨테이너가 이전 너비 값에서 새 값으로 서서히 애니메이션이 적용됩니다. 이전 값과 새 값 사이에 애니메이션을 적용하는 과정을 보간(interpolation)이라고 합니다. AnimatedContainer는 이전 값과 새 값이 변경될 때마다 해당 속성을 보간하는 작업을 처리합니다.
이는 예를 들어 데코레이션을 포함한 모든 AnimatedContainer의 속성에 적용됩니다. 데코레이션으로 그라데이션을 수정하면 애니메이션 컨테이너가 이전 그라데이션과 새 그라데이션 사이의 보간을 처리합니다. AnimatedContainer와 같이 암시적으로 애니메이션이 적용된 위젯에는 애니메이션의 동작을 제어하는 데 사용할 수 있는 두 가지 프로퍼티가 있습니다.
duration 속성을 설정하여 새 값으로 보간하는 데 걸리는 시간을 제어할 수 있습니다. 이 예시에서는 애니메이션에 훨씬 더 긴 시간이 걸리도록 만들었습니다. 커브를 사용하여 위젯이 이전 값에서 새 값으로 보간하는 방식을 제어할 수도 있습니다. 커브는 시간에 따른 변화율을 제어하여 애니메이션을 더욱 사실적으로 만들 수 있습니다.
이 예제에서는 커브를 기본 선형 커브에서 큐빅 커브로 변경하겠습니다. 애니메이션을 나란히 보면 같은 시간이 걸리지만 큐빅 커브가 적용된 애니메이션은 다르게 변하는 것을 볼 수 있습니다. 애니메이션에 약간의 개성을 부여하는 데 사용할 수 있는 다양한 기본 제공 커브가 있으며, 사용자 정의 커브를 정의할 수도 있습니다.
Curves는 톱니 곡선처럼 불연속적인 곡선도 만들 수 있습니다. 다음은 사인 함수를 사용하여 앞뒤로 튀어 오르는 커브를 만드는 사인 커브라는 사용자 정의 커브의 예입니다. 여기서는 별이 위아래로 튀어 오르는 데 사용되었습니다. 요약하자면, Flutter는 일반적인 위젯의 애니메이션 버전인 암시적으로 애니메이션이 적용된 위젯을 제공합니다.
duration과 curve을 사용하여 이러한 위젯의 애니메이션 방식을 제어할 수 있습니다. AnimatedContainer는 모양에 영향을 주는 많은 속성이 있고 모든 속성이 자동으로 보간되기 때문에 특히 강력하고 암시적으로 애니메이션이 적용되는 위젯입니다. 다른 모든 암시적으로 애니메이션이 적용된 위젯도 복잡하게 추가하지 않고도 애니메이션을 추가할 수 있는 강력하고 사용하기 쉬운 옵션입니다.
또한 이러한 위젯을 반드시 Stateful 위젯에 배치하고 설정 상태를 사용할 필요는 없습니다. StreamBuilder와 FutureBuilder를 사용하여 애니메이션을 트리거할 수도 있습니다. 암시적으로 애니메이션이 적용된 위젯은 애니메이션을 추가하기 위한 첫 번째 선택이 될 것입니다.
