[플러터] 심플 애니메이션

Animated... 위젯을 쓰지 않고, 애니메이션을 사용하기 귀찮지만, 막상 하고 보면 마땅히 쓸 곳은 없고, 애매하다.

 

 

 

Container

Stateful Widget에서 SingleTickerProviderStateMixin 호출

class _MainPageState extends State<MainPage>  with SingleTickerProviderStateMixin

 

컨트롤러와 애니메이션 변수 생성

late AnimationController animationController;

late Animation animation;

 

그리고 초기화,

@override

void initState() {

  // TODO: implement initState

  super.initState();

  animationController = AnimationController(

    vsync: this,

    duration: Duration(seconds: 1),

  );

  animation = Tween(begin: 0.0, end: 1.0).animate(animationController)

    ..addListener(() {

      setState(() {});

    });

}

 

Button이나 GuestureDetector 등에서, 컨트롤러 사용

onTap: () {

  print('clicked');

  animationController.forward();

},

onDoubleTap: () {

  print('double clicked');

  animationController.reverse();

},

 

 

Page Transition #1 GetX

Get 패키지 호출

import 'package:get/get.dart';

 

Get.to 로 Routing 할때 transition 사용. 개간단. 퀄리티도 굿.

onPressed: () {

  Get.to(

    () => SecondPage(),

    transition: Transition.circularReveal,

    duration: Duration(seconds: 1),

  );

},

 

 

Page Transition #2 PageRouteBuilder

PageRouteBuilder 메소드 생성 개귀찮. 작성은 어려웠을지 모르나, 퀄리티는 담보할 수 없음. 그래서 인터넷에서 남의 코드 컨닝.

Route<Object?> _createRoute() {

  return PageRouteBuilder(

    pageBuilder: (context, animation, secondaryAnimation) =>

        const SecondPage(),

    transitionsBuilder: (context, animation, secondaryAnimation, child) {

      return AnimatedBuilder(

        animation: animationController,

        builder: (context, _) {

          return Transform(

            alignment: FractionalOffset.center,

            transform: Matrix4.identity()

              ..setEntry(3, 2, 0.002)

              ..rotateX(pi * animation.value * 2),

            // ..rotateY(3.14 * animation.value * 2),

            child: child,

          );

        },

      );

    },

  );

}

 

Navigator로 사용, push의 argument로 위의 메쏘드를 작성해도 무방.

onPressed: () {

  Navigator.of(context).push(_createRoute());

},

 

 

끝.