애니메이션 기초 학습 및 플랫폼별 UI 이해

 

📌 학습 목표

• Flutter의 애니메이션 시스템을 이해하고 간단한 애니메이션 효과를 구현할 수 있다.
• Android(Material), iOS(Cupertino)의 플랫폼별 UI 차이를 이해하고, 플랫폼에 따라 분기 처리하는 기초를 배운다.

---

📚 주요 개념 요약

1. Flutter 애니메이션 기본 구조

Flutter의 애니메이션은 다음 세 가지 핵심 요소로 구성됨:

개념	설명
AnimationController	애니메이션의 실행/정지/시간을 제어하는 컨트롤러. 프레임 단위로 상태를 업데이트함.
Tween	시작 값과 끝 값을 설정하여 애니메이션 값을 생성하는 객체. 예: 0~1, 색상 변화 등
AnimatedWidget	애니메이션 상태에 따라 자동으로 다시 그려지는 위젯. 매번 setState() 호출 필요 없음.

---

2. 자주 사용하는 애니메이션 위젯

위젯명	설명	예시 사용처
FadeTransition	투명도 애니메이션	화면 전환 시 페이드 인/아웃
SizeTransition	위젯 크기 변경	버튼 확대/축소 애니메이션
SlideTransition	위젯 위치 이동	슬라이드로 나타나는 메뉴

---

3. 애니메이션 흐름 간단 예시

AnimationController와 Tween을 활용해서 페이드 인(점점 보이기) 효과를 구현한 예제

class MyFadeWidget extends StatefulWidget {
  @override
  _MyFadeWidgetState createState() => _MyFadeWidgetState();
}

/// 상태 클래스, 애니메이션 컨트롤을 담당
class _MyFadeWidgetState extends State<MyFadeWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller; // 애니메이션 컨트롤러 선언
  late Animation<double> _animation; // 애니메이션 값 (투명도)

  @override
  void initState() {
    super.initState();

    // 애니메이션 컨트롤러 생성 with 2초 지속 시간
    _controller = AnimationController(
      vsync: this, // TickerProvider를 통해 애니메이션 프레임 동기화
      duration: Duration(seconds: 2),
    );

    // Tween을 사용하여 0에서 1까지 애니메이션 값 전달
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);

    _controller.forward(); // 애니메이션 시작(페이드 인 효과)
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation, // 애니메이션에 따라 투명도 변화
      child: Text('Hello, Flutter!'), // 보여줄 텍스트 위젯
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 리소스 해제
    super.dispose();
  }
}

---

🧪 실습 과제 예시

1. 버튼 클릭 시 색상 변경 애니메이션

• AnimatedContainer를 활용하여 색상, 크기, 여백 등 부드럽게 변경

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: _isClicked ? Colors.blue : Colors.red,
  width: 200,
  height: 100,
  child: ElevatedButton(
    onPressed: () {
      setState(() {
        _isClicked = !_isClicked;
      });
    },
    child: Text('클릭'),
  ),
);

2. 화면 전환 시 페이드 효과 적용

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

---

📱 플랫폼별 UI 이해 (선택)

플랫폼	디자인 시스템	Flutter 대응 위젯 예시
Android	Material Design	Scaffold, AppBar, ElevatedButton
iOS	Cupertino	CupertinoPageScaffold, CupertinoButton

플랫폼별 UI 구현 시 조건 분기:

Widget build(BuildContext context) {
  if (Platform.isIOS) {
    return CupertinoButton(child: Text('iOS 버튼'), onPressed: () {});
  } else {
    return ElevatedButton(child: Text('Android 버튼'), onPressed: () {});
  }
}

또는 flutter_platform_widgets 패키지 활용.

---

🧾 정리된 주요 위젯/클래스/속성 표

분류	이름	설명
애니메이션 제어	AnimationController	애니메이션을 수동으로 제어함
애니메이션 값 생성	Tween<T>	애니메이션 범위 설정 (ex. 0 ~ 1, 색상)
자동 위젯 갱신	AnimatedWidget	내부 애니메이션 값이 변경되면 자동 갱신
위젯 애니메이션	AnimatedContainer	속성 변경 시 자동 애니메이션 적용
위젯 애니메이션	FadeTransition	투명도 변경 애니메이션
위젯 애니메이션	SizeTransition	위젯 크기 변경 애니메이션
위젯 애니메이션	SlideTransition	위치 이동 애니메이션
애니메이션 커브	CurvedAnimation	속도 곡선 적용 (ex. ease-in, bounce 등)

---

🔗 참고 링크

• Flutter 공식 애니메이션 문서:
  👉 https://docs.flutter.dev/ui/animations/overview
• 애니메이션 예제 모음 (Flutter Gallery):
  👉 https://gallery.flutter.dev/#/animations