如何在 flutter 中為容器的邊框設置動畫

Question

我想用無限循環（永不停止）在方形容器周圍繪制動畫邊框，就像這張照片一樣，我正在嘗試動畫容器但無濟於事

所以誰能告訴我如何實現線 animation

編輯 **

我正在使用此代碼繪制正方形，但無法使用 animation 構建它

class RadialPainter extends CustomPainter {
  final double progressRemoval;
  final Color color;
  final StrokeCap strokeCap;
  final PaintingStyle paintingStyle;
  final double strokeWidth;
  final double progress;
  RadialPainter(
      {this.progressRemoval,
      this.color,
      this.strokeWidth,
      this.strokeCap,
      this.paintingStyle,
      this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = strokeWidth
      ..color = color
      ..style = paintingStyle
      ..strokeCap = strokeCap;

    var progressRemoval = 0.50;

    var path = Path();

    //LINEA SUPERIOR DEL CUADRADO
    path.moveTo((size.width * 0.30), 0);
    path.quadraticBezierTo((size.width * 0.30), 0, size.width, 0);

    //LATERAL DERECHO
    path.moveTo(size.width, 0);
    path.quadraticBezierTo(size.width, 0, size.width, size.height);

    //LINEA INFERIOR DEL CUADRADO
    path.moveTo(size.width, size.height);
    path.quadraticBezierTo(size.width, size.height, 0, size.height);

    //LINEA IZQUIERDA
    path.moveTo(0, size.height);
    path.quadraticBezierTo(0, (size.height * 0.75), 0, ((size.height * 0.75)));

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(RadialPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

Answer 1

對於像這樣的簡單情況，這個答案可能有點復雜。 希望有答案使用paint 。 我為此使用Rive 。

這個 rive 文件包含兩個狀態，

• 無限循環
• 進度值0-100

下載並添加資產。

檢查pub.dev 以了解基本的 . 要使用它，我們需要StateMachineController

要精益基本，您可以查看rives-statemachine-with-textfiled和GitHub上的完整項目

Rive Controller 小部件on Gist

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

  @override
  _RiveBorderState createState() => _RiveBorderState();
}

class _RiveBorderState extends State<RiveBorder> {
  StateMachineController? controller;

  //progress value
  SMIInput<double>? valueController;

  // infinite loop
  SMIInput<bool>? loopController;

  Artboard? _riveArtboard;

  _initRive() {
    rootBundle.load("assets/new_file.riv").then((value) async {
      final file = RiveFile.import(value);

      final artboard = file.mainArtboard;

      controller =
          StateMachineController.fromArtboard(artboard, "State Machine 1");

      if (controller != null) {
        debugPrint("got state");
        setState(() {
          artboard.addController(controller!);
          valueController = controller!.findInput('value');
          loopController = controller!.findInput('loop');
          // ignore: avoid_function_literals_in_foreach_calls
          controller!.inputs.forEach((element) {
            debugPrint(element.name);
          });
        });
      }

      _riveArtboard = artboard;
    });
  }

  @override
  void initState() {
    _initRive();
    super.initState();
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text("loop"),
                const SizedBox(
                  width: 10,
                ),
                Switch(
                  value: loopController == null ? false : loopController!.value,
                  onChanged: (value) {
                    setState(() {
                      if (loopController != null) loopController!.value = value;
                    });
                  },
                ),
              ],
            ),
            Slider(
              value: valueController == null ? 0 : valueController!.value,
              min: 0,
              max: 100,
              onChanged: (value) {
                setState(() {
                  valueController != null ? valueController!.value = value : 0;
                });
              },
            ),
            SizedBox(
              height: 100,
              width: 100,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  _riveArtboard == null
                      ? const CircularProgressIndicator()
                      : Rive(
                          artboard: _riveArtboard!,
                        ),
                  const Icon(
                    Icons.umbrella,
                    size: 77,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}