flutter_sequence_animation

  • 无需使用间隔并计算动画总时间的百分比。
  • 用多个可动对象动画同一个变量！
  • 您只需要一个 AnimationController
  • 直观易用的界面

安装

此 PR 引入了动画的重大更改
API。如果您的版本高于该版本，请使用

dependencies:
  flutter_sequence_animation: "^3.0.0"

否则

dependencies:
  flutter_sequence_animation: "^2.0.0"

然后

$ flutter packages get

然后

import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

演示

colors-1

size-1

staggered-1

代码

来自 此处 的交错动画示例是
207 行 代码。
使用此包的相同动画是 128 行 代码。
它也更容易阅读和编辑。

您像这样指定一系列可动对象

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

在这种情况下，只有颜色被动画化，但您可以为序列添加任意数量的不同属性。
唯一的限制是具有相同标签的动画不能重叠，并且需要排序。

现在，您可以通过以下方式在代码的任何位置访问生成的动画

sequenceAnimation["color"]

此动画是您使用相同标签传递的所有可动对象的组合。

此示例的用法示例

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

动画持续时间会自动设置（不要自己更改控制器持续时间）。

GitHub

https://github.com/Norbert515/flutter_sequence_animation