Moyo: 円をふよふよアニメーションさせる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' hide Colors;

class FuyoFuyoWidget extends StatefulWidget {
  @override
  _FuyoFuyoWidgetState createState() => _FuyoFuyoWidgetState();
}

class _FuyoFuyoWidgetState extends State<FuyoFuyoWidget>
    with SingleTickerProviderStateMixin {
  double _amplitude = 15;
  Animation<double> _animation;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 2000),
      vsync: this,
    );

    _controller.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      }
      if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    _animation = Tween<double>(begin: 15.0, end: -15.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _amplitude = _animation.value;
        });
      });

    return Container(
      child: Center(
        child: CustomPaint(
          painter: _MyPainter(
            amplitude: _amplitude,
          ),
        ),
      ),
    );
  }

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

class _MyPainter extends CustomPainter {
  _MyPainter({this.amplitude});

  final double amplitude;

  @override
  bool shouldRepaint(_MyPainter oldDelegate) {
    return oldDelegate.amplitude != amplitude;
  }

  @override
  void paint(Canvas canvas, Size size) {
    const double radius = 100;
    const double frequency = 10;

    final Paint stroke = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    Offset lastPoint;
    for (int i = 0; i <= 360; i += 1) {
      final double angle = radians(i.toDouble());

      final double noise = sin(angle * frequency) * amplitude;
      final double x = (radius + noise) * cos(angle);
      final double y = (radius + noise) * sin(angle);

      final Offset point = Offset(x, y);
      if (lastPoint != null) {
        canvas.drawLine(lastPoint, point, stroke);
      }
      lastPoint = point;
    }
  }
}