Flutter学习笔记33-交织动画 Hero动画

交织动画

有些时候我们可能会需要一些复杂的动画，这些动画可能由一个动画序列或重叠的动画组成，要实现这种效果，使用交织动画（Stagger Animation）会非常简单。要创建交织动画，需要使用多个动画对象（Animation）。一个AnimationController控制所有的动画对象。给每一个动画对象指定时间间隔。
所有动画都由同一个AnimationController驱动，无论动画需要持续多长时间，控制器的值必须在0.0到1.0之间，而每个动画的间隔也必须介于0.0和1.0之间。对于在间隔中设置动画的每个属性，需要分别创建一个Tween用于指定该属性的开始值和结束值。也就是说0.0到1.0代表整个动画过程，也可以给不同动画指定不同的起始点和终止点来决定它们的开始时间和终止时间。代码示例：

class StaggerAnimationDemo extends StatefulWidget {
  @override
  _StaggerAnimationDemoState createState() => _StaggerAnimationDemoState();
}

class _StaggerAnimationDemoState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  Animation _opacityAnimation;
  Animation _sizeAnimation;
  Animation _colorAnimation;
  Animation _radiansAnimation;

  @override
  void initState() {
    super.initState();
    // 创建AnimationController
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    // Tween
    _opacityAnimation =
        CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _sizeAnimation = Tween(
      begin: 50.0,
      end: 150.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.6, // 间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
    _colorAnimation = ColorTween(
      begin: Colors.orange,
      end: Colors.purple,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.6, // 间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );
    _radiansAnimation = Tween(begin: 0.0, end: 2 * pi).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.6,
          1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    // 监听动画状态改变
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StaggerAnimation Demo'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Opacity(
              opacity: _opacityAnimation.value ?? 0.0,
              child: Transform(
                transform: Matrix4.rotationZ(_radiansAnimation.value),
                alignment: Alignment.center,
                child: Container(
                  width: _sizeAnimation.value,
                  height: _sizeAnimation.value,
                  color: _colorAnimation.value,
                ),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop();
            print(_controller.status);
          } else if (_controller.status == AnimationStatus.forward) {
            _controller.forward();
          } else if (_controller.status == AnimationStatus.reverse) {
            _controller.reverse();
          } else {
            _controller.forward();
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    // 释放动画资源
    _controller.dispose();
    super.dispose();
  }
}

Hero动画

移动端开发会经常遇到类似这样的需求：点击一个头像，显示头像的大图，并且从原来图像的Rect到大图的Rect。点击一个商品的图片，可以展示商品的大图，并且从原来图像的Rect到大图的Rect。这种跨页面共享的动画被称之为享元动画（Shared Element Transition）。
在Flutter中，有一个专门的Widget可以来实现这种动画效果：Hero，实现Hero动画，需要如下步骤：
1.在第一个Page1中，定义一个起始的Hero Widget，被称之为source hero，并且绑定一个tag；
2.在第二个Page2中，定义一个终点的Hero Widget，被称之为destination hero，并且绑定相同的tag；
3.可以通过Navigator来实现第一个页面Page1到第二个页面Page2的跳转过程；
Flutter会设置Tween来界定Hero从起点到终端的大小和位置，并且在图层上执行动画效果。代码示例：

class HeroAnimationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          childAspectRatio: 16 / 9,
        ),
        children: List.generate(20, (index) {
          final imageURL = "https://picsum.photos/500/500?random=$index";
          return GestureDetector(
            onTap: () {
              Navigator.of(context).push(
                PageRouteBuilder(
                    pageBuilder: (context, animation, secondaryAnimation) {
                  return FadeTransition(
                    opacity: animation,
                    child: ImageDetailPage(imageURL),
                  );
                }),
              );
            },
            child: Hero(
                tag: imageURL,
                child: Image.network(
                  imageURL,
                  fit: BoxFit.cover,
                )),
          );
        }),
      ),
    );
  }
}

class ImageDetailPage extends StatelessWidget {
  final String _imageURL;

  ImageDetailPage(this._imageURL);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Hero(
            tag: _imageURL,
            child: Image.network(_imageURL),
          ),
        ),
      ),
    );
  }
}

代码传送门