[flutter] 애니메이션을 사용하여 인트로 및 아웃트로 효과 구현하기

11 Dec 2023

flutter

앱 또는 게임에 애니메이션을 추가하면 사용자 경험이 향상됩니다. Flutter에서는 간단한 코드로 다양한 애니메이션 효과를 구현할 수 있습니다. 인트로 및 아웃트로 화면에 효과를 추가하여 앱의 시작과 종료를 눈에 띄게 만들 수 있습니다.

앱 시작 시 애니메이션 효과 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeIn,
    );
    _animationController.forward();
    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen(),
          ),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Container(
        color: Colors.white,
        child: FlutterLogo(size: 200.0),
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the app!'),
      ),
    );
  }
}

앱 종료 시 애니메이션 효과 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExitScreen(),
    );
  }
}

class ExitScreen extends StatefulWidget {
  @override
  _ExitScreenState createState() => _ExitScreenState();
}

class _ExitScreenState extends State<ExitScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation =
        CurvedAnimation(parent: _animationController, curve: Curves.easeOut);
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Container(
        color: Colors.white,
        child: Center(
          child: Text('Exiting the app...'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

위의 예시 코드에서는 Flutter의 AnimationController와 CurvedAnimation을 사용하여 인트로 및 아웃트로 화면에 효과를 추가하는 방법을 보여줍니다.

더 많은 애니메이션 효과 및 옵션을 알아보려면 Flutter 애니메이션 가이드를 참조하세요.