Flutter中交织动画

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (context) => HomePage(),
      },
      initialRoute: "/",
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late CurvedAnimation _curvedAnimation;
  late Animation _sizeTween;
  late Animation _opacityTween;
  late Animation _transformTween;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(
      lowerBound: 0.0,
        upperBound:1.0,
        vsync: this,
        duration: const Duration(seconds: 1),
        reverseDuration: const Duration(seconds: 1));
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _curvedAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _sizeTween = Tween(begin: 50.0, end: 100.0).animate(_curvedAnimation);
    _opacityTween = Tween(begin: 0.0, end: 1.0).animate(_curvedAnimation);
    _transformTween = Tween(begin: 0.0, end: pi * 2).animate(_curvedAnimation);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ts"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:  <Widget>[
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return  Opacity(
                  opacity: 1.0 - _opacityTween.value,
                  child: Transform(
                    transform: Matrix4.rotationZ(_transformTween.value),
                    alignment: Alignment.center,
                    child: Container(
                      width: _sizeTween.value,
                      height: _sizeTween.value,
                      color: Colors.red,
                    ),
                  ),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.play_circle),
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop();
          } else if (_controller.status == AnimationStatus.forward){
            _controller.forward();
          } else if (_controller.status == AnimationStatus.reverse) {
            _controller.reverse();
          } else if (_controller.status == AnimationStatus.dismissed) {
            _controller.forward();
          } else if (_controller.status == AnimationStatus.completed) {
            _controller.reverse();
          }
        },
      ),
    );
  }
}