Flutter小部件之AnimatedAlign

1,302 阅读1分钟

AnimatedAlign

Flutter 1.26.0-1.0.pre ,Dart 2.12.0 (build 2.12.0-141.0.dev)
简述:Align的动画版本,在给定的时间内,当alignment发生变化时,自动转换子部件的位置。

Flutter高仿抖音

属性释义
alignment → AlignmentGeometry对齐方式
child → Widget?子部件
curve → Curve动画曲线,默认是Curves.linear
duration → Duration动画执行时间
heightFactor → double?与Align用法相同,在AnimatedAlign父部件高度不指定的情况下起效果,AnimatedAlign高度为AnimatedAlign子部件的高度乘以heightFactor
widthFactor → double?与Align用法相同,在AnimatedAlign父部件高度不指定的情况下起效果,AnimatedAlign宽度为AnimatedAlign子部件的高度乘以widthFactor
onEnd → VoidCallback?动画结束时的回调

示例1 基本使用

Center(
      child: Container(
        color: Colors.red,
        width: 200,
        height: 200,
        child: AnimatedAlign(
          alignment: _selected ? Alignment.topRight:Alignment.bottomLeft,
          duration: Duration(seconds: 1),
          child: FlutterLogo(size: 50,),
          onEnd: (){
            showToast('动画结束');
          },
        ),
      ),
    );
  

img

示例2 动画曲线动画

Center(
      child: Container(
        color: Colors.red,
        width: 200,
        height: 200,
        child: AnimatedAlign(
          alignment: _selected ? Alignment.topRight:Alignment.bottomLeft,
          duration: Duration(seconds: 1),
          curve: Curves.bounceOut,
          child: FlutterLogo(size: 50,),
          onEnd: (){
            showToast('动画结束');
          },
        ),
      ),
    );

img

Curves动画曲线有很多种,

imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg
imgimgimg