Flutter动画效果插件animator的使用

Flutter中的animator包是一个强大的动画库，它使得创建和控制动画变得异常简单。这个库提供了两种主要的Widget：Animator和AnimateWidget，它们可以帮助开发者快速实现显式和隐式的动画效果。

Animator与AnimateWidget

• Animator 是最初引入的Widget，主要用于显式动画。
• AnimateWidget 是一个更强大的Widget，它可以用于隐式动画、显式动画以及交错动画（staggered animation）。

AnimateWidget参数设置

AnimateWidget({
  Key? key, 
  double? initialValue,
  double lowerBound = 0.0,
  double upperBound = 1.0,
  Duration duration = const Duration(milliseconds: 500),
  Duration? reverseDuration,
  Curve curve = Curves.linear,
  Curve? reverseCurve,
  AnimationBehavior animationBehavior = AnimationBehavior.normal,
  int? repeats,
  int? cycles,
  void Function()? endAnimationListener,
  bool triggerOnInit = true,
  bool triggerOnRebuild = false,
  bool resetOnRebuild = false,
  required Widget Function(BuildContext, Animate) builder,
})

参数说明：

• initialValue, lowerBound, upperBound: 动画控制器的初始值、下限和上限。
• duration, reverseDuration: 动画正向和反向的时间。
• curve, reverseCurve: 动画正向和反向的曲线。
• animationBehavior: 控制器在AccessibilityFeatures.disableAnimations为true时的行为。
• repeats, cycles: 定义动画重复次数或周期数。
• endAnimationListener: 动画结束时触发的回调函数。
• triggerOnInit, triggerOnRebuild, resetOnRebuild: 控制动画何时启动或重置。
• builder: 构建动画内容的回调函数。

隐式动画示例

以下是如何使用AnimateWidget来创建一个类似AnimatedContainer的效果：

Center(
  child: AnimateWidget(
    duration: const Duration(seconds: 2),
    curve: Curves.fastOutSlowIn,
    builder: (context, animate) => Container(
      width: animate.call(selected ? 200.0 : 100.0),
      height: animate.call(selected ? 100.0 : 200.0, 'height'),
      color: animate.call(selected ? Colors.red : Colors.blue),
      alignment: animate.call(selected ? Alignment.center : AlignmentDirectional.topCenter),
      child: const FlutterLogo(size: 75),
    ),
  ),
);

显式动画示例

下面是一个显式动画的例子，通过tween来控制旋转角度：

AnimatedWidget(
  duration: const Duration(seconds: 2),
  builder: (context, animate) {
    final angle = animate.fromTween(
      (currentValue) => Tween(begin: 0, end: 2 * 3.14),
    )!;
    
    return Transform.rotate(
      angle: angle,
      child: const FlutterLogo(size: 75),
    );
  },
);

使用Flutter的过渡Widget

你还可以结合Flutter内置的过渡Widget，如PositionedTransition等，来创建复杂的动画效果：

AnimateWidget(
  builder: (context, animate) => PositionedTransition(
    rect: RelativeRectTween(
      begin: RelativeRect.fromSize(const Rect.fromLTWH(0, 0, smallLogo, smallLogo), biggest),
      end: RelativeRect.fromSize(
        Rect.fromLTWH(biggest.width - bigLogo, biggest.height - bigLogo, bigLogo, bigLogo),
        biggest,
      ),
    ).animate(animate.curvedAnimation),
    child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
  ),
);

交错动画示例

交错动画允许你在同一时间线内对不同的属性应用不同的动画效果：

class _MyStaggeredWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        setState(() {});
      },
      child: AnimateWidget(
        duration: const Duration(milliseconds: 2000),
        cycles: 2,
        triggerOnRebuild: true,
        triggerOnInit: false,
        builder: (context, animate) {
          final padding = animate
              .setCurve(Interval(0.250, 0.375, curve: Curves.ease))
              .fromTween(
                (_) => EdgeInsetsTween(
                  begin: const EdgeInsets.only(bottom: 16.0),
                  end: const EdgeInsets.only(bottom: 75.0),
                ),
              );
          // 其他属性类似设置...
          return Center(
            child: Container(
              width: 300.0,
              height: 300.0,
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.1),
                border: Border.all(color: Colors.black.withOpacity(0.5)),
              ),
              child: Container(
                padding: padding,
                alignment: Alignment.bottomCenter,
                child: Opacity(
                  opacity: opacity,
                  child: Container(
                    width: containerWidget,
                    height: containerHeight,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(color: Colors.indigo[300]!, width: 3.0),
                      borderRadius: borderRadius,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

示例项目

为了更好地理解如何使用animator库，可以参考以下完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animator Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Animator demo"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  goto(Widget page, BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => page,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            child: Text("Basic Animation 0"),
            onPressed: () => goto(BasicAnimation0(), context),
          ),
          ElevatedButton(
            child: Text("Basic Animation 1"),
            onPressed: () => goto(BasicAnimation1(), context),
          ),
          ElevatedButton(
            child: Text("Basic Animation 2"),
            onPressed: () => goto(MyCustomPainterAnimation(), context),
          ),
          ElevatedButton(
            child: Text("Implicit animation"),
            onPressed: () => goto(BasicAnimation3(), context),
          ),
        ],
      ),
    );
  }
}

以上代码展示了如何创建一个包含多个基本动画演示的应用程序。每个按钮点击后会导航到不同的页面，展示不同类型的动画效果。