title: 'AnimatedPositionedDirectional' description: '控件介绍' type: widgets

AnimatedPositionedDirectional

AnimatedPositionedDirectional是一个隐式的动画组件，提供动态改变位置的动画组件，用法如下：

Stack(
      children: <Widget>[
        AnimatedPositionedDirectional(
          start: _start,
          width: 50,
          height: 50,
          duration: Duration(seconds: 2),
          child: Container(color: Colors.red),
        ),
      ],
    )

相关参数说：

• duration参数是动画执行的时间。

• 提供top、bottom、start、end四种定位属性，分别表示距离上、下、开始、结尾的距离。

• 只能用于Stack组件中。

• start、end和width3个参数只能设置其中2个，因为设置了其中2个，第三个已经确定了，同理top、bottom和height也只能设置其中2个。

仅仅是构建这样一个组件是不会有动画效果，需要让_start参数发生变化，点击按钮设置新的_start值：

RaisedButton(
          onPressed: () {
            setState(() {
              _start = 180;
            });
          },
        )

效果如下：

通过curve参数设置动画执行的曲线，默认直线执行，系统提供了很多中动画执行曲线，比如加速、减速、弹簧等，用法如下：

AnimatedOpacity(
  curve: Curves.easeIn,
  ...
)

如果想要在动画执行结束时处理一些事情，可以在onEnd回调中处理，用法如下：

AnimatedOpacity(
  onEnd: (){
    //动画执行结束回调
  },
  ...
)