效果截图

很烦！！不会生成GIF😭

实现方式都是一些常用动画的组合，没什么技术含量（也可能是我没找到更好的实现方式）。

L1VzZXJzL2x1d2VuamluZy9MaWJyYXJ5L0FwcGxpY2F0aW9uIFN1cHBvcnQvaURpbmdUYWxrLzM2MjU2MTM3NThfdjIvSW1hZ2VGaWxlcy8xNjk0NTk0MTU3MjA5X0M4Rjg4NkNCLTVDNzktNDQ4Qy1BODcwLUE4MjNFODY1MTg1RS5wbmc=.png

L1VzZXJzL2x1d2VuamluZy9MaWJyYXJ5L0FwcGxpY2F0aW9uIFN1cHBvcnQvaURpbmdUYWxrLzM2MjU2MTM3NThfdjIvSW1hZ2VGaWxlcy8xNjk0NTk0MjA2MTMwX0M2QzUyRUJFLTIyRjQtNEM3RC04NDM4LUY4MkMxMDNCRkE2Mi5wbmc=.png

L1VzZXJzL2x1d2VuamluZy9MaWJyYXJ5L0FwcGxpY2F0aW9uIFN1cHBvcnQvaURpbmdUYWxrLzM2MjU2MTM3NThfdjIvSW1hZ2VGaWxlcy8xNjk0NTk0MjY2ODA3XzNFMDgyMzU0LUY1NkYtNDYyMy04M0Q1LTVERjJENzI0ODIxMi5wbmc=.png

代码实现

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  State<MyButtonWidget> createState() => _MyButtonWidgetState();
}

class _MyButtonWidgetState extends State<MyButtonWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(vsync: this)
    ..duration = const Duration(milliseconds: 500);
  late Animation<Alignment> _tween;
  late Animation<Alignment> _tween1;
  late Animation<Color?> _colorTween;
  late Animation<double> _opacityTween;
  late Animation<double> _rotationTween;
  late Animation<Color?> _colorTween1;
  late Animation<double> _opacityTween1;

  @override
  void initState() {
    // TODO: implement initState
    _tween = AlignmentTween(
            begin: const Alignment(-0.2, 0), end: const Alignment(-1.6, 1.6))
        .animate(_controller);
    _tween1 = AlignmentTween(
            begin: const Alignment(0.2, 0), end: const Alignment(1.6, -1.6))
        .animate(_controller);
    _colorTween =
        ColorTween(begin: Colors.green, end: Colors.black87).animate(_controller);
    _opacityTween = Tween<double>(begin: 0, end: 1).animate(_controller);
    _rotationTween = Tween<double>(begin: 0, end: 3 / 8).animate(_controller);
    _colorTween1 = ColorTween(begin: Colors.blueGrey, end: Colors.white)
        .animate(_controller);
    _opacityTween1 = Tween<double>(begin: 1, end: 0).animate(_controller);

    super.initState();
  }

  _onTap() {
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            _controller.reverse();
          },
          child: const Text('reSet'),
        ),
        const SizedBox(
          height: 100,
        ),
        GestureDetector(
          onTap: _onTap,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(30),
            child: AnimatedBuilder(
              animation: _colorTween,
              builder: (BuildContext context, Widget? child) {
                return Container(
                  width: 120,
                  height: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: _colorTween.value,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Stack(
                    children: [
                      _closeView(),
                      _upDoubleArrow(),
                    ],
                  ),
                );
              },
            ),
          ),
        ),
      ],
    );
  }

  // 底部的关闭样式
  _closeView() {
    return FadeTransition(
        opacity: _opacityTween,
        child: RotationTransition(
          turns: _rotationTween,
          child: SizedBox(
            width: 120,
            height: 60,
            child: AnimatedBuilder(
              animation: _colorTween1,
              builder: (BuildContext context, Widget? child) {
                return Icon(
                  Icons.close,
                  size: 35,
                  color: _colorTween1.value,
                );
              },
            ),
          ),
        ));
  }

  // 上层的 箭头
  _upDoubleArrow() {
    return Stack(
      children: [
        Container(
          width: 120,
          height: 60,
          // alignment: Alignment.bottomLeft,
          decoration: BoxDecoration(
            // color: Colors.amber,
            borderRadius: BorderRadius.circular(30),
          ),
          child: AlignTransition(
            alignment: _tween,
            child: FadeTransition(
              opacity: _opacityTween1,
              child: Image.asset(
                'assets/images/ArrowDownLeft.png',
                width: 30,
                height: 30,
                color: Colors.white,
              ),
            ),
          ),
        ),
        Container(
          // color: Colors.amber,
          width: 120,
          height: 60,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            // color: Colors.pink,
            borderRadius: BorderRadius.circular(30),
          ),
          child: AlignTransition(
            alignment: _tween1,
            child: RotatedBox(
              quarterTurns: 2,
              child: FadeTransition(
                opacity: _opacityTween1,
                child: Image.asset(
                  'assets/images/ArrowDownLeft.png',
                  width: 30,
                  height: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}