flutter_sequence_animation 3.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 92

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.

[1.0.1] - Initial release

  • First fully working implementation of the sequence animation.

[2.0.0] - Breaking change - refactored a few variables.

  • Breaking change - refactored a few variable. Most importantly anim -> animatable in the builder
  • To prevent code breaking version got bumped to 2.0.0
  • Thanks to Jeroen Meijer for the PR!

[2.0.0] - Breaking change - animation API changed.

  • To prevent code breaking version got bumped to 3.0.0
  • Thanks to MaximilianKlein for the PR!

example/lib/main.dart

import 'package:flutter/material.dart';

import 'same_variable_multiple_animations.dart';
import 'sequence_page.dart';
import 'staggered_animation_replication.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
      routes: {
        'sequence': (_)=> new SequencePage(),
        'StaggeredAnimationReplication': (_)=> new StaggeredAnimationReplication(),
        'SameVariableAnimationPage': (_)=> new SameVariableAnimationPage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Examples"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'sequence');}, child: new Text("Sequence"),),
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'StaggeredAnimationReplication');}, child: new Text("StaggeredAnimationReplication"),),
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'SameVariableAnimationPage');}, child: new Text("SameVariableAnimationPage"),),
          ],
        ),
      )
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_sequence_animation: ^3.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';
  
Version Uploaded Documentation Archive
3.0.1 Oct 6, 2018 Go to the documentation of flutter_sequence_animation 3.0.1 Download flutter_sequence_animation 3.0.1 archive
2.0.1 Jul 1, 2018 Go to the documentation of flutter_sequence_animation 2.0.1 Download flutter_sequence_animation 2.0.1 archive
2.0.0 Jul 1, 2018 Go to the documentation of flutter_sequence_animation 2.0.0 Download flutter_sequence_animation 2.0.0 archive
1.0.1 Jun 9, 2018 Go to the documentation of flutter_sequence_animation 1.0.1 Download flutter_sequence_animation 1.0.1 archive
1.0.0 Jun 9, 2018 Go to the documentation of flutter_sequence_animation 1.0.0 Download flutter_sequence_animation 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
84
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

We analyzed this package on Oct 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.4
  • Flutter: 0.9.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
meta ^1.1.2 1.1.6
Transitive dependencies
collection 1.14.11
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test