상세 컨텐츠

본문 제목

Flutter 고급 애니메이션 패턴

공부/Flutter

by micalcomanie 2025. 1. 2. 16:29

본문

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

관련글 더보기

티스토리툴바