flutter 如何使用自定义绘图器来动画绘制drawPaint？

eimct9ow 于 2023-01-27 发布在 Flutter

关注(0)|答案(1)|浏览(150)

我想实现这一点：

这是我的代码：

import 'package:flutter/material.dart';
import 'dart:math' as math;

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 = const Color.fromARGB(255, 204, 255, 86);
    canvas.drawPaint(paint);

    var paintHourglassAnimation = Paint()
    ..color = Colors.blue;

    canvas.drawPaint(paintHourglassAnimation);

  }

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

在我的男人屏幕上：

class MainScreen extends StatefulWidget {
    const MainScreen({Key? key}) : super(key: key);
    
    @override
    State<MainScreen> createState() => _MainScreenState();
    }
    
    class _MainScreenState extends State<MainScreen> with TickerProviderStateMixin {
    final CountDownController _countDownController = Get.find();
    final ProjectsController _projectsController = Get.find();
    final SettingsController _settingsController = Get.find();
    
    
    
    @override
    void initState() {
    super.initState();
    _countDownController.createAnimationController(this);
    }
    
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    backgroundColor: Colors.white10,
    body: Center(
    child: AnimatedBuilder(
    animation: _countDownController.controller,
    builder: (context, child) {
      return Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
           Expanded(
              flex: 50,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Align(
                  alignment: FractionalOffset.center,
                  child: AspectRatio(
                    aspectRatio: 1.0,
                    child: Stack(
                        children: <Widget>[
                          Positioned.fill(
                            child: CustomPaint(
                                painter:
                                    _countDownController.painter),
                          ),
                          Align(
                            alignment: FractionalOffset.center,
                            child: Column(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment:
                                  CrossAxisAlignment.center,
                              children: <Widget>[
                                Obx(
                                  () => Text(
                                    _countDownController
                                        .timerString.value,
                                    style: const TextStyle(
                                        fontSize: 80.0,
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
  
                  ),
                ),
              ),
            ),
          ]

如果我决定启动一个计时器，并且动画开始像沙漏计时器一样褪色，我将使用这个自定义绘制来尝试实现上面的动画。
我不知道如何实现这个包：import 'dart:math' as math;来设置动画
我怎样才能使var paintHourglassAnimation像上面的视频一样具有沙漏过渡？
谢谢你能提供的任何帮助

flutter

来源：https://stackoverflow.com/questions/75226288/how-to-animate-a-drawpaint-using-a-custom-painter

1条答案

按热度按时间

igetnqfo1#

你可以画出

import 'dart:ui' as ui;

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, top, size.width, size.height);
    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;
  }
}

和示例输出

class ANTest extends StatefulWidget {
  const ANTest({super.key});

  @override
  State<ANTest> createState() => _ANTestState();
}

class _ANTestState extends State<ANTest> with SingleTickerProviderStateMixin {
  late AnimationController container =
      AnimationController(vsync: this, duration: Duration(seconds: 3))
        ..repeat();

  late Animation<double> animation =
      Tween<double>(begin: 0, end: 1).animate(container);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (_, constraints) => CustomPaint(
          size: constraints.biggest,
          painter: CustomTimePainter(
            color: Colors.amber,
            backgroundColor: Colors.black,
            animation: animation,
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-01-27

我来回答

flutter 如何使用自定义绘图器来动画绘制drawPaint？

1条答案

相关问题

热门标签

最新问答