Repository: flutter
Issue: Statuses of multiple animations turn to "completed" at the same time when the app comes back from the background
Labels: framework,a: animation,has reproducible steps,P2,found in release: 3.7,found in release: 3.11,team-framework,triaged-framework

The reproducible code below has two widgets with animation using `SingleTickerProviderStateMixin` per each, and one of them has a delay before the animation starts. You can see the delay for a while after the app starts, but once the app is sent to the background (or the browser is minimised if it's a web app), the delay disappears as can be seen in the GIF.

![animation_issue](https://user-images.githubusercontent.com/20254485/113407412-307b1300-93e8-11eb-95ee-25543689a0f7.gif)

I guess this is a bug of Flutter because it occurs only with `forward()`; the delay persists as expected if you use `repeat()` instead of using `forward()` every time an animation is completed.

## Steps to Reproduce

<details>
  <summary>Reproducible code</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: const [
            Expanded(
              child: FadeInBox(color: Colors.green),
            ),
            Expanded(
              child: FadeInBox(
                color: Colors.lime,
                delay: Duration(milliseconds: 500),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class FadeInBox extends StatefulWidget {
  const FadeInBox({required this.color, this.delay = Duration.zero});

  final Color color;
  final Duration delay;

  @override
  _FadeInBoxState createState() => _FadeInBoxState();
}

class _FadeInBoxState extends State<FadeInBox>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1))
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              _controller.forward(from: 0.0);
            }
          });

    Future<void>.delayed(widget.delay, () => _controller.forward());
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, child) => Visibility(
        visible: _controller.value > 0.5,
        child: ColoredBox(color: widget.color),
      ),
    );
  }
}
```

</details>

1. Open the reproducible code above, and copy and paste it into DartPad.
2. Click on the RUN button.
3. Switch to another tab on the browser and then back to the DartPad tab.

**Expected results:**

The animation is resumed with the same value/status as when the app was sent to the background.

**Actual results:**

The animation status becomes "completed" right away when the app comes back to the foreground even if the animation actually had remaining duration at the point when the animation stopped.

<details>
  <summary>Logs</summary>

```
Analyzing animation_bug...
No issues found! (ran in 1.9s)
```

```
[✓] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19042.867], locale ja-JP)
    • Flutter version 2.0.3 at D:\tool\dev\flutter
    • Framework revision 4d7946a68d (2 weeks ago), 2021-03-18 17:24:33 -0700
    • Engine revision 3459eb2436
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at D:\tool\dev\Android\sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_SDK_ROOT = D:\tool\dev\Android\sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.4)
    • Visual Studio at D:\tool\dev\Microsoft\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.7.30517.126
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] VS Code, 64-bit edition (version 1.54.3)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.867]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 89.0.4389.114
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 89.0.774.57

• No issues found!
```

</details>