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('动画结束');
},
),
),
);
示例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('动画结束');
},
),
),
);
Curves动画曲线有很多种,