import 'package:flutter/material.dart';
import 'dart:ui';

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

  @override
  State<CustomerAnimationView> createState() => _CustomerAnimationViewState();
}

class _CustomerAnimationViewState extends State<CustomerAnimationView>
    with TickerProviderStateMixin {
  Animation<double>? alphaAnim;
  Animation<double>? colorAlphaAnim;

  AnimationController? alphaController;
  AnimationController? colorController;
  List dataSource = [];

  @override
  void initState() {
    alphaController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    colorController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));

    this.alphaAnim = Tween<double>(begin: 0, end: 100).animate(this.alphaController!);
    // this.alphaAnim = Tween<double>(begin: 300, end: 100).animate(this.alphaController!);
    this.colorAlphaAnim = Tween<double>(begin: 0, end: 150).animate(this.colorController!);

    this.alphaController!.forward();
    this.colorController!.forward();

    super.initState();
  }

  @override
  dispose() {
    this.alphaController?.reverse();
    this.colorController?.reverse();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: AnimatedBuilder(
          animation: this.alphaController!,
          builder: (_, __) {
            return Container(
              color: Colors.black.withAlpha(
                  this.colorAlphaAnim!.value.toInt()),
              child: Stack(
                children: [
                  Container(
                    // padding: EdgeInsets.only(top: 100,bottom: 100,left: 10,right: 10),
                    margin: EdgeInsets.only(top: this.alphaAnim!.value.toDouble(),bottom: 100,left: 10,right: 10),
                    height:  100,//this.alphaAnim!.value.toDouble(),
                    // width: 300,
                    color: Colors.blue,
                    child: Text("123"),
                  )
                ],
              )
            );
          }),
    );
  }
}

如果單個(gè)動(dòng)畫 可以

with SingleTickerProviderStateMixin