페이지 루트 전환 애니메이션

flutter 공식 문서: Animate a page route transition 번역

페이지 루트 전환 애니메이션

Material과 같은 디자인 언어는 루트(또는 화면) 간 전환시 표준 동작을 정의합니다. 그러나 때때로 화면 간의 사용자 정의 전환은 앱을 더 독특하게 만들 수 있습니다. 도움을 주기 위해, PageRouteBuilder는 Animation 객체를 제공합니다. 이 Animation은 Tween 및 Curve 객체와 함께 사용하여 전환 애니메이션을 사용자 정의할 수 있습니다. 이 레시피는 화면 하단에서 새 루트가 보이도록 애니메이션하며 화면 간 전환하는 방법을 보여줍니다.

사용자 정의 페이지 루트 전환을 생성하기 위해, 이 레시피는 다음 단계를 사용합니다:

1. PageRouteBuilder 설정
2. Tween 생성
3. AnimatedWidget 추가
4. CurveTween 사용
5. 두 Tween 결합

1. PageRouteBuilder 설정

먼저, PageRouteBuilder를 사용하여 Route를 생성합니다. PageRouteBuilder에는 루트의 컨텐츠를 빌드하는 pageBuilder와 루트의 전환을 빌드하는 transitionsBuilder라는 두 가지 콜백이 있습니다.

"Go!" 버튼이 있는 홈 루트와 "Page 2"라는 제목의 두 번째 루트를 생성하는 다음 예제를 확인하세요.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Page1(),
    ),
  );
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go!'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

2. Tween 생성

새 페이지가 화면 하단에서 애니메이션되어 들어오도록 하려면, Offset(0,1)에서 Offset(0, 0)(보통 Offset.zero 생성자를 사용하여 정의)로 애니메이션되어야 합니다. 이 경우, Offset은 FractionalTranslation 위젯에 대한 2D 벡터입니다.

transitionsBuilder 콜백에는 animation 파라미터가 있습니다. animation.drive(tween)을 사용하여 이 tween을 animation에 전달합니다. 그러면 SlideTransition 위젯에 제공할 수 있는 새로운 Animation<Offset>이 생성됩니다.

3. AnimatedWidget 사용

Flutter는 AnimatedWidget을 확장하는 위젯 세트를 가지고 있으며, 애니메이션 값이 변경될 때 자체적으로 다시 빌드됩니다. 예를 들어, SlideTransition은 Animation<Offset>을 사용하며 애니메이션 값이 변경될 때마다 자식을 변환합니다(사용하는 FractionalTranslation 위젯을 사용하여).

4. CurveTween 사용

Flutter는 시간에 따라 애니메이션 속도를 조정하는 다양한 이징 곡선을 제공합니다. Curves 클래스는 일반적으로 사용되는 곡선

세트를 미리 정의합니다. 예를 들어, Curves.easeOut은 애니메이션이 빠르게 시작하여 느리게 끝나게 만듭니다.

5. 두 Tween 결합

tween을 결합하기 위해 chain()을 사용합니다:

const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;

var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

그런 다음 animation.drive(tween)을 전달하여 이 tween을 사용합니다. 이는 SlideTransition 위젯에 제공할 수 있는 새로운 Animation<Offset>을 생성합니다.

5. 코드 예시

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Page1(),
    ),
  );
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go!'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}