Flutter package for creating awesome animations.

Overview

🎬 Simple Animations

Awesome Flutter Pub

Simple Animations is a powerful package to create beautiful custom animations in no time.

  • πŸ’ͺ fully tested
  • πŸ“ well documented
  • πŸ’Ό enterprise-ready

🌞 Highlights

  • Easily create custom animations in stateless widgets
  • Animate multiple properties at once
  • Create staggered animations within seconds
  • Simplified working with AnimationController instances
  • Debug animations

⛏️ Getting started

Add Simple Animations to your project by following the instructions on the install page.

It contains multiple features. Each covers a different aspect of making animation very simple.

Feature Description
🍹  Liquid Beautiful visual animations that increases the visual quality of your app.
πŸš€  Stateless Animation Widgets for super simple creation of custom animations.
🎭  Timeline Tween Animate multiple properties at once or create staggered animations.
πŸŽ₯  Anicoto Setup managed AnimationControllers instantly.
⏯  Animation Developer Tools Debug animations or create them step by step.

🍹 Liquid

Liquid provides ready-to-use, stunning visual animations that can be explored and configured with Liquid Studio.

plasma

plasma

Open Liquid Studio.


πŸš€ Stateless Animation

Stateless Animation provides a powerful set of Flutter widgets that hide the most complex part of creating animations.

Example: Square with a animated background color. (Example uses supercharged for syntactic sugar.)

PlayAnimation<Color>( // <-- specify type of animated variable
  tween: Colors.red.tweenTo(Colors.blue), // <-- define tween
  builder: (context, child, value) { // <-- builder function
    return Container(
        color: value, // <-- use animated value
        width: 100, 
        height: 100,
    );
});

Read more about it or watch examples.


🎭 Timeline Tween

Timeline Tween (successor of MultiTween) is a mighty tool thats enables you to tween multiple properties or designing staggered animations in a single Animatable.

Example: Custom tween with multiple properties. (Example uses supercharged for syntactic sugar.)

enum AniProps { width, height, color } // <-- define properties

class MyWidget extends StatelessWidget {

  final _tween = TimelineTween<AniProps>() // <-- design tween
    ..addScene(begin: 0.milliseconds, duration: 500.milliseconds)
        .animate(AniProps.width, tween: 0.0.tweenTo(400.0))
        .animate(AniProps.height, tween: 500.0.tweenTo(200.0))
        .animate(AniProps.color, tween: Colors.red.tweenTo(Colors.yellow))
    ..addScene(begin: 700.milliseconds, end: 1200.milliseconds)
        .animate(AniProps.width, tween: 400.0.tweenTo(500.0));

  @override
  Widget build(BuildContext context) {
    return ... // <-- use tween
  }
}

Read more about it or watch examples.


πŸŽ₯ Anicoto

Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.

Example: Animated stateful widget with full-fledged AnimationController instance. (Example uses supercharged for syntactic sugar.)

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // <-- add AnimationMixin to state class

  Animation<double> size; // <-- declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
    controller.play(); // <-- start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use animation variable's value here 
      height: size.value, // <-- use animation variable's value here
      color: Colors.red
    );
  }
}

Read more about it or watch examples.


⏯ Animation Developer Tools

Tired of watching the same animation over and over again, in order to fine tune it?

devtools

The Animation Developer Tools allows you pause anywhere, scroll around, speed up, slow down or focus on a certain interval of the animation.

Read more about it.


πŸ“ˆ Improve

Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

  • Just write an issue on GitHub. ✏️
  • And don't forget to hit the like button for this package ✌️
Comments
  • adding type to builder function causes exception

    adding type to builder function causes exception

    I'm trying to add types to everything, but ControlledAnimation is giving me exceptions.

    in the builder, if I use builder: (BuildContext context, value), it works.

    but builder: (BuildContext context, double value) fails with error below.

     ControlledAnimation(
              playback: Playback.LOOP,
              duration: Duration(milliseconds: (5000 / speed).round()),
              tween: Tween(begin: 0.0, end: 2 * pi),
              builder: (BuildContext context, value) {   <<=====  if I use double value, it give error.
                return CustomPaint(
                  foregroundPainter: CurvePainter(value + offset),
                );
              },
            ),
    

    Error:

    _TypeError (type '(BuildContext, double) => CustomPaint' is not a subtype of type '(BuildContext, dynamic) => Widget')

    Any way to fix this?

    bug 
    opened by sgehrman 10
  • Weird graphic bugs using Plasma on OnePlus 8

    Weird graphic bugs using Plasma on OnePlus 8

    Hi, I was using Plasma animation in my app when I noticed that on my OnePlus 8 there are a lot of graphic bugs all over the screen (check attachment). The problem persists using both the release and debug versions of the app. I tried with emulators and a Xiaomi Mi A2 but in these cases there are no problems, all works great. I really don't know how to fix this because seems like GPU misses some pixel on the screen...

    Thanks

    https://user-images.githubusercontent.com/66907450/105577486-4a5e0100-5d7a-11eb-97dd-c53d109125c1.mp4

    bug device specific 
    opened by andreee13 9
  • Issue with Plasma on Web and in Liquid Studio

    Issue with Plasma on Web and in Liquid Studio

    Hi Felix, @felixblaschke

    I saw your beautiful Liquid Studio on YouTube today and just had to try it. I noticed that there is an issue with the Liquid Studio and the Plasma, most of your provided templates end up looking like this on the Web:

    LiquidStudio3

    This was when running Liquid Studio on latest Chrome and Edge on Windows. I now also tested on Firefox on Windows, same result.

    As I tried different Plasma's in a Flutter app, I noticed it worked fine on Windows Desktop builds, but not on Web builds (using CanvasKit).

    I got the same moving light "white" circle with sparkles in it in some cases when I used the designed Plasma, but not allays. So the bug is not actually in Liquid Studio but in Plasma and probably only on Web builds, and it might be platform related too, because I could not see the issue when I tried in a web browser on an iPad.

    Might be some range issue with the Web build, because later I noticed what is also shown if you look very closely at the animated GIF screen recording (with very low framerate, due to size restriction in GitHub is 5MB for Gifs) that I change the width or the height in Liquid Studio of the container, the problem goes away!

    bug 
    opened by rydmike 9
  • Animation starting from different offset even the starting position is same

    Animation starting from different offset even the starting position is same

    `import 'package:flutter/material.dart'; import 'package:simple_animations/simple_animations.dart';

    void main()=>runApp(MyApp());

    class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Example(), ); } }

    class Example extends StatefulWidget { @override _ExampleState createState() => _ExampleState(); }

    class _ExampleState extends State { @override Widget build(BuildContext context) {

    final _tween=MultiTrackTween([
      Track('slide').add(Duration(milliseconds: 5000),
          Tween<Offset>(begin: Offset(70, 70), end: Offset.zero),)
    ]);
    
    
    
    
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ControlledAnimation(
              tween: _tween,
              duration: _tween.duration,
              playback: Playback.PLAY_FORWARD,
              builder: (c,a){
                return Transform.translate(offset: a['slide'],child: FlutterLogo(),);
              },
            ),
            ControlledAnimation(
              tween: _tween,
              duration: _tween.duration,
              playback: Playback.PLAY_FORWARD,
              builder: (c,a){
                return Transform.translate(offset: a['slide'],child: FlutterLogo(),);
              },
            )
          ],
        ),
      ),
    );
    

    } }

    `

    question 
    opened by KaushickSArgekar 9
  • The method 'PlasmaRenderer' isn't defined

    The method 'PlasmaRenderer' isn't defined

    Hello, I have exported code from Liquid Studio and There is a class Called PlasmaRenderer there is no good suggestion to export it from any library and I couldn't find how to implement the class from the tutorial.

    opened by amebrahimi 7
  • Medium articles refer MultiTrackTween and ControlledAnimation (Confusing)

    Medium articles refer MultiTrackTween and ControlledAnimation (Confusing)

    Hi,I'm just starting to explore animations in Flutter and I just found your plugin and it seem fantastic. I see that in your articles on Medium https://medium.com/@felixblaschke/fancy-background-animations-in-flutter-4163d50f5c37 you use a MultiTrackTween but I don't see it in the docs nor the plugin. in the code

    class AnimatedBackground extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final tween = MultiTrackTween([
          Track("color1").add(Duration(seconds: 3),
              ColorTween(begin: Color(0xffD38312), end: Colors.lightBlue.shade900)),
          Track("color2").add(Duration(seconds: 3),
              ColorTween(begin: Color(0xffA83279), end: Colors.blue.shade600))
        ]);
    
        return ControlledAnimation(
          playback: Playback.MIRROR,
          tween: tween,
          duration: tween.duration,
          builder: (context, animation) {
            return Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [animation["color1"], animation["color2"]])),
            );
          },
        );
      }
    }
    

    both the MultiTrackTween and ControlledAnimation are not found from the plugin. Aren't they from it? Thank you very much. Cheers

    documentation 
    opened by vinnytwice 7
  • MultiTrackTween not refreshed after rebuild

    MultiTrackTween not refreshed after rebuild

    Hello, I have an issue with ControlledAnimation and MultiTrackTween : I want to do a gradient animation with it and trigger the animation when I change a page in my application. The animation is different for each page, so I change the MultiTrackTween instance at every widget rebuild. But when I rebuild my widget and the contained ControlledAnimation, tweens are not updated.

    The code :

    final List<List<Color>> states = [
      [Color(0xFF9768BF), Color(0xFF4DB9B5)],
      [Color(0xFF4DB9B5), Color(0xFF77A338)],
      [Color(0xFF77A338), Color(0xFFC68B1C)],
      [Color(0xFFC68B1C), Color(0xFF9768BF)]
    ];
    
     Widget createAnimation(int page) {
    
        final duration = Duration(milliseconds: 200);
    
        int previousPage = page - 1;
        if (previousPage < 0) previousPage = 3;
    
        MultiTrackTween tweens = MultiTrackTween([
          Track("colorStart").add(
              duration, ColorTween(begin: states[previousPage][0], end: states[previousPage][1])),
          Track("colorEnd").add(
              duration, ColorTween(begin: states[page][0], end: states[page][1])),
        ]);
    
        return ControlledAnimation(
          playback: Playback.START_OVER_FORWARD,
          duration: tweens.duration,
          tween: tweens,
          builder: (context, animation) {
            final start = animation["colorStart"];
            final end = animation["colorEnd"];
    
            return createBackgroundContainer(start, end);
          },
        );
      }
      
      Widget createBackgroundContainer(Color start, Color end) => Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [start, end],
                    begin: Alignment.bottomLeft,
                    end: Alignment.topRight)),
          );
    

    Thank you in advance for your time

    opened by yhuriez 7
  • value.get() on enum value not set in the MultiTween()

    value.get() on enum value not set in the MultiTween()

    While transitioning to the new MultiTween from the old MultiTrackTween, I encountered a small issue.

    My usage might be a little bit weird, but I use a CustomAnimation that gets a different MultiTween according to which animation is to be applied to a particular item. I have a List of MultiTweens from which one gets picked.

    I defined an enum with all the values I plan to animate on the item, but I do not animate all of them at once, just a subset of them. Problem is, if I try to use the value.get(myEnum.Valx) the animation library throws an error ("Property 'Valx' does not exist"). So the solutions I found so far are to either ..add each and all those enums to every MultiTween(), or use a trycatch on each of the values when reading them (the latter is what I chose to go with for now). Neither of them are elegant, and I am wondering if there's a way to find out wether a particular enum value is present within the builder function of a CustomAnimation widget, or to have the .get() return 'null' rather than an error.

    Edit: I checked the source code for the MultiTween and found out the assertion is where I get stuck at. Since the _track is an internal parameter I cannot check wether the value is present or not. I think it'd be better for the function .get() to return null in this case rather than throwing an assertion error, as it should tell the property isn't present (I don't think it's possible to have a Tween return null in any other case).

    opened by nicoroy2561 6
  • How to tween between two strings?

    How to tween between two strings?

    I'm trying to reimplement this checkbox (https://felixblaschke.medium.com/custom-animated-control-elements-with-flutter-8c0d352d7136) with the latest version of the library. Mostly it's been painless but I'm drawing a blank on how to tween between the on and off strings. Is there a recommended way to do this? Thanks in advance!

    opened by lordtottuu 5
  • Use of enum in Track class instead of String for key

    Use of enum in Track class instead of String for key

    Hi! First time writing an issue, so please forgive me if I'm doing something wrong.

    Just wanted to suggest using enums for the key/name in the Track class. I think it'd improve how you refactor the animation code. Searching for enum usage rather than strings for example.

    I did a quick swap here and it seems to work alright: image

    I'd be happy to do a pull request and change it. Of course, it'd be a breaking change.. So I understand if you rather not.

    Awesome package either way, so thank you for making it!

    enhancement 
    opened by AntBlo 5
  • Sync two animations using the same AnimationController, but delay the second one by half of the controller duration

    Sync two animations using the same AnimationController, but delay the second one by half of the controller duration

    Hi,

    I have the following use case: ezgif-3-1d51ec8ea8 A line with two moving arrows. The first arrow starts at t=0.0 and animates to the end of the line (t=1.0). The second arrow starts when the first arrow is at t=0.5 and animates also from 0.0 to 1.0 until reaching the line end.

    Currently, I implemented this using 2 AnimationControllers with the following two animations:

    _animation1 = MovieTween()
        .scene(
            begin: const Duration(seconds: 0),
            end: arrow1Controller.duration)
        .tween(AnimatedArrows.arrow1Progress, Tween(begin: 0.0, end: 1.0),
            curve: Curves.easeInOut)
        .parent
        .animatedBy(arrow1Controller),
    _animation2 = MovieTween()
        .scene(
            begin: const Duration(seconds: 0),
            end: arrow2Controller.duration)
        .tween(AnimatedArrows.arrow2Progress, Tween(begin: 0.0, end: 1.0),
            curve: Curves.easeInOut)
        .parent
        .animatedBy(arrow2Controller)
    

    Both animations have essentially the same structure. They only differ in the AnimationController that animates them, and in the respective animation property to be animated (AnimatedArrows.arrow1Progress vs AnimatedArrows.arrow2Progress).

    The animation controller arrow1Controller is started, and when it reaches a value >= 0.5, arrow2Controller is started as well. Like this, the arrows are animating more or less correctly. But they are not 100% synchronized correctly, as arrow1Controller never hits exactly 0.5 as a value, but always values like 0.56, 0.58 or similar.

    I also tried to put everything in to 1 animation, using 2 scenes and start the second scene later.

    MovieTween()
      ..scene(duration: const Duration(seconds: 5))
          .tween(
            AnimatedArrows.arrow1Progress,
            Tween(begin: 0.0, end: 1.0),
            curve: Curves.easeInOut,
          )
      ..scene(
        begin: const Duration(milliseconds: 2500),
        duration: arrow1Controller.duration,
      )
          .tween(
            AnimatedArrows.arrow2Progress,
            Tween(begin: 0.0, end: 1.0),
            curve: Curves.easeInOut,
          )
          .parent)
    .animatedBy(arrow1Controller)
    

    Like this, the problem is that once arrow1 has reached the end of the line, it waits for arrow2 to reach the end of line as well, instead of starting to animate again already. ezgif-3-2c61d4ee97

    The goal is to achieve a fluid animation that constantly animates, using 1 single AnimationController, which must be actually possible, but I don't know how. Any hints on this?

    opened by WieFel 4
  • Is it possible to set the animation position after it finishes?

    Is it possible to set the animation position after it finishes?

    After my animation ends I want my widget to go back to the initial frame of the animation without playing it. Something like "reset to idle state".

    Is it possible to do?

    The only workaround I found was doing this:

    holdBarControlState = Control.playFromStart;
    Future.delayed(const Duration(milliseconds: 0))
        .then((value) {
      holdBarControlState = Control.playReverse;
    });
    

    The problem with this workaround is that sometimes the user see some frames of the start of the animation.

    opened by MathMesquita 1
  • Builder / Child last property in constructor

    Builder / Child last property in constructor

    builder and child should be last property in a constructor, as it's a common pattern. When IDEs autocomplete the code it's nice to have build/child as last properties.

    enhancement 
    opened by felixblaschke 0
Owner
Felix Blaschke
Software Developer, M.Sc. Visual Computing
Felix Blaschke
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Romain Rastel 291 Oct 21, 2022
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
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚑  Social Media  Twit

null 3 Dec 11, 2021
πŸ”” 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
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. If you appr

Robert Felker 44.6k Dec 30, 2022
A curated collection of awesome gradients made in Dart for Flutter

Flutter Gradients A curated collection of awesome gradients made in Dart (port of https://webgradients.com for Flutter). Only linear gradients include

Jonathan Monga 178 Dec 18, 2022
A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

Vans Z 84 Dec 6, 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 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 with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
β˜€οΈ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Ayush Agarwal 652 Dec 30, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Xavier H. 894 Jan 2, 2023
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
A set of transition patterns within the animations package using flutter.

Flutter Motion Transitions A fultter app to demonstrate Material motion system. Material Motion System The four main Material transition patterns are

Rafsan Ahmad 17 Oct 13, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

David Leibovych 415 Dec 21, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
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

Roi Peker 49 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

Ali Riza Reisoglu 11 Jan 4, 2023
Hmida 17 Nov 22, 2022