使用颤动的电子动画

Question

如何在 Flutter 中创建这样的动画？我尝试使用 AnimatedPositioned，但在对多个圆形容器（由 GIF 中的电子表示）进行动画处理时遇到了困难。我想使用 AnimatedPositioned 在 SVG 图像上对圆形容器进行动画处理。具体来说，我的目标是创建电路动画。但我无法制作像 GIF 这样的电子动画

Answer 1

这非常具有挑战性:)我无法使用动画

Tween

来实现它，以实现简单的

_animation.reverse

，但我实现了一个正方形移动公式来控制位置。

查看此演示。

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

  @override
  State<AnimatedDotMovingContainer> createState() =>
      _AnimatedDotMovingContainerState();
}

class _AnimatedDotMovingContainerState extends State<AnimatedDotMovingContainer>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  double dotSize = 20.0; 
  double containerSize = 250.0;
  int numBalls = 10; // Number of balls

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 10), //Speed of balls
    )..addListener(() {
        setState(() {});
      });

    _controller.repeat();
  }

  double _getSquarePositionX(double value) {
    value = (value % 1); // Use % to keep value within [0, 1]
    if (value < 0.25) {
      return 1 - value * 4;
    } else if (value < 0.5) {
      return 0;
    } else if (value < 0.75) {
      return (value - 0.5) * 4;
    } else {
      return 1;
    }
  }

  double _getSquarePositionY(double value) {
    value = (value % 1);
    if (value < 0.25) {
      return 0;
    } else if (value < 0.5) {
      return (value - 0.25) * 4;
    } else if (value < 0.75) {
      return 1;
    } else {
      return 1 - (value - 0.75) * 4;
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Dot Moving Container'),
      ),
      body: Center(
        child: SizedBox(
          width: containerSize,
          height: containerSize,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: dotSize),
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              for (int i = 0; i < numBalls; i++)
                Positioned(
                  left: (containerSize - dotSize) *
                      _getSquarePositionX(
                          _controller.value - i * 0.1), // Adjust position
                  top: (containerSize - dotSize) *
                      _getSquarePositionY(
                          _controller.value - i * 0.1), // Adjust position
                  child: Container(
                    width: dotSize,
                    height: dotSize,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.red,
                    ),
                  ),
                ),
              const Align(
                alignment: Alignment.centerRight,
                child: SizedBox(
                  height: 30.0,
                  width: 30.0,
                  child: Placeholder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

配合AnimationController的公式控制逆时针运动。如果你想让点向相反方向移动，只需将公式调整为：

double _getSquarePositionX(double value) {
  value = (value % 1); // Use % to keep value within [0, 1]
  if (value < 0.25) {
    return value * 4;
  } else if (value < 0.5) {
    return 1;
  } else if (value < 0.75) {
    return 1 - (value - 0.5) * 4;
  } else {
    return 0;
  }
}

double _getSquarePositionY(double value) {
  value = (value % 1);
  if (value < 0.25) {
    return 0;
  } else if (value < 0.5) {
    return (value - 0.25) * 4;
  } else if (value < 0.75) {
    return 1;
  } else {
    return 1 - (value - 0.75) * 4;
  }
}