CustomPaint擊中時擦除形狀并帶有淡入淡出效果

當我單擊畫布時，我嘗試擦除我的圈子。我想讓它在第二次點擊時再次出現。自動取款機我有這個：

class FadeEffect extends StatefulWidget {

  const FadeEffect({Key? key}) : super(key: key);

  @override
  State<FadeEffect> createState() => _FadeEffectState();
}

class _FadeEffectState extends State<FadeEffect> {
  double vOpacity = 1;

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(milliseconds: 100), (timer) {
      vOpacity -= 0.1;
      if (mounted) {
        setState(() {
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
            size: Size(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
            painter: MyPainter(vOpacity: vOpacity),
            );
  }

}


class MyPainter extends CustomPainter {
  double vOpacity;

  MyPainter({
    required this.vOpacity
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));

    var paint = Paint()
      ..color = Color.fromRGBO(0, 0, 0, vOpacity)
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 300, paint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  @override
  bool hitTest(Offset position) {
    erase();
    return true;
  }

  void erase() {
  }

}

當我運行程式時，我將圓圈顏色的不透明度從 1 更改為 0（當我呼叫 erase() ... 時，我知道如何做到這一點）。另一個問題是我的圓圈一旦達到 0 不透明度就會再次出現。

PS：除了改變不透明度還有另一種擦除方法嗎？

uj5u.com熱心網友回復：

如果您只想讓圓圈消失而不產生任何影響，您可以使用控制其子項的可見性CustomPaint的小部件包裝 。Visibility但是當你想要實作淡出效果時，你應該使用AnimatedOpacity影片任何不透明度變化的小部件。
下面是一個獨立的代碼示例，我在其中演示了這兩種方式。UI 顯示了兩個繪制的圓圈，CustomPaint當單擊其畫布時，它們都會消失并再次出現。第一個使用AnimatedOpacity，而第二個使用Visibility小部件：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController controller = ScrollController();
  double _opacity = 1.0;
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 300,
            width: 300,
            child: AnimatedOpacity(
              duration: const Duration(
                seconds: 3,
              ),
              opacity: _opacity,
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    _opacity = _opacity == 1 ? 0 : 1;
                  });
                },
                child: CustomPaint(
                  painter: MyPainter(),
                ),
              ),
            ),
          ),
          SizedBox(
            width: 300,
            height: 300,
            child: Visibility(
              maintainInteractivity: true,
              maintainSize: true,
              maintainAnimation: true,
              maintainState: true,
              visible: _visible,
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    _visible = _visible ? false : true;
                  });
                },
                child: CustomPaint(
                  painter: MyPainter(),
                ),
              ),
            ),
          ),
          const Text(
            "Tap on the canvas, to make the circle appear or disappear",
          ),
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.black;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

標籤：扑 动画片 画

上一篇：3d懸停效果反向影片

下一篇：WinUI3桌面MVVM；在屬性更改時為TextBlock設定影片？