Flutter链式动画插件makdev_chain_animation的使用

makdev_chain_animation 是一个用于 Flutter 的链式动画插件，它允许开发者以链式调用的方式创建复杂的动画序列。这个插件简化了动画的管理和组合，使得创建复杂的动画效果变得更加容易。

安装

首先，你需要在 pubspec.yaml 文件中添加 makdev_chain_animation 依赖：

dependencies:
  flutter:
    sdk: flutter
  makdev_chain_animation: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

makdev_chain_animation 的核心是 ChainAnimation 类，它允许你通过链式调用来定义动画序列。

1. 创建动画链

import 'package:flutter/material.dart';
import 'package:makdev_chain_animation/makdev_chain_animation.dart';

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  late ChainAnimation _chainAnimation;

  @override
  void initState() {
    super.initState();

    _chainAnimation = ChainAnimation(
      vsync: this,
    )
      ..add(
        duration: Duration(seconds: 1),
        tween: Tween<double>(begin: 0.0, end: 1.0),
        builder: (context, child, value) {
          return Opacity(
            opacity: value,
            child: child,
          );
        },
      )
      ..add(
        duration: Duration(seconds: 1),
        tween: Tween<double>(begin: 100.0, end: 200.0),
        builder: (context, child, value) {
          return Container(
            width: value,
            height: value,
            color: Colors.blue,
            child: child,
          );
        },
      )
      ..start();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _chainAnimation.animate(
        child: Text('Hello, Chain Animation!'),
      ),
    );
  }

  @override
  void dispose() {
    _chainAnimation.dispose();
    super.dispose();
  }
}

2. 解释

• ChainAnimation: 这是动画链的核心类，它管理动画的序列和执行。
• vsync: 需要传入 TickerProvider，通常使用 SingleTickerProviderStateMixin。
• add: 用于添加一个动画步骤。你可以指定动画的持续时间、Tween 和 builder 函数。
• builder: 这是一个回调函数，用于构建动画的每一帧。你可以在这里使用 value 来更新 UI。
• start: 开始执行动画链。
• animate: 用于将动画应用到子组件上。

3. 链式调用

你可以通过链式调用来添加多个动画步骤，每个步骤都会在前一个步骤完成后自动执行。

_chainAnimation
  ..add(
    duration: Duration(seconds: 1),
    tween: Tween<double>(begin: 0.0, end: 1.0),
    builder: (context, child, value) {
      return Opacity(
        opacity: value,
        child: child,
      );
    },
  )
  ..add(
    duration: Duration(seconds: 1),
    tween: Tween<double>(begin: 100.0, end: 200.0),
    builder: (context, child, value) {
      return Container(
        width: value,
        height: value,
        color: Colors.blue,
        child: child,
      );
    },
  )
  ..start();

高级用法

1. 延迟动画

你可以使用 delay 参数来延迟动画的开始时间。

_chainAnimation.add(
  duration: Duration(seconds: 1),
  delay: Duration(seconds: 1),
  tween: Tween<double>(begin: 0.0, end: 1.0),
  builder: (context, child, value) {
    return Opacity(
      opacity: value,
      child: child,
    );
  },
);

2. 重复动画

你可以使用 repeat 参数来重复动画。

_chainAnimation.add(
  duration: Duration(seconds: 1),
  repeat: true,
  tween: Tween<double>(begin: 0.0, end: 1.0),
  builder: (context, child, value) {
    return Opacity(
      opacity: value,
      child: child,
    );
  },
);

3. 自定义动画曲线

你可以使用 curve 参数来指定动画的曲线。

_chainAnimation.add(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  tween: Tween<double>(begin: 0.0, end: 1.0),
  builder: (context, child, value) {
    return Opacity(
      opacity: value,
      child: child,
    );
  },
);