본문 바로가기
공부/Flutter

Flutter 고급 애니메이션 패턴

by micalcomanie 2025. 1. 2.
728x90
반응형
SMALL
 

Flutter는 직관적이고 강력한 애니메이션 기능을 제공하여 복잡한 사용자 경험(UX)을 쉽게 구현할 수 있습니다.
이 글에서는 Flutter에서 고급 애니메이션 패턴과 이를 활용한 사례를 소개합니다.

1. 애니메이션 패턴 개요

Flutter는 기본 애니메이션 API 외에도 다양한 패키지와 패턴을 제공하여 더 정교한 애니메이션을 구현할 수 있습니다.

1.1 기본 애니메이션 도구

  • AnimationController: 애니메이션의 수명과 속도를 제어합니다.
  • Tween: 애니메이션의 시작과 끝 값을 정의합니다.
  • Curves: 애니메이션의 속도 변화를 지정합니다.

1.2 고급 애니메이션 도구

  • Hero 애니메이션: 화면 간 이동 시 자연스러운 전환 효과.
  • CustomPainter: 맞춤형 그래픽 애니메이션 구현.
  • AnimatedList: 목록에 애니메이션을 추가하여 동적 UI 구현.

2. Hero 애니메이션 심화

Hero 애니메이션은 두 화면 간 동일한 위젯을 연결하여 전환 효과를 제공합니다.

예제 코드

import 'package:flutter/material.dart';
}
 
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Page')),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Hero(
tag: 'hero-example',
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}
 
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Page')),
body: Center(
child: Hero(
tag: 'hero-example',
child: Container(
width: 300,
height: 300,
color: Colors.blue,
),
),
),
);
}
}

3. 커스텀 애니메이션 패턴

3.1 CustomPainter 활용

CustomPainter를 사용하여 복잡한 애니메이션을 구현합니다.

예제 코드:

import 'package:flutter/material.dart';
import 'dart:math';
 
class CircularAnimationExample extends StatefulWidget {
@override
_CircularAnimationExampleState createState() => _CircularAnimationExampleState();
}
 
class _CircularAnimationExampleState extends State<CircularAnimationExample> with SingleTickerProviderStateMixin {
late AnimationController _controller;
 
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..repeat();
}
 
@override
void dispose() {
_controller.dispose();
super.dispose();
}
 
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomPaint(
painter: CircularPainter(_controller),
size: Size(200, 200),
),
),
);
}
}
 
class CircularPainter extends CustomPainter {
final Animation<double> animation;
 
CircularPainter(this.animation) : super(repaint: animation);
 
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..strokeWidth = 4
..style = PaintingStyle.stroke;
 
final radius = size.width / 2;
final progress = animation.value * 2 * pi;
 
canvas.drawArc(
Rect.fromCircle(center: Offset(radius, radius), radius: radius),
0,
progress,
false,
paint,
);
}
 
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}

4. 애니메이션 조합과 시퀀싱

4.1 Staggered Animation

애니메이션의 시작 시점을 순차적으로 설정합니다.

예제 코드:

class StaggeredAnimationExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: StaggeredAnimation(),
);
}
}
 
class StaggeredAnimation extends StatefulWidget {
@override
_StaggeredAnimationState createState() => _StaggeredAnimationState();
}
 
class _StaggeredAnimationState extends State<StaggeredAnimation> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _opacityAnimation;
late Animation<double> _sizeAnimation;
 
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
 
_opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.easeIn)),
);
 
_sizeAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
CurvedAnimation(parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.easeOut)),
);
 
_controller.forward();
}
 
@override
void dispose() {
_controller.dispose();
super.dispose();
}
 
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Opacity(
opacity: _opacityAnimation.value,
child: Container(
width: _sizeAnimation.value,
height: _sizeAnimation.value,
color: Colors.blue,
),
);
},
),
);
}
}

5. 결론

Flutter의 고급 애니메이션 패턴을 활용하면 독창적이고 몰입감 있는 사용자 경험을 제공할 수 있습니다. 이번 글에서 소개한 패턴들을 기반으로 다양한 애니메이션을 시도해 보세요. 다음 글에서는 애니메이션을 활용한 사용자 인터랙션 최적화 방법을 다룰 예정입니다.

참고 자료

뭔가 쓰는 중…



728x90
반응형
LIST
저작자표시 비영리 동일조건 (새창열림)

'공부 > Flutter' 카테고리의 다른 글

제스처와 애니메이션 결합하기  (0) 2025.01.03
버튼 클릭 시 색상 변화 애니메이션 구현하기  (2) 2025.01.03
Flutter UI 디자인 패턴  (0) 2025.01.01
클라우드 파이어스토어를 활용한 고급 데이터 관리 기법  (0) 2025.01.01
Flutter와 Firebase 통합 가이드  (0) 2025.01.01

관련글

티스토리툴바