Repository: flutter
Issue: Even very simple animations experience jittering and dropped frames.
Labels: engine,a: animation,c: performance,has reproducible steps,P2,team-framework,triaged-framework,found in release: 3.16,found in release: 3.19

### Steps to reproduce


I created a simple animation demo, and despite using minimal resources, I still encounter frame jitter issues. I captured the following image using GPUView, and it seems like there might be an issue with the timing of vsync triggering the rendering. Do you have any suggestions for further troubleshooting this issue?
![2024 01 25_ 481676857ca8cf23a0964a1d9e79b864](https://github.com/flutter/flutter/assets/11242422/c808d930-a709-4b10-8599-1861fe27dcc6)



### Expected results


Expected smooth scrolling of the horizontal line.

### Actual results

The horizontal scrolling line sometimes scrolls smoothly, and at other times, it jitters. The jittering is more noticeable after resizing the window.

### Code sample

<details open><summary>Code sample</summary>

```dart
class TestLineAnimationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestLineState();
  }
}

class _TestLineState extends State<TestLineAnimationWidget>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  List<Line> offsets = [];
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      lowerBound: 0,
      upperBound: 2 * 60 * 3600,
      duration: Duration(hours: 2),
      value: 0,
    );
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: RepaintBoundary(
            child: SizedBox(
              height: 200,
              child: AnimatedBuilder(
                animation: _controller,
                builder: (context, child) {
                  final value = _controller.value;

                  if (offsets.length < 10000) {
                    final r = (value * 3).toInt() % 255;
                    final g = 255 - r;
                    final b = r;
                    offsets.add(
                      Line(Color.fromARGB(0xFF, r, g, b), value,
                          Random().nextDouble()),
                    );
                  }

                  return CustomPaint(
                    painter: TestPainter(offsets, value),
                  );
                },
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class Line {
  Color color;
  double offsetMs;
  double heightOffset;
  Offset? cacheStart;
  Offset? cacheEnd;
  Line(this.color, this.offsetMs, this.heightOffset);
}

class TestPainter extends CustomPainter {
  final List<Line> offsets;
  final double value;
  TestPainter(this.offsets, this.value);
  static const int widthGap = 150;
  @override
  void paint(Canvas canvas, Size size) {
    if (offsets.isEmpty) {
      return;
    }
    int count = size.width ~/ widthGap;
    if (offsets.length > count) {
      // offsets.removeRange(0, offsets.length - count);
    }

    canvas.save();
    int avaible = offsets.length - (size.width ~/ widthGap);
    int startIndex = max(0, min(offsets.length, avaible));

    final baseOffset = offsets.first.offsetMs;

    final minOffsetX = value / 16 * 85;
    final maxOffsetX = minOffsetX + size.width;

    canvas.translate(-minOffsetX, 0);

    for (int i = 0; i < offsets.length; i++) {
      final frameNo = (offsets[i].offsetMs - baseOffset);
      final x = frameNo * widthGap;
      if (x < minOffsetX) {
        continue;
      }
      if (x > maxOffsetX) {
        break;
      }
      final y = offsets[i].heightOffset * size.height;

      offsets[i].cacheStart ??= Offset(x, y);
      offsets[i].cacheEnd ??= Offset(x + widthGap, y);
      canvas.drawLine(
        offsets[i].cacheStart!,
        offsets[i].cacheEnd!,
        Paint()
          ..color = offsets[i].color
          ..strokeWidth = 8,
      );
    }

    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]


https://github.com/flutter/flutter/assets/11242422/4b4a99e5-7b3a-4ee4-84f9-07e8d6f44ba3


</details>


### Logs

<details open><summary>Logs</summary>

```console
[[Paste your logs here]](https://pastebin.com/AaDDsKc8)
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[√] Flutter (Channel stable, 3.16.8, on Microsoft Windows [Version 10.0.19045.3086], locale zh-CN)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.17)
[√] Android Studio (version 2022.3)
[√] VS Code (version 1.70.0)
[√] Connected device (3 available)
```

</details>