AnimatedAlign

AnimatedAlign

AnimatedAlign组件方便我们构建位置动画，基本用法如下：

1. 指定初始位置即alignment属性
2. 指定动画持续时间即duration属性
3. 动画产生的条件alignment属性的只产生变化
4. curve可设置AnimatedAlign的子控件的运行轨迹

var _alignment = Alignment.topLeft;

@override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.lightBlue,
      child: AnimatedAlign(
        alignment: _alignment,
        duration: Duration(seconds: 2),
        child: IconButton(
          icon: Icon(Icons.print,color:Colors.red,size: 30,),
          onPressed: (){
            setState(() {
              _alignment = Alignment.bottomRight;
            });
          },
        ),
      ),
    );
  }

效果如下：

我们还可以通过curve设置动画曲线，用法如下：

AnimatedAlign(
  curve: Curves.bounceInOut,
  ...
)

onEnd是动画执行结束回调，用法如下：

AnimatedAlign(
  onEnd: (){
    print('onEnd');
  },
  ...
)