champkeh / flutter_animation_demo

学习Flutter中的Animation，尝试写出各种动画效果

Flutter Animation Demo

这个项目用于学习Flutter中的Animation，并尝试写出(收集)各种炫酷的动画效果。

Animation相关教程

1. 官方文档中的动画介绍
2. 《Flutter实战》电子书中的动画章节
3. medium文章: Slidable:A Flutter story
4. medium文章: How I replicated the iOS sliding row animation in Flutter
5. medium文章: Create simple animations for your articles with Flutter

Animation示例

StaggerAnimation

核心代码如下:

class StaggerAnimation extends StatelessWidget {
  StaggerAnimation({Key key, this.controller}) : super(key:key) {
    height = Tween<double>(begin: 0, end: 300).animate(CurvedAnimation(
        parent: controller,
        curve: Interval(0.0, 0.5, curve: Curves.easeOut),
        reverseCurve: Interval(0.0, 0.5, curve: Curves.easeIn)));

    ColorTween colorTween1 = ColorTween(begin: Colors.red, end: Colors.green);
    ColorTween colorTween2 = ColorTween(begin: Colors.green, end: Colors.blue);
    color = TweenSequence([
      TweenSequenceItem(tween: colorTween1, weight: 50),
      TweenSequenceItem(tween: colorTween2, weight: 50),
    ]).animate(controller);

    padding = Tween<EdgeInsets>(
      begin: EdgeInsets.only(left: .0),
      end: EdgeInsets.only(left: 250.0),
    )
        .chain(CurveTween(curve: Interval(0.5, 1.0, curve: Curves.ease)))
        .animate(controller);
  }

  final AnimationController controller;
  Animation<double> height;
  Animation<Color> color;
  Animation<EdgeInsets> padding;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (BuildContext context, Widget child) {
        return Container(
          alignment: Alignment.bottomLeft,
          padding: padding.value,
          child: Container(
            color: color.value,
            width: 50,
            height: height.value,
          ),
        );
      },
    );
  }
}

AnimatedList

这个动画主要用到了AnimatedList这个系统提供的widget 文章链接