애니메이션(1) 그래프, 색상 변경, 불투명도

flutter/function

애니메이션(1) 그래프, 색상 변경, 불투명도

신주봉 2022. 11. 18. 16:27

애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 복잡한 계산식이 필요하다.

하지만 플러터는 복잡한 계산식이 없어도 편리하게 애니메이션을 구현하는 기능을 제공한다.

- 플러터가 제공하는 애니메이션 기능 중 하나인 AnimatedContainer 위젯을 사용하면 기존의 컨테이너 위젯과 똑같지만 애니메이션의 모양을 결정하는 curve와 재생 시간을 결정하는 duration 변수를 추가로 넣을 수 있다.

- 다음 주소에 접속하면 플러터 API의 Curves 클래스가 제공하는 다양한 애니메이션 모양을 확인할 수 있다.

Curves class - animation library - Dart API

A collection of common animation curves. See also: Curve, the interface implemented by the constants available from the Curves class. Properties hashCode → int The hash code for this object. read-only, inherited runtimeType → Type A representation of t

api.flutter.dev

- 플러터의 애니메이션은 *선형보간법을 활용해 다양한 모양을 만드는데 이런 수학적인 부분을 AnimatedContainer가 처리해준다.

따라서 모양과 재생 시간만 정의하면 애니메이션을 구현할 수 있다.

*두 개의 점이 주어졌을 때에 그 두점을 지나는 함수를 직선의 방적식으로 나타내는 것을 말한다.

그래프 애니매이션

- 예제로 키와 몸무게를 이용해 체질량지수인 BMI를 구하고 각 수치를 그래프로 표현하는 앱을 구현했다.

버튼을 이용해 각 수치가 변할 때마다 그래프의 높낮이가 변경되는 애니메이션을 적용하였다.

- People 클래스에 이름, 키, 몸무게를 입력받아서 BMI를 계산하는 클래스를 저장하였다.

- AnimationAPP 클래스에 People 리스트를 만들고 초기화 함수 initState()에 기초 데이터를 넣었다.

- 키와 몸무게 그리고 BMI 등 3개의 그래프를 보여주고

각 그래프에는 bounceIn, easeInCubic, pinkAccent라는 애니메이션 효과를 2초씩 설정하였다.

- 스캐폴드의 본문에는 Column을 이용해 위젯을 세로로 만들고 SizedBox와 RaisedButton을 두 개 배치하였다.

SizedBox 안에는 Row를 이용해 텍스트 위젯과 애니메이션을 구현하는 AnimatedContainer를 만든다. 버튼을 누르면 current값이 바뀌면서 그래프의 높이가 변경되도록 코드를 작성하였다.

- duration 옵션에 지정한 Duration(second: 2)는 2초동안 애니메이션을 재생하는 코드이다. second 대신에 days, hours, milliseconds 등 다양한 시간 단위를 사용할 수 있다. 그리고 curve 옵션에는 Curves 클래스가 제공하는 애니메이션 모양을 골라 지정한다.