中秋浪漫，用 Flutter 点亮月亮阴晴圆缺

2023-12-30 00:08:46

中秋创意投稿大赛：用Flutter绘制月亮阴晴圆缺

在这秋高气爽、月色迷人的中秋佳节，让我们用 Flutter 来点亮月亮的阴晴圆缺，共同感受月相变化的浪漫与美妙。

1. 月相知识小科普

在开始之前，让我们先来了解一些关于月相的知识。月相是指月亮在绕地球运行过程中，反射太阳光而呈现的明暗形状，其变化是由月球相对于太阳和地球的位置决定的。

月相一般可分为朔月、新月、上弦月、满月、下弦月等。朔月时，月亮位于太阳和地球之间，背对地球，因此看不到月亮；新月时，月亮位于地球和太阳之间，正面朝向地球，但由于太阳光直接照射到月球背向地球的一面，因此也看不到月亮；上弦月时，月亮位于地球和太阳之间，右半部分被太阳光照亮，因此可以看到月亮的右边；满月时，月亮位于地球和太阳相对的位置，正面朝向地球，因此可以看到整个月亮；下弦月时，月亮位于地球和太阳之间，左半部分被太阳光照亮，因此可以看到月亮的左边。

2. 用 Flutter 绘制月亮动画

现在，我们已经对月相有了一定的了解，接下来让我们用 Flutter 来绘制一个月亮动画，展示月相的变化过程。

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

class Moon extends StatefulWidget {
  @override
  _MoonState createState() => _MoonState();
}

class _MoonState extends State<Moon> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: const Duration(seconds: 10), vsync: this);
    _animation = Tween(begin: 0.0, end: 2 * pi).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MoonPainter(
          radius: 100,
          moonPhase: _animation.value,
          backgroundColor: Colors.black,
          moonColor: Colors.white),
    );
  }
}

class MoonPainter extends CustomPainter {
  final double radius;
  final double moonPhase;
  final Color backgroundColor;
  final Color moonColor;

  MoonPainter(
      {this.radius,
      this.moonPhase,
      this.backgroundColor,
      this.moonColor});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.fill;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);

    paint.color = moonColor;
    Path path = Path();
    path.addArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2), radius: radius),
        -pi / 2 + moonPhase,
        pi - moonPhase * 2);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(MoonPainter oldDelegate) {
    return oldDelegate.moonPhase != moonPhase;
  }
}

在上面的代码中，我们首先定义了一个 Moon 类，这是一个有状态的 Widget，用于管理动画状态。然后，我们在 initState 方法中创建了 AnimationController 和 Animation 对象，并设置了动画的持续时间和值范围。接下来，我们在 build 方法中使用 CustomPaint 绘制了月亮动画，并指定了月亮的半径、月相、背景颜色和月亮颜色。最后，我们在 MoonPainter 类中实现了 paint 方法，该方法用于绘制月亮动画。