Sequence Animations with ease

flutter sequence animation

• no need to use intervals and calculate percentages for your total sequence 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 you 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

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

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).

121

download the full project for this post from the following button

this source is fully free for all time

download as zip