[-Flutter趣玩篇-] 出神入化的Align+动画

龙少:上一个Align玩的出神入化。现在有个需求，让一个组件以某个函数图像动起来。你说咱们要不先去找块砖头再和设计谈谈。

捷特: 别激动，都是成年人。多大点事，有哥在。龙少:有什么好主意。捷特: Align。龙少:神TM又Align，能让你水两篇文章，这么厉害? 捷特:当然Animation也是本文的要点

代码实现

捷特噼里啪啦三分钟搞定:实现好了sin运动，自自己封装一下龙少:少侠请留步，这是你的文章好吧，我是导演叫来打酱油的。捷特:想偷个懒都不行，哎。

class MathRunner extends StatefulWidget {
  MathRunner({
    Key key,
  }) : super(key: key);

  @override
  _MathRunnerState createState() => _MathRunnerState();
}

class _MathRunnerState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation animationX;
  double _x = -1.0;
  double _y = 0;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    animationX = Tween(begin: -1.0, end: 1.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _x = animationX.value;
          _y = f(_x);
        });
      });
    super.initState();
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _controller.repeat(reverse: true);
      },
      child: Container(
        width: 300,
        color: Colors.grey.withAlpha(33),
        height: 150,
        child: Align(
          alignment: Alignment(_x, _y),
          child: CircleAvatar(
            backgroundImage: AssetImage("images/icon_head.png"),
          ),
        ),
      ),
    );
  }
  
  double f(double x) {
    double y = sin(pi * x);
    return y;
  }
}

实现思路

捷特:用一个AnimationController作为0~1的动画器，再使用Tween给这个动画器加buff,使其在-1 ~ 1间运动，成为animationX。上一篇也说了Align的出神入化之处现在只需要通过_y = f(_x);动态修改位置即可。

简单封装

typedef FunNum1=Function(double t );
class MathRunner extends StatefulWidget {
  MathRunner({Key key, this.child, this.f, this.g,this.reverse=true}) : super(key: key);
  final Widget child;
  final FunNum1 f;
  final FunNum1 g;
  final bool reverse;

  @override
  _MathRunnerState createState() => _MathRunnerState();
}

class _MathRunnerState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation animationX;
  double _x = -1.0;
  double _y = 0;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    animationX = Tween(begin: -1.0, end: 1.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _x = widget.f(animationX.value);
          _y = widget.g(animationX.value);
        });
      });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _controller.repeat(reverse: widget.reverse);
      },
      child: Container(
        child: Align(
          alignment: Alignment(_x, _y),
          child: widget.child,
        ),
      ),
    );
  }
}

捷特:sin运动，简单

Container(
    width: 150,
    height: 150,
    child: MathRunner(
        f: (t)=>t,
        g: (t)=>sin(t*pi),
        child:CircleAvatar(
        backgroundImage: AssetImage("images/icon_head.png"),
        )));

捷特:圆形旋转，走你

    var circle=Container(
        width: 150,
        height: 150,
        child: MathRunner(
          reverse: false,
          f: (t)=>cos(t*pi),
          g: (t)=>sin(t*pi),
          child: CircleAvatar(
            backgroundImage: AssetImage("images/icon_head.png"),
          ),
        ));

椭圆运动:so easy (下面是四个倾斜的椭圆环绕)

Container(
    width: 150,
    height: 150,
    child: MathRunner(
         reverse: false,
         f: (t)=>cos(t*pi),
         g: (t)=>0.6*sin(t*pi),
         child:CircleAvatar(
        backgroundImage: AssetImage("images/icon_head.png"),
)));

纯真的笛卡尔心形线，拿去:

var love=Container(
    width: 100,
    height: 100,
    child: MathRunner(
        reverse: false,
        f: (t)=>1*(2*cos(t*pi)-cos(2*t*pi)),
        g: (t)=>1*(2*sin(t*pi)-sin(2*t*pi)),
        child:Ball(color: Colors.red,)));

龙少:其实这个需求不是设计提的，只是我想做个心形线给巫缨,兄弟却之不恭捷特: ....

龙少: 昨天我从小学一年级的数学看到六年级。感觉真是温故而知新啊，站在如今的角度重新审视知识，会有完全不一样的想法。等我今天看完初中数学，应该也能和你一样厉害。捷特: 啧啧，虽然至今为止没有超过初中数学知识。不过，看来不让你体验一下离散数学的恐怖，你还真就小瞧了我。