Flutter Hero Animation
Flutter의 Hero 애니메이션은 두 개의 화면 사이에서 동일한 위젯이 부드럽게 전환되도록 만들어주는 애니메이션입니다. 이 기능은 화면 간에 시각적 연결을 제공하며, 사용자가 애플리케이션 내에서 더욱 직관적이고 매끄러운 탐색을 경험할 수 있도록 돕습니다.
1. Hero 애니메이션 개요
- Hero 애니메이션은 화면 전환 시 하나의 위젯이 원래 위치에서 새로운 위치로 매끄럽게 이동하는 효과를 제공합니다.
- 이 애니메이션은 두 화면에서 동일한
Hero태그를 가진 위젯을 기준으로 작동합니다. - 애니메이션은 두 화면 사이의 자연스러운 시각적 연속성을 보장합니다.
2. Hero 애니메이션의 기본 사용법
2.1. Hero 위젯 사용하기
Hero 애니메이션을 구현하려면 두 화면에서 동일한 Hero 태그를 가진 Hero 위젯을 사용해야 합니다. 다음은 기본적인 예제입니다.
예제 코드:
- 첫 번째 화면 (메인 화면):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hero Animation Example')),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailScreen()),
);
},
child: Hero(
tag: 'hero-tag',
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
}- 두 번째 화면 (세부 화면):
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Detail Screen')),
body: Center(
child: Hero(
tag: 'hero-tag',
child: Container(
width: 300,
height: 300,
color: Colors.red,
),
),
),
);
}
}이 예제에서 두 화면 모두 동일한 tag 값을 사용한 Hero 위젯이 있습니다. 이 tag는 애니메이션이 두 화면 사이에서 동일한 위젯을 인식할 수 있게 해줍니다. 사용자가 첫 번째 화면의 위젯을 탭하면, DetailScreen으로 이동하면서 Hero 애니메이션이 실행되어 위젯이 확대되는 효과를 볼 수 있습니다.
3. Hero 애니메이션의 주요 속성 및 옵션
tag:Hero위젯에 사용되는 고유 식별자입니다. 두 화면에서 동일한tag를 사용하여 애니메이션이 연결되도록 합니다.child: 애니메이션 효과를 적용할 위젯입니다.
4. Hero 애니메이션의 사용 시 주의사항
- 고유한 태그: 각
Hero애니메이션에 대해 고유한tag를 사용해야 합니다. 동일한tag를 가진Hero위젯이 두 화면 모두에 존재해야 합니다. - 위젯 크기와 위치:
Hero애니메이션의 시각적 효과는 애니메이션이 시작되는 화면과 끝나는 화면의 위젯 크기와 위치가 매끄럽게 연결될 때 최적화됩니다. 따라서 위젯의 크기와 위치를 조정하여 애니메이션 효과를 개선할 수 있습니다.
5. Hero 애니메이션 고급 사용법
5.1. 커스텀 전환
Hero 애니메이션은 기본적으로 애니메이션 전환을 처리하지만, 더 복잡한 애니메이션이나 커스텀 전환 효과를 원할 경우 PageRouteBuilder와 함께 사용할 수 있습니다.
예제 코드:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hero Animation Example')),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.of(context).push(_customPageRoute());
},
child: Hero(
tag: 'hero-tag',
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
),
);
}
PageRouteBuilder _customPageRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => DetailScreen(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.easeInOut;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
var offsetAnimation = animation.drive(tween);
return SlideTransition(position: offsetAnimation, child: child);
},
);
}
}
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Detail Screen')),
body: Center(
child: Hero(
tag: 'hero-tag',
child: Container(
width: 300,
height: 300,
color: Colors.red,
),
),
),
);
}
}이 예제에서는 PageRouteBuilder를 사용하여 화면 전환에 SlideTransition 애니메이션을 추가합니다. 이로 인해 화면이 슬라이드하며 전환되는 효과를 구현할 수 있습니다.
6. 요약
- Hero 애니메이션은 화면 전환 시 동일한 위젯이 부드럽게 이동하는 효과를 제공합니다.
Hero위젯을 사용하여 두 화면 사이의 시각적 연속성을 구현합니다.tag속성은 애니메이션을 연결하는 데 필수적이며, 두 화면에서 동일해야 합니다.- 고급 사용법에서는
PageRouteBuilder와 같은 도구를 사용하여 커스텀 애니메이션을 구현할 수 있습니다.
Hero 애니메이션은 앱의 네비게이션 경험을 향상시키고 사용자에게 더 매끄러운 전환 효과를 제공합니다.