4缸发动机动画——赋予Flutter生命力的动态图形

相信大家在生活中都见过汽车发动机，那如果我告诉你，你可以通过Flutter轻松创建自己的4缸发动机动画呢？现在就让我们踏上这段激动人心的旅程吧！

我们首先要创建一个长方形的Container作为发动机上盖，并通过decoration设置上部的两个圆角，以及灰色的背景色。接着，我们需要在上盖上掏出四个空间，来放置气缸。

为了实现气缸的运动，我们需要使用sin函数。由于sin函数是非线性的，因此它实现了类似ease in out的效果。这样一来，气缸的运动就显得更加平滑自然。

事实上，整个实现过程非常简单。然而，想要实现一个复杂动画却并非易事，因为你需要考虑很多细节，如动画持续时间、延迟和曲线。但通过Flutter，这些难题都迎刃而解！

Flutter提供了丰富的动画API，使你可以轻松控制动画的各个方面。此外，Flutter还提供了强大的社区支持和广泛的文档，让你的动画之旅更加顺畅。

现在，让我们来看看具体的代码实现吧！

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

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

  @override
  State<EngineAnimation> createState() => _EngineAnimationState();
}

class _EngineAnimationState extends State<EngineAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _pistonAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _pistonAnimation = Tween<double>(begin: 0.0, end: 1.0)
        .animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: EnginePainter(_pistonAnimation),
          size: const Size(300.0, 200.0),
        ),
      ),
    );
  }
}

class EnginePainter extends CustomPainter {
  final Animation<double> _pistonAnimation;

  EnginePainter(this._pistonAnimation);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey
      ..style = PaintingStyle.fill;

    canvas.drawRRect(
        RRect.fromRectAndRadius(
            Rect.fromLTWH(0.0, 0.0, size.width, size.height / 2),
            Radius.circular(10.0)),
        paint);

    for (int i = 0; i < 4; i++) {
      final pistonHeight = size.height / 2 * sin(_pistonAnimation.value * pi);
      canvas.drawRect(
          Rect.fromLTWH(
              size.width / 4 * i + size.width / 8,
              size.height / 2 - pistonHeight,
              size.width / 8,
              pistonHeight),
          paint);
    }
  }

  @override
  bool shouldRepaint(EnginePainter oldDelegate) =>
      oldDelegate._pistonAnimation != _pistonAnimation;
}

现在，你已经掌握了如何使用Flutter创建4缸发动机动画。快去尝试一下，让你的Flutter项目动起来吧！