如何從上到下開始一個animation？

Question

我想要這樣的東西：

但是現在，我有這個：

這是我的代碼：

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class CustomTimePainter extends CustomPainter {
  CustomTimePainter({
    required this.animation,
    required this.backgroundColor,
    required this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = backgroundColor;
    canvas.drawPaint(paint);

    final top = ui.lerpDouble(0, size.height, animation.value)!;
    Rect rect = Rect.fromLTRB(0, 0, size.width, top);
    Path path = Path()..addRect(rect);

    canvas.drawPath(path, paint..color = color);
  }

  @override
  bool shouldRepaint(CustomTimePainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

我怎樣才能像第一個視頻中那樣從上到下開始 animation？

感謝您的任何幫助，您可以提供

Answer 1

切換你的矩形

從

 Rect rect = Rect.fromLTRB(0, 0, size.width, top);

到

Rect rect = Rect.fromLTRB(0, top, size.width, size.height);

這樣底部將始終為 size.height。

更多關於Rect.fromLTRB