애니메이션 - Flutter에서의 기본 애니메이션 구현
Flutter는 애니메이션을 쉽게 구현할 수 있도록 다양한 도구와 위젯을 제공합니다. 애니메이션은 사용자 경험을 향상시키고 인터페이스를 더 매끄럽게 만들어 줍니다. 이번 강의에서는 Flutter에서 기본 애니메이션을 구현하는 방법을 배워보겠습니다.
애니메이션의 기본 개념
Flutter에서 애니메이션을 구현할 때, 애니메이션 컨트롤러(AnimationController)와 애니메이션(Animation) 객체를 사용합니다. AnimationController는 애니메이션의 시간과 상태를 관리하며, Animation 객체는 애니메이션의 값과 진행 상태를 나타냅니다.
애니메이션 컨트롤러와 애니메이션 객체
애니메이션 컨트롤러
AnimationController는 애니메이션의 동작을 제어하는 데 사용됩니다. 애니메이션의 시작, 중지, 속도, 반복 등을 관리할 수 있습니다.
애니메이션 객체
Animation 객체는 애니메이션의 값을 나타냅니다. 보통 Tween 객체와 함께 사용되어 시작 값과 종료 값 사이의 중간 값을 계산합니다.
간단한 애니메이션 예제
이번 예제에서는 버튼을 눌렀을 때 사각형이 점점 커지는 애니메이션을 구현해보겠습니다.
Step 1: 프로젝트 생성 및 기본 설정
먼저, 새로운 Flutter 프로젝트를 생성하고 기본 설정을 합니다. main.dart 파일을 열고 다음과 같이 작성합니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AnimationScreen(),
);
}
}Step 2: 애니메이션 스크린 만들기
이제 AnimationScreen 클래스를 만들어 애니메이션을 구현합니다.
class AnimationScreen extends StatefulWidget {
@override
_AnimationScreenState createState() => _AnimationScreenState();
}
class _AnimationScreenState extends State<AnimationScreen> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_animation = Tween<double>(begin: 0, end: 300).animate(_controller)
..addListener(() {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter 애니메이션'),
),
body: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.blue,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_controller.isCompleted) {
_controller.reverse();
} else {
_controller.forward();
}
},
child: Icon(Icons.play_arrow),
),
);
}
}코드 설명
- AnimationController: _controller는 애니메이션의 동작을 제어합니다. duration은 애니메이션의 지속 시간을 설정합니다.
- Tween: Tween 객체는 시작 값과 종료 값 사이의 값을 생성합니다. begin은 시작 값, end는 종료 값입니다.
- animate: animate 메서드는 AnimationController와 Tween을 결합하여 애니메이션 객체를 생성합니다.
- addListener: addListener 메서드는 애니메이션이 진행될 때마다 호출되는 콜백 함수를 등록합니다. 여기서는 setState를 호출하여 애니메이션 값이 변경될 때마다 UI를 다시 그립니다.
- FloatingActionButton: 버튼을 눌렀을 때 애니메이션이 앞으로 진행(forward)하거나 반대로 진행(reverse)하도록 설정합니다.
심화 예제: 페이드 애니메이션
이번에는 텍스트가 페이드 인/아웃 되는 애니메이션을 구현해보겠습니다.
Step 1: 프로젝트 생성 및 기본 설정
기존 프로젝트에 이어서 새로운 화면을 추가합니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FadeAnimationScreen(),
);
}
}Step 2: 페이드 애니메이션 스크린 만들기
FadeAnimationScreen 클래스를 만들어 페이드 애니메이션을 구현합니다.
class FadeAnimationScreen extends StatefulWidget {
@override
_FadeAnimationScreenState createState() => _FadeAnimationScreenState();
}
class _FadeAnimationScreenState extends State<FadeAnimationScreen> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('페이드 애니메이션'),
),
body: FadeTransition(
opacity: _animation,
child: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
),
),
);
}
}코드 설명
- CurvedAnimation: CurvedAnimation 객체를 사용하여 애니메이션에 곡선을 적용합니다. curve 속성으로 애니메이션의 속도 변화를 설정할 수 있습니다.
- FadeTransition: FadeTransition 위젯을 사용하여 페이드 인/아웃 애니메이션을 구현합니다. opacity 속성에 애니메이션 객체를 설정합니다.
결론
이번 강의를 통해 Flutter에서 기본 애니메이션을 구현하는 방법을 배웠습니다. AnimationController와 Animation 객체를 사용하여 애니메이션을 제어하고, Tween과 CurvedAnimation을 통해 다양한 애니메이션 효과를 구현할 수 있었습니다. 실습을 통해 애니메이션의 기본 개념을 이해하고 실제 애플리케이션에 적용해 보았습니다. 다음 강의에서는 더 복잡한 애니메이션과 애니메이션 패키지를 사용하는 방법을 알아보겠습니다. Flutter의 강력한 애니메이션 기능을 활용하여 더욱 생동감 있는 애플리케이션을 만들어 보세요!
댓글