Flutter序列动画插件flutter_sequence_animation的使用

Features

• 不需要使用间隔和计算总动画时间的百分比。
• 可以用多个Animatable动画化相同的变量！
• 你只需要一个AnimationController
• 界面直观且易于使用

Installation

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_sequence_animation: "^4.0.0"

然后运行以下命令来获取包：

$ flutter packages get

最后，在Dart文件中导入包：

import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

Demo

以下是几个示例演示，你可以从这些GIF中了解如何使用该插件创建动画效果：

Code

创建序列动画

你可以像下面这样指定一组动画：

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),
      from: const Duration(seconds: 5),
      to: const Duration(seconds: 6),
      tag: "color",
      curve: Curves.fastOutSlowIn
    ).animate(controller);

注意：在这个例子中只对颜色进行了动画处理，但你可以为序列添加尽可能多的不同属性。唯一的限制是具有相同标签的动画不能重叠并且必须有序。

访问结果动画

可以在代码中的任何位置通过如下方式访问结果动画：

sequenceAnimation["color"]

此动画是你传递的所有具有相同标签的Animatable的组合。

示例用法

这是如何在AnimatedBuilder中使用上面定义的动画的例子：

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

注意：动画持续时间是自动设置的（不要自己更改控制器的持续时间）。

Special Thanks

特别感谢Simon Lightfoot的帮助！

Getting Started

有关Flutter入门的帮助，请查看我们的在线文档。

有关编辑包代码的帮助，请参阅文档。

完整的示例demo

下面是完整的示例demo，它展示了如何将不同的动画页面集成到一个应用中，并可以通过按钮导航到各个动画示例页面：

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("Staggered Animation Replication"),),
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'SameVariableAnimationPage');}, child: new Text("Same Variable Multiple Animations"),),
          ],
        ),
      )
    );
  }
}

以上就是关于flutter_sequence_animation插件的介绍和使用方法，希望对你有所帮助。