A package to create nice and smooth animations for flutter

Last update: Dec 5, 2021

animation_director

A package to create nice and smooth animations for flutter

Introduction

A simple package to build beautiful and smooth animations for flutter framework. By using this package, you don't need to bother yourself with AnimationControllers, AnimationTweens and also timing and of those animations.

Here there are some simple examples of what I've made with this package in 5 minutes for each one.

The following descriptions may sounds complicated but it's pretty simple, sorry for my bad english, I think if you jump to example directory and take a look at the codes, you'll find out it's really easy to use

ActorWidget

Each object on the screen is called an ActorWidget.

ActorWidget has two required properties:

    @required String name;
    @required List<ActorAction> actions;

each ActorAction is an individual animation of the ActorWidget.

All ActorWidgets in your page run simultaneously. All ActorActions inside of an ActorWidget run sequentially, but you can control how much it waits before starts the animation using waitBeforeStart

  // ___________________________________
  ActorWidget(                          |
    name: 'Actor1',                     |
    actions: [                          |
      // ___________                    |
      ActorAction(  |                   |
        ...         |                   |
      ),            |                   |
      ActorAction(  |                   |
        ...         | (Sequentially)    | (Simultaneously)
      ),            |                   |
      ActorAction(  |                   |
        ...         |                   |
      )             |                   |
      // ___________|                   |
  ]),                                   |
  ActorWidget(),                        | 
  ActorWidget(),                        |
  ActorWidget(),                        |
  // ___________________________________|
  

ActorAction Features

Each ActorAction has following features

    List<String> group; // you can define one or multi group for action.
    Function onCompleted;
    Function onStart;
    Duration waitBeforeStart; // the amount of time the current action must wait to start, after the previous action is finished
    ActorPath path;
    ActorPosition position;
    ActorOpacity opacity;
    ActorCharacter character;
    ActorRotation rotation;
    ActorScale scale;

if you want to animate some of your ActorWidgets, you can give a name to the actions of your actor. then start your AnimationDirector by that group. Using this, only ActorWidgets which has the given group animate.
This is useful when you want to trigger an animation manually. see Example Menu3x3.

ActorCharacter

The actor character! your actor is represented by ActorCharacter.

ActorCharacter has the following properties:

    Duration duration;
    Curve curve;
    double width;
    double height;
    Widget child;
    String clipPath; // the string of the clip path
    EdgeInsets padding;
    EdgeInsets margin;
    BoxDecoration decoration;
    BoxDecoration foregroundDecoration;

Note: clipPath type is string! if follows svg codes rule. and for now only supports M, L, A, Q.

In order to generate a path you can use FlutterDev.site Path Creator. Draw your path and copy The Result to the clipPath property

ActorPosition

You can animate the position of Actor using ActorPosition.

ActorPosition has the following properties

    Duration duration;
    Curve curve;
    double top;
    double left;
    double right;
    double bottom;

ActorOpacity

To change the opacity of your Actor.

ActorOpacity has the following properties

    Duration duration;
    Curve curve;
    double opacity;

ActorScale

To change the scale of your Actor.

ActorScale has the following properties

    Duration duration;
    Curve curve;
    double startScale;
    double finishScale;

ActorRotation

To rotate, flip horizontal or vertical your Actor widget, you can use ActorRotation.

ActorRotation has the following properties

    Duration duration;
    Curve curve;
    double rotationTurns;
    Alignment alignment;
    bool clockwise;
    double startTween;
    double verticalFlipTurns;
    double horizontalFlipTurns;

ActorPath

You can draw a path by using ActorPath. and if you define an ActorCharacter along with ActorPath, the character will move along the created path.

To draw your path again use FlutterDev.site Path Creator.

ActorPath has the following properties

    Duration duration;
    Curve curve;
    String path; // the String code of the path
    int traversePercentage; // the percentage of `ActorCharacter` movement along the path
    int startPositionInPercent; // the start position of animation in percent
    bool displayPath; // displays the path on the screen, 
    bool displayProgress; // displays the progress of path filling on the screen
    Offset offset; // you can align the position of ActorCharacter widget on the path
    Paint pathStyle; // style of the path line
    Paint progressStyle; // style of the progress line
    int progressLength; // the length of progress line, the default is as equal as the path
    int progressAnimationRepeat; // the repeat times of progress animation
    bool fadingProgress; // to make the tail of the progress line faded

Path Creator

In order to create paths easily head to FlutterDev.site Path Creator.
Draw your path and copy the generated code from The Result.

Adaptive Size

By default, the generated path is based on fixed numbers of your path and has the following effect

If you want to draw your path to be adaptive to the screen of any device, you need to select Adaptive Width or Adaptive Height or both if you want your path to be fully adaptive. When you select for example Adaptive Width, the drawing-area width will be considered as mobile,tablet,... width so you get following effect with Adaptive Width. (500 for example)

But keep in mind, in both cases, the result may be different on different screen-sizes.

Example

Let's say we want to animate an orange circle from top-center of the screen to the center. Then after 2 seconds, move the circle to the bottom of the page.

The first step is to create our character and position it to top of the page.

  ActorAction(
    position: ActorPosition(top: 0, left: 0, right: 0),
    character: ActorCharacter(
      child: Center(
        child: Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.orangeAccent,
            borderRadius: BorderRadius.circular(50),
          ),
        ),
      )
    ),
  ),

The second step is to move it to the center of the page, so let's add another ActorAction

    ...
    ActorAction(
        position: ActorPosition(
          curve: Curves.elasticOut,
          duration: Duration(milliseconds: 800),
          top: MediaQuery.of(context).size.height / 2 - 25),
    ),
    ...
    

And the final step is to move our circle to the bottom of the page after 2 seconds

    ...
    ActorAction(
        waitBeforeStart: Duration(seconds: 2),
        position: ActorPosition(
          duration: Duration(milliseconds: 800),
          curve: Curves.elasticOut,
          top: MediaQuery.of(context).size.height - 100),
    ),
    ...
    

and you get the following result

GitHub

https://github.com/Ali-Azmoud/animation_director
You might also like...

A set of transition patterns within the animations package using flutter.

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

Feb 9, 2022

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

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

Jun 15, 2022

Making drawings and animations in Flutter extremely simple

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

Jun 20, 2022

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

Jun 23, 2022

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.

Jun 18, 2022

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

Jun 29, 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

Dec 28, 2021

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

Oct 24, 2021
Comments
  • 1. Path Creator not working

    Hi, this package is amazing to create beautiful and smooth animations. I am not able to open the FlutterDev.site Path Creator website, can you help out here?

    Reviewed by sumitgohil at 2021-04-12 21:02

Related

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]
🔔  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

Jun 21, 2022
A light weight package for flutter apps, that easily shows a splash screen with a nice fade animation.

Animated Splash Screen Using the package Get the library environment: sdk: ">=2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_

May 3, 2022
Flutter Smooth PageView indicators
Flutter Smooth PageView indicators

smooth_page_indicator Customizable animated page indicator with a set of built-in effects. infinite Loop support [new] Scrolling dots effect Effects E

Jun 29, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.
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

Apr 4, 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

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 ?? ??

Jun 22, 2022
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

Jun 28, 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

Apr 26, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.
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

May 31, 2022
☀️ A Flutter package for some material design app intro screens with some cool animations.
☀️ 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

Jun 3, 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

Jun 20, 2022