flutter_sequence_animation

- No need to use intervals and calculate percentages for your total animation time.

- Animate the same variable with multiple animatables!

- You only need one AnimationController

- Intuitive and easy to use interface

Installation

This PR introduced breaking changes to the animation API. If your are above that version use

dependencies:
  flutter_sequence_animation: "^3.0.0"

else

dependencies:
  flutter_sequence_animation: "^2.0.0"

then

$ flutter packages get

then

import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

Demo

alt-text-1 alt-text-1alt-text-1

Code

The Staggered Animation example from here is 207 lines of code . The same animation with this package is 128 lines of code. It is also much easier to read and edit.

You specify a sequence of animatables like this:

    sequenceAnimation = new SequenceAnimationBuilder()
      .addAnimatable(
          animatable: new ColorTween(begin: Colors.red, end: Colors.yellow),
          from:  const Duration(seconds: 0),
          to: const Duration(seconds: 2),
          tag: "color"
        ).addAnimatable(
          animatable: new ColorTween(begin: Colors.yellow, end: Colors.blueAccent),
          from:  const Duration(seconds: 2),
          to: const Duration(seconds: 4),
          tag: "color",
          curve: Curves.easeOut
        ).addAnimatable(
          animatable: new ColorTween(begin: Colors.blueAccent, end: Colors.pink),
          //  animatable: new Tween<double>(begin: 200.0, end: 40.0),
          from:  const Duration(seconds: 5),
          to: const Duration(seconds: 6),
          tag: "color",
          curve: Curves.fastOutSlowIn
        ).animate(controller);

In this case only the color is animated but you can add as many different properties to the sequence as you'd like to. The only restriction is that animations with the same tag can not overlap and need to be ordered.

Now you can access the resulting animation from anywhere in your code with

sequenceAnimation["color"]

This animation is a composition of all animatables you passed in with the same tag.

Example usage of this example:

new AnimatedBuilder(
          builder: (context, child) {
            return new Center(
              child: new Container(
                color: sequenceAnimation["color"].value,
                height: 200.0,
                width: 200.0,
              ),
            );
          },
          animation: controller,
        ),

The animation duration is set automatically (don't change the duration of the controller yourself).

Sepcial thanks to Simon Lightfoot for the help!

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Libraries

flutter_sequence_animation

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]