アニメーションの学習

완전한 애니메이션 
= _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);
  이런식으로 만드는 것도 가능하다고 함.

final curve = CurvedAnimation(parent: controller, curve: Curves.bounceOut);

2.ビューをアニメーション化

addListerとsetStateの使用

animation = Tween<double>(begin: 0, end: 300).animate(controller)
  ..addListener(() {
      setState(() {
         // The state that has changed here is the animation object’s value.
      });
    });

import 'package:flutter/material.dart';

class NewPage extends StatefulWidget {
  const NewPage({Key? key}) : super(key: key);

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

class _NewPageState extends State<NewPage> with SingleTickerProviderStateMixin {

  late Animation<double> animation;
  late AnimationController controller;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1000));
    final curve = CurvedAnimation(parent: controller, curve: Curves.bounceOut);
    animation = Tween<double>(begin: 0,end: 300).animate(curve)
    ..addListener(() {
      setState(() {

      });
    });
// 나중에 탭했을 때 실행되도록 하고싶으면 아래 코드를 다른 곳에 넣어주면 되겠지?
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.green,
        height: animation.value,
        width: animation.value,
      ),
    );
  }
}

AnimatedWidgetの使用

FadeTransition不透明度の調整

AnimatedBuilderの使用

このような方法もあります.
https://papabee.tistory.com/141
詳しくはサイトを参照してください.上記の方法と似ていますが、classを定義していなくても使用できます.

3)Implicitアニメーションをそのまま使用する。

一番簡単です.状態管理を利用して値を変えるだけで、自然なアニメーションが実現できます.次に、暗黙的なアニメーションコンポーネントのリストを示します.