flutter - 为什么 Flutter 会使用多个 AnimationController？

Question

我试图创建多个动画。过了一会儿它很慢然后停止。如何使用多个 Widget 制作流畅的动画。我看看是否有任何不必要的重建或有多个侦听器，但没有这样的。如果我要用多个动画控制器制作一个复杂的动画，我做得好吗？我不知道如何做得更好。提前致谢。 https://mario-portfolio-9dc41.firebaseapp.com

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:marioportfolio/animated_text.dart';
import 'package:marioportfolio/constants/skills.dart';
import 'package:rive/rive.dart';

class Home extends HookConsumerWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          ...mySkills.map((skill) {
            final animx = useAnimationController(
              duration: const Duration(milliseconds: 4000),
            );
            final animy = useAnimationController(
                duration: const Duration(milliseconds: 1000));
            Timer(const Duration(milliseconds: 500), () async {
              Random().nextInt(10000);
              await Future.delayed(Duration(milliseconds: Random().nextInt(10000)));
              animx.forward();
              animy.forward();
            });


            animx.addStatusListener((status) {
              if (status == AnimationStatus.completed) {
                animx.repeat(reverse: true);
                // animx.reverse();
              } else if (status == AnimationStatus.dismissed) {

                animx.forward();
              }
            });
            animy.addStatusListener((status) {
              if (status == AnimationStatus.completed) {
                animy.repeat(reverse: true);
                // animy.reverse();
              } else if (status == AnimationStatus.dismissed) {
                animy.forward();
              }
            });

            return Center(
                child: AnimatedText(
                  skill: skill,
                  beginX: 0,
                  endX: -400,
                  beginY: 40,
                  endY: -40,
                  angle:  -Random().nextInt(90),
                  animationControllerY: animy,
                  animationControllerX: animx,
                ),
              );
          }),
          const SizedBox(
            height: 500.0,
            width: 500.0,
            child: RiveAnimation.asset(
              'assets/mariodev.riv',
              artboard: 'New Artboard',
              fit: BoxFit.contain,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.chat),
        onPressed: () {},
      ),
    );
  }
}

这里是文本小部件

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class AnimatedText extends HookConsumerWidget {
  final AnimationController animationControllerX;
  final AnimationController animationControllerY;
  final String skill;
  final int angle;
  final double beginX;
  final double endX;
  final double beginY;
  final double endY;

  const AnimatedText({required this.animationControllerX, required this.animationControllerY,
      required this.angle,
      required this.skill,
      required this.beginX,
      required this.endX,
      required this.beginY,
      required this.endY,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final offsetX = useAnimation(Tween(begin: beginX, end: endX)
        .animate(CurvedAnimation(parent: animationControllerX, curve: Curves.easeInOut)));
    final opacity = useAnimation(Tween(begin: 1.0, end: 0.0)
        .animate(CurvedAnimation(parent: animationControllerX, curve: Curves.easeInOut)));
    final offsetY = useAnimation(Tween(begin: beginY, end: endY)
        .animate(CurvedAnimation(parent: animationControllerY, curve: Curves.easeInOut)));

    return Transform.rotate(
      angle: -math.pi * angle / 180,
      child: Transform.translate(
        offset: Offset(offsetX, offsetY),
        child: Opacity(
          opacity: opacity,
          child: Text(
            skill,
            style: const TextStyle(fontSize: 30),
          ),
        ),
      ),
    );
  }
}