funvas 0.1.6+3

Package for creating canvas animations based on time and math functions. Fun + canvas -> 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.

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(),
      ),
    );
  }
}

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.