Flutter - Animation Tween [9]

1. Tween

 

 

 

기본 앱설정

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 = Tween<double>(begin: 0, end: 300).animate(controller)
    ..addListener(() {
      setState(() {
        print(animation.value);
      });
    });
    controller.forward();
  }

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

Tween: begin 부터 end 까지 값을 변화시킨다.

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

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

 

 

 

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: animation.value,
          width: animation.value,
          child: FlutterLogo(),
        ),
      ),
    );
  }

animation.value: 값이 지정한 밤위에서 바뀐다.

 

 

 

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

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