Tween은 Flutter 애니메이션에서 중요한 역할을 하는 개념으로, 애니메이션의 값 범위를 정의합니다. Tween을 사용하면 애니메이션이 시작할 때와 끝날 때의 값을 설정하고, 그 사이의 모든 값을 자동으로 계산할 수 있습니다. 이 값들은 AnimationController와 함께 사용되어 애니메이션의 변화를 부드럽게 표현합니다.
1. Tween의 기본 개념
Tween은 애니메이션의 시작값과 끝값을 정의하는데 사용됩니다. 예를 들어, 애니메이션이 0에서 100으로 증가하는 값을 가진다면, Tween은 이 두 값 사이의 모든 값을 계산하여 애니메이션을 부드럽게 변환합니다.
2. Tween의 주요 구성 요소
begin: 애니메이션의 시작 값입니다.end: 애니메이션의 끝 값입니다.
이 두 값 사이의 중간 값을 자동으로 계산하여 애니메이션을 생성합니다.
3. Tween의 사용 예
3.1. 기본 사용법
가장 기본적인 Tween 사용법은 AnimationController와 함께 사용하여 애니메이션을 구현하는 것입니다.
예제 코드:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TweenDemo(),
);
}
}
class TweenDemo extends StatefulWidget {
@override
_TweenDemoState createState() => _TweenDemoState();
}
class _TweenDemoState extends State<TweenDemo> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<double>(begin: 0.0, end: 300.0).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tween Demo')),
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value,
height: _animation.value,
color: Colors.blue,
);
},
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}이 예제에서 Tween<double>(begin: 0.0, end: 300.0)은 애니메이션이 0에서 300까지의 값을 갖는 것을 의미합니다. AnimationController가 애니메이션을 제어하고, AnimatedBuilder가 애니메이션 값을 기반으로 위젯을 업데이트합니다.
3.2. 다양한 Tween 타입
Tween은 다양한 데이터 타입을 지원합니다. 여기서는 몇 가지 예를 소개합니다:
Tween<int>: 정수 값의 애니메이션.Tween<Color>: 색상 애니메이션.Tween<Offset>: 위치 이동 애니메이션.
색상 Tween 예제:
class ColorTweenDemo extends StatefulWidget {
@override
_ColorTweenDemoState createState() => _ColorTweenDemoState();
}
class _ColorTweenDemoState extends State<ColorTweenDemo> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Color?> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Color Tween Demo')),
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: 100,
height: 100,
color: _animation.value,
);
},
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}위치 이동 Tween 예제:
class OffsetTweenDemo extends StatefulWidget {
@override
_OffsetTweenDemoState createState() => _OffsetTweenDemoState();
}
class _OffsetTweenDemoState extends State<OffsetTweenDemo> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Offset> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<Offset>(begin: Offset(0.0, 0.0), end: Offset(1.0, 0.0)).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Offset Tween Demo')),
body: Center(
child: SlideTransition(
position: _animation,
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}4. Tween의 고급 사용법
4.1. Tween Sequence
TweenSequence를 사용하면 애니메이션 값의 시퀀스를 정의할 수 있습니다. 애니메이션이 복잡한 단계별로 진행될 때 유용합니다.
예제 코드:
class TweenSequenceDemo extends StatefulWidget {
@override
_TweenSequenceDemoState createState() => _TweenSequenceDemoState();
}
class _TweenSequenceDemoState extends State<TweenSequenceDemo> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 4),
vsync: this,
)..repeat();
_animation = TweenSequence<double>(
[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 100.0),
weight: 50,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 100.0, end: 0.0),
weight: 50,
),
],
).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tween Sequence Demo')),
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value,
height: _animation.value,
color: Colors.orange,
);
},
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}4.2. CurveTween
CurveTween을 사용하여 애니메이션에 곡선 형태의 변화를 줄 수 있습니다. 애니메이션이 선형적으로 진행되지 않고, 더 부드럽고 자연스러운 움직임을 제공합니다.
예제 코드:
class CurveTweenDemo extends StatefulWidget {
@override
_CurveTweenDemoState createState() => _CurveTweenDemoState();
}
class _CurveTweenDemoState extends State<CurveTweenDemo> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<double>(begin: 0.0, end: 300.0).chain(
CurveTween(curve: Curves.easeInOut),
).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CurveTween Demo')),
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value,
height: _animation.value,
color: Colors.purple,
);
},
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}요약
- Tween: 애니메이션의 시작과 끝 값 사이의 중간 값을 계산합니다.
- 기본 사용법:
Tween을 사용하여 애니메이션의 범위를 정의하고AnimationController와 함께 사용합니다. - 다양한 Tween 타입:
Tween<int>,Tween<Color>,