Flutter三连爱心动画指南：打造令人惊叹的互动效果

2023-12-05 12:23:00

用 Flutter 实现引人入胜的三连爱心动画，让您的应用充满活力

打造一颗跳动的心：创建自定义爱心 Widget

为了让我们的三连爱心动画栩栩如生，我们需要创建一个自定义的 Flutter Widget 来绘制爱心形状。我们将使用 CustomPainter 类来实现这一点，这使我们能够定义自己的绘制指令。

class HeartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.red;
    var path = Path();

    // 绘制爱心形状
    path.moveTo(size.width / 2, size.height / 2 - 20);
    path.quadraticBezierTo(size.width / 2 - 10, size.height / 2 + 10, size.width / 2 - 30, size.height / 2 + 30);
    path.lineTo(size.width / 2 - 40, size.height / 2 + 50);
    path.lineTo(size.width / 2, size.height / 2 + 70);
    path.lineTo(size.width / 2 + 40, size.height / 2 + 50);
    path.lineTo(size.width / 2 + 30, size.height / 2 + 30);
    path.quadraticBezierTo(size.width / 2 + 10, size.height / 2 + 10, size.width / 2, size.height / 2 - 20);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

让爱心动起来：创建三连爱心动画

现在，我们有了爱心形状的 Widget，让我们将它们组合成一个充满活力的动画。我们将使用 AnimationController 和 Tween 类来控制动画的持续时间和过渡效果。

class ThreeHeartsAnimation extends StatefulWidget {
  @override
  _ThreeHeartsAnimationState createState() => _ThreeHeartsAnimationState();
}

class _ThreeHeartsAnimationState extends State<ThreeHeartsAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        var scale1 = Tween(begin: 1.0, end: 1.5).evaluate(_controller);
        var scale2 = Tween(begin: 1.0, end: 1.2).evaluate(_controller);
        var scale3 = Tween(begin: 1.0, end: 1.3).evaluate(_controller);

        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Transform.scale(scale: scale1, child: HeartPainter()),
            Transform.scale(scale: scale2, child: HeartPainter()),
            Transform.scale(scale: scale3, child: HeartPainter()),
          ],
        );
      },
    );
  }
}

融入您的应用：将三连爱心动画添加到您的界面

是时候将我们的三连爱心动画整合到 Flutter 应用程序中了。只需在您的应用程序代码中包含以下代码即可：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ThreeHeartsAnimation(),
      ),
    );
  }
}