Fun canvas animations in Flutter based on time and math functions.

Overview

funvas Pub version demo badge Twitter Follow

Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions.

The name "funvas" is based on Flutter + fun + canvas. Let me know if you have any better ideas :)

Demo

I share my funvas creations on Twitter and I have also create a live demo that allows you to see the animations running right in Flutter web :)

Repo structure

This repo currently contains the following packages:

  • funvas, which is the actual funvas Flutter package that is also hosted on Pub. Both funvas_tweets and funvas_demo (+ the example package inside of funvas) depend on this package. It contains the basic widget for displaying funvas animations.
  • funvas_tweets is a collection of funvas animations I created and shared on Twitter. The package also contains the code I use to export my animations to GIF.
  • funvas_demo is a Flutter web app showcasing some funvas animations that can be reached at funvas.creativemaybeno.dev. It consists of a selection of funvas animations from the funvas_tweets package. Not all animations are included because some of them might not perform well enough in a live demo :)

Inspiration

The whole concept is inspired by Dwitter (check it out). That is mainly the way the API is built. These kinds of animations (especially in GIF form) can be found in many communities, e.g. in Processing (and with that p5.js).

You might also like...

Easily add staggered animations to your ListView, GridView, Column and Row children.

Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

Jan 6, 2023

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

Jan 6, 2023

A catalog of beautiful, reusable and elegant animations

A catalog of beautiful, reusable and elegant animations

Animations Catalog The goal of this project is to catalog and build multiple animation patterns with flutter. Budget App Animation Harley Swipe To Enl

Sep 6, 2021

SwiftUI - Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.

SwiftUI - Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.

SwiftUI Examples About Examples projects using SwiftUI & Combine. Include Layout, UI, Animations, Gestures, Draw and Data. See projects files in Files

Jan 8, 2023

Flutter package for creating awesome animations.

Flutter package for creating awesome animations.

🎬 Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. πŸ’ͺ fully tested πŸ“ well documented πŸ’Ό e

Dec 31, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Nov 14, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

πŸ±β€πŸ‘€ Flutter-Animation πŸ”₯ πŸ”₯ List Animated Staggered Animations

 πŸ±β€πŸ‘€ Flutter-Animation πŸ”₯ πŸ”₯ List Animated Staggered Animations

πŸ±β€πŸ‘€ Staggered Animations made with algeria ❀

Nov 22, 2022

A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

Dec 24, 2022
Comments
  • Support for non-resetting ticker

    Support for non-resetting ticker

    The implementation of the FunvasContainer does not provide an option to work with an ongoing ticker (which I'd like in order to update animation speed). Due to all relevant code not having a public-facing API, the only option is currently to copy the entire package's code and change that method, if I'm not missing anything.

    opened by Lootwig 6
  • Use `num.floor()` instead of `fastFloor()`

    Use `num.floor()` instead of `fastFloor()`

    Since https://github.com/dart-lang/sdk/issues/46650 has been resolved now, fastFloor() is longer faster than num.floor() πŸš€

    At latest when this lands on stable, we should get rid of fastFloor() here. We could keep the test case by reversing it and moving the function to the test folder for regression testing.

    opened by creativecreatorormaybenot 2
  • Update Link widget

    Update Link widget

    Update:

    https://github.com/creativecreatorormaybenot/funvas/blob/d8f815dd8965dc46b1567510c7eb9787ce9e29d5/funvas_demo/lib/widgets/link.dart#L6

    To the one used in GitHub tracker (uses anchor element and web-like styling in general).

    opened by creativecreatorormaybenot 2
  • Create docker image with linux application for headless gif creation

    Create docker image with linux application for headless gif creation

    Now you can create and save multiple frames only with your browser, platform agnostic Create a docker image with Linux application for headless gif creation

    opened by PlugFox 2
Releases(funvas-v0.1.7)
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
quiz app made in flutter for answering fun trivia questions

trivia_app An trivia/quiz app made in flutter for answering fun trivia questions. This app make use of Opentdb api (https://opentdb.com/) for fetching

KIRAN M R 7 Dec 23, 2022
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
πŸ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

null 10 Nov 28, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
Making drawings and animations in Flutter extremely simple

?? GraphXβ„’ | rendering | prototype | design | Making drawings and animations in Flutter extremely simple. wiki-tips. To get some extended, boring expl

Roi Peker 382 Dec 21, 2022
My UI and Animations Challanges in Flutter/Dart

ui_challenges Comecei com essa challange, por causa do novo emprego preciso de praticar muito mais animaçáes e telas, toda semana uma UI Nova com o te

Geek Fabio 25 Sep 4, 2022