funvas

Description:

funvas

funvas #
Flutter package that allows creating canvas animations based on time and math functions.
The name "funvas" is based on Flutter + fun + canvas. Let me know if you have any better ideas :)
Concept #
The idea of the package is to provide an easy way to create custom canvas animations based only
on time and some math functions (sine, cosine, etc.) - like this one.










Inspired by Dwitter (check it out). This is also the reason why
the following shortcut functions and variables are available; they might be expanded upon in the
future given that there are a lot more possibilities:
u(t) is called 60 times per second.
t: Elapsed time in seconds.
S: Shorthand for sin from dart:math.
C: Shorthand for cos from dart:math.
T: Shorthand for tan from dart:math.
R: Shorthand for Color.fromRGBA, usage ex.: R(255, 255, 255, 0.5)
c: A dart:ui canvas.
x: A context for the canvas, providing size.
copied to clipboard
You can of course use all of the Canvas functionality, the same way you can use them in a
CustomPainter; the above is just in homage to Dwitter :)
Usage #
You create funvas animations by extending Funvas and you can display the animations using a
FunvasContainer.
Note that you have to size the animation from outside, e.g. using a SizedBox.
import 'package:flutter/material.dart';
import 'package:funvas/funvas.dart';

/// Example implementation of a funvas.
///
/// The animation is drawn in [u] based on [t] in seconds.
class ExampleFunvas extends Funvas {
@override
void u(double t) {
c.drawCircle(
Offset(x.width / 2, x.height / 2),
S(t).abs() * x.height / 4 + 42,
Paint()..color = R(C(t) * 255, 42, 60 + T(t)),
);
}
}

/// Example widget that displays the [ExampleFunvas] animation.
class ExampleFunvasWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 420,
height: 420,
child: FunvasContainer(
funvas: ExampleFunvas(),
),
);
}
}
copied to clipboard
See the example package for a complete example implementation.
Gallery & more #
Funvas is a package that I wrote because I wanted to create some Dwitter-like animations in Flutter
myself.
Because of that, I have created a lot surrounding it, which you might not discover when looking only
at the package :)
And not only me - the community has also created some amazing projects with it ✨
In the main README on GitHub you can find:

Gallery - live demo showcasing some of my funvas animations.
Community projects - list of projects created by the community using the funvas package.