Flutter의 애니메이션 라이브러리(Animations Library) 사용법

Flutter는 다양한 애니메이션을 구현할 수 있는 강력한 프레임워크를 제공합니다. 그러나 복잡한 애니메이션을 일일이 구현하기에는 많은 시간과 노력이 필요합니다. 이를 해결하기 위해 Flutter 애니메이션 라이브러리인 flutter_animations는 다양한 사전 정의된 애니메이션을 제공하여 개발자의 작업을 더욱 간편하게 만듭니다. 이번 글에서는 Flutter의 애니메이션 라이브러리를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 애니메이션 라이브러리 설치

애니메이션 라이브러리를 사용하기 위해서는 flutter_animations 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  animations: ^2.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. 기본 사용법

flutter_animations 라이브러리는 다양한 애니메이션 위젯을 제공합니다. 가장 기본적인 애니메이션 중 하나는 FadeScaleTransition입니다. 다음은 FadeScaleTransition을 사용하는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:animations/animations.dart';

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

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

class FadeScaleTransitionExample extends StatefulWidget {
  @override
  _FadeScaleTransitionExampleState createState() => _FadeScaleTransitionExampleState();
}

class _FadeScaleTransitionExampleState extends State<FadeScaleTransitionExample> {
  bool _showSecondPage = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Fade Scale Transition Example')),
      body: Center(
        child: OpenContainer(
          transitionType: ContainerTransitionType.fade,
          transitionDuration: Duration(seconds: 1),
          closedBuilder: (context, action) {
            return ElevatedButton(
              onPressed: action,
              child: Text('Open Second Page'),
            );
          },
          openBuilder: (context, action) {
            return SecondPage();
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

 

 

위 코드는 OpenContainer 위젯을 사용하여 페이드와 스케일 애니메이션을 구현한 예제입니다. 버튼을 클릭하면 두 번째 페이지가 부드럽게 전환됩니다.

 

 

728x90

 

3. 페이지 전환 애니메이션

flutter_animations 라이브러리는 페이지 전환 애니메이션도 쉽게 구현할 수 있습니다. PageTransitionSwitcher를 사용하여 다양한 전환 효과를 적용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:animations/animations.dart';

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

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

class PageTransitionSwitcherExample extends StatefulWidget {
  @override
  _PageTransitionSwitcherExampleState createState() => _PageTransitionSwitcherExampleState();
}

class _PageTransitionSwitcherExampleState extends State<PageTransitionSwitcherExample> {
  bool _showFirstPage = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page Transition Switcher Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showFirstPage = !_showFirstPage;
                });
              },
              child: Text('Switch Page'),
            ),
            SizedBox(height: 20),
            PageTransitionSwitcher(
              duration: Duration(seconds: 1),
              transitionBuilder: (child, primaryAnimation, secondaryAnimation) {
                return FadeThroughTransition(
                  animation: primaryAnimation,
                  secondaryAnimation: secondaryAnimation,
                  child: child,
                );
              },
              child: _showFirstPage ? FirstPage() : SecondPage(),
            ),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey('FirstPage'),
      color: Colors.blue,
      width: 200,
      height: 200,
      child: Center(
        child: Text('First Page', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey('SecondPage'),
      color: Colors.red,
      width: 200,
      height: 200,
      child: Center(
        child: Text('Second Page', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

 

위 코드는 PageTransitionSwitcher와 FadeThroughTransition을 사용하여 페이지 전환 애니메이션을 구현한 예제입니다. 버튼을 클릭하면 두 페이지가 페이드 애니메이션과 함께 전환됩니다.

 

반응형

 

4. 공유 축 전환 애니메이션

공유 축 전환 애니메이션은 두 페이지 간의 전환 시 축을 중심으로 회전하는 애니메이션을 제공합니다. 이를 통해 페이지 간의 관계를 강조할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:animations/animations.dart';

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

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

class SharedAxisTransitionExample extends StatefulWidget {
  @override
  _SharedAxisTransitionExampleState createState() => _SharedAxisTransitionExampleState();
}

class _SharedAxisTransitionExampleState extends State<SharedAxisTransitionExample> {
  bool _showFirstPage = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Shared Axis Transition Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showFirstPage = !_showFirstPage;
                });
              },
              child: Text('Switch Page'),
            ),
            SizedBox(height: 20),
            PageTransitionSwitcher(
              duration: Duration(seconds: 1),
              transitionBuilder: (child, primaryAnimation, secondaryAnimation) {
                return SharedAxisTransition(
                  animation: primaryAnimation,
                  secondaryAnimation: secondaryAnimation,
                  transitionType: SharedAxisTransitionType.horizontal,
                  child: child,
                );
              },
              child: _showFirstPage ? FirstPage() : SecondPage(),
            ),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey('FirstPage'),
      color: Colors.blue,
      width: 200,
      height: 200,
      child: Center(
        child: Text('First Page', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey('SecondPage'),
      color: Colors.red,
      width: 200,
      height: 200,
      child: Center(
        child: Text('Second Page', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

 

위 코드는 SharedAxisTransition을 사용하여 페이지 전환 시 축을 중심으로 회전하는 애니메이션을 구현한 예제입니다. 버튼을 클릭하면 두 페이지가 수평 축을 중심으로 회전하며 전환됩니다.

5. 드래그 가능한 페이지 전환 애니메이션

flutter_animations 라이브러리는 드래그 가능한 페이지 전환 애니메이션도 제공합니다. 이를 통해 사용자가 페이지를 드래그하여 전환할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:animations/animations.dart';

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

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

class DraggableTransitionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Draggable Transition Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: Text('Open Second Page'),
        ),
      ),
    );
  }

  Route _createRoute() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      },
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

 

위 코드는 드래그 가능한 페이지 전환 애니메이션을 구현한 예제입니다. SlideTransition을 사용하여 페이지가 드래그로 전환되는 효과를 제공합니다.

결론

Flutter의 애니메이션 라이브러리 flutter_animations를 사용하면 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 기본적인 전환 애니메이션부터 커스텀 애니메이션, 복합 애니메이션까지 다양한 방법을 통해 앱의 사용자 경험을 크게 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매끄럽고 다양한 애니메이션을 구현해보세요. 애니메이션을 통해 앱의 인터페이스를 더욱 매력적으로 만들 수 있습니다.