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

size

staggered

代码

来自此处的交错动画示例是
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