Skip to content

Instantly share code, notes, and snippets.

@felixblaschke
Created April 14, 2019 06:19
Show Gist options
  • Save felixblaschke/054b104e1356692d524210d9f432e79c to your computer and use it in GitHub Desktop.
Save felixblaschke/054b104e1356692d524210d9f432e79c to your computer and use it in GitHub Desktop.
Animated Wave and it's Painter class
class AnimatedWave extends StatelessWidget {
final double height;
final double speed;
final double offset;
AnimatedWave({this.height, this.speed, this.offset = 0.0});
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
height: height,
width: constraints.biggest.width,
child: ControlledAnimation(
playback: Playback.LOOP,
duration: Duration(milliseconds: (5000 / speed).round()),
tween: Tween(begin: 0.0, end: 2 * pi),
builder: (context, value) {
return CustomPaint(
foregroundPainter: CurvePainter(value + offset),
);
}),
);
});
}
}
class CurvePainter extends CustomPainter {
final double value;
CurvePainter(this.value);
@override
void paint(Canvas canvas, Size size) {
final white = Paint()..color = Colors.white.withAlpha(60);
final path = Path();
final y1 = sin(value);
final y2 = sin(value + pi / 2);
final y3 = sin(value + pi);
final startPointY = size.height * (0.5 + 0.4 * y1);
final controlPointY = size.height * (0.5 + 0.4 * y2);
final endPointY = size.height * (0.5 + 0.4 * y3);
path.moveTo(size.width * 0, startPointY);
path.quadraticBezierTo(
size.width * 0.5, controlPointY, size.width, endPointY);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
canvas.drawPath(path, white);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment