Flutter - Animation CurvedAnimation[10]

1. CurvedAnimation

 

 

 

 

기본 앱설정

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

StatefulWidget 생성

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

 

위 Widget의 State 생성

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  Animation<double> animation;
  AnimationController controller;

SingleTickerProviderStateMixin: AnimationController를 만들때 sync용으로 사용된다.

 

 

 

 

Widget이 만들어질 LifeCycle을 정의한다.

@override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn)
    ..addListener(() {
      setState(() {
        print(animation.value);
      });
    });
    controller.forward();
  }

AnimationController: Animation 길이를 정하고, Sync할 객체를 지정한다.(SingleTickerProviderStateMixin)

CurvedAnimation: curve옵션에 따라 값이 바뀌는 패턴을 만들 수 있다.

..addListener: animationListner.addListener와 같다. 값이 바뀔때마다 event를 받을 수 있다.

controller.forward(): Animation을 실행 시킨다.

 

 

 

실재 변화할 Scaffold를 정의한다.

@override
  Widget build(BuildContext context) {
    var _sizeTween = Tween<double>(begin: 0, end: 300);
    var _opacity = Tween<double>(begin: 0.1, end: 1);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Opacity(
          opacity: _opacity.evaluate(animation),
          child: Container(
            height: _sizeTween.evaluate(animation),
            width: _sizeTween.evaluate(animation),
            child: FlutterLogo(),
          ),
        ),
      ),
    );
  }

_sizeTween: animation이 바뀔동안 변화할 크기의 범위를 지정한다.

_opacity: animation이 바뀔동안 변화할 투명도의 범위를 지정한다.

evaluate: 값의 범위동안 변화 시킬 animation을 지정한다.

 

 

위젯이 사라질 때 controller로 지운다.

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