对 Flutter 动画进行排序

Question

我正在构建一个语言应用程序，当学生学习一个新单词时，新单词中的每个音节都会重复 3 次。我有三个进度条向学生指示他们需要等多长时间才能进行下一次重复。

每个进度条的持续时间为 3 秒。当第一个进度条完成时，它应该触发第二个进度条，当第二个完成时它应该触发第三个进度条。

当第三条完成时，它应该重置所有进度条并重新开始该过程。

这里的关键是对每个进度条的动画进行排序，以便它们可以在完成时调用函数。这是我的问题的开始。

我不知道如何让进度条按顺序制作动画并在它们完成时调用函数。

如何通过颤振实现这一目标？我已经用 KivyMD 构建了这个应用程序，但现在我必须用 Flutter 重新构建它。然而，KivyMD 动画很简单，但 Flutter 动画很复杂。

import 'package:blog/screens/widgets/nav_menu.dart';
import 'package:flutter/material.dart';

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

  @override
  _AnimationTest3State createState() => _AnimationTest3State();
}

class _AnimationTest3State extends State<AnimationTest3>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  double progress1 = 0;
  double progress2 = 0;
  double progress3 = 0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(child: NavMenu()),
      appBar: AppBar(title: Text("Animation Test 3"), elevation: 0),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(children: [
            Container(
                height: constraints.maxHeight * 0.3, color: Colors.indigo[50]),
            Container(height: constraints.maxHeight * 0.4, color: Colors.white),
            Container(
              height: constraints.maxHeight * 0.3,
              color: Colors.indigo[50],
              child: LayoutBuilder(
                builder: (context, constraints) {
                  return Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // PROGRESS BAR #1
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 2.0),
                        height: 4,
                        width: constraints.maxWidth * 1 / 3,
                        child: LinearProgressIndicator(value: progress1),
                      ),
                      Container(
                        // PROGRESS BAR #2
                        padding: EdgeInsets.symmetric(horizontal: 2.0),
                        height: 4,
                        width: constraints.maxWidth * 1 / 3,
                        child: LinearProgressIndicator(value: progress2),
                      ),
                      Container(
                        // PROGRESS BAR #3
                        padding: EdgeInsets.symmetric(horizontal: 2.0),
                        height: 4,
                        width: constraints.maxWidth * 1 / 3,
                        child: LinearProgressIndicator(value: progress3),
                      ),
                    ],
                  );
                },
              ),
            )
          ]);
        },
      ),
    );
  }
}

Answer 1

查看交错动画的参考staggered animation，您的情况应该是：

controller = AnimationController(
        duration: const Duration(milliseconds: 9000), vsync: this);

        progress1 = Tween<double>(
          begin: 0.0,
          end: 0.3,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.0,
              0.33,
              curve: Curves.ease,
            ),
          ),
        ),

        progress2 = Tween<double>(
          begin: 0.0,
          end: 0.3,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.33,
              0.66,
              curve: Curves.ease,
            ),
          ),
        ),

        progress3 = Tween<double>(
          begin: 0.0,
          end: 0.3,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.66,
              1.0,
              curve: Curves.ease,
            ),
          ),
        ),