Flutter 动画详解系列——显式动画

class _RotationTransitionPageState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  /**
   * 1、创建AnimationController
   * 2、实例化AnimationController的类
   * 3、配置vsync，将SingleTickerProviderStateMixin添加到类定义中
   * 4、创建完AnimationController后，开启动画
   */

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
// 控制动画的类
    _animationController = AnimationController(
        // 防止动画不在当前屏幕时消耗不必要资源
        vsync: this,
        duration: const Duration(seconds: 1));
    _animationController.addListener(() {
      print(_animationController.value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('RotationTransition'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            RotationTransition(
              turns: _animationController,
              child: InkWell(
                onTap: () {
                  // _animationController 启动动画
                  // _animationController.forward();
                  // _animationController.value 当前动画的值
                  // 0.5代表 180弧度
                  if(_animationController.value==0.5){
                      _animationController.animateTo(0);
                  }else{
                    _animationController.animateTo(0.5);
                  }

                },
                child: Image.asset("assets/images/1.png"),
              ),
            )
          ],
        ),
      ),
    );

class _FadeTransitionPageState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  /**
   * 1、创建AnimationController
   * 2、实例化AnimationController的类
   * 3、配置vsync，将SingleTickerProviderStateMixin添加到类定义中
   * 4、创建完AnimationController后，开启动画
   */

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
// 控制动画的类
    _animationController = AnimationController(
        // 防止动画不在当前屏幕时消耗不必要资源
        vsync: this,
        duration: const Duration(seconds: 1),
        // 动画执行最小值
        lowerBound: 0.5,
        // 动画执行最大值
        upperBound: 1
        );
    _animationController.addListener(() {
      print(_animationController.value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('RotationTransition'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            FadeTransition(
              opacity: _animationController,
              child: Image.asset("assets/images/1.png"),
            ),
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 正向一次
              _animationController.forward();
            }, child: Text("启动动画--forward")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 倒序一次
              _animationController.reverse();
            }, child: Text("启动动画--reverse")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 停止/取消
              _animationController.stop();
            }, child: Text("停止/取消")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 重置动画到初始状态
              _animationController.reset();
            }, child: Text("重置")),
          ],
        ),
      ),
    );

class _ScaleTransitionPageState extends State with SingleTickerProviderStateMixin {

  late AnimationController _animationController;

  /**
   * 1、创建AnimationController
   * 2、实例化AnimationController的类
   * 3、配置vsync，将SingleTickerProviderStateMixin添加到类定义中
   * 4、创建完AnimationController后，开启动画
   */

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
// 控制动画的类
    _animationController = AnimationController(
        // 防止动画不在当前屏幕时消耗不必要资源
        vsync: this,
        duration: const Duration(seconds: 1),
        // 动画执行最小值
        lowerBound: 0.5,
        // 动画执行最大值
        upperBound: 1
        );
    _animationController.addListener(() {
      print(_animationController.value);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('ScaleTransition'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            ScaleTransition(
              scale: _animationController,
              child: Image.asset("assets/images/1.png"),
            ),
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 正向一次
              _animationController.forward();
            }, child: Text("启动动画--forward")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 倒序一次
              _animationController.reverse();
            }, child: Text("启动动画--reverse")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 停止/取消
              _animationController.stop();
            }, child: Text("停止/取消")),
            ElevatedButton(onPressed: () {
              // _animationController控制动画
              // 重置动画到初始状态
              _animationController.reset();
            }, child: Text("重置")),
          ],
        ),
      ),
    );

class _SlideTransitionPageState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  /**
   * 1、创建AnimationController
   * 2、实例化AnimationController的类
   * 3、配置vsync，将SingleTickerProviderStateMixin添加到类定义中
   * 4、创建完AnimationController后，开启动画
   */

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
// 控制动画的类
    _animationController = AnimationController(
      // 防止动画不在当前屏幕时消耗不必要资源
      vsync: this,
      duration: const Duration(seconds: 1),
      // 动画执行最小值
      // lowerBound: 0.5,
      // // 动画执行最大值
      // upperBound: 1
    );
    _animationController.addListener(() {
      print(_animationController.value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('SlideTransition'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            SlideTransition(
              position: _animationController.drive(
                  Tween(begin: const Offset(-1, 0), end: const Offset(1, 0))),
              child: Image.asset("assets/images/1.png"),
            ),
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
                onPressed: () {
                  // _animationController控制动画
                  // 正向一次
                  _animationController.forward();
                },
                child: Text("启动动画--forward")),
            ElevatedButton(
                onPressed: () {
                  // _animationController控制动画
                  // 倒序一次
                  _animationController.reverse();
                },
                child: Text("启动动画--reverse")),
            ElevatedButton(
                onPressed: () {
                  // _animationController控制动画
                  // 停止/取消
                  _animationController.stop();
                },
                child: Text("停止/取消")),
            ElevatedButton(
                onPressed: () {
                  // _animationController控制动画
                  // 重置动画到初始状态
                  _animationController.reset();
                },
                child: Text("重置")),
          ],
        ),
      ),
    );