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动画曲线有很多种,
![]() | ||
![]() | ||
![]() | ||
![]() | ![]() | |
![]() | ![]() | |
![]() | ||
![]() | ![]() | |
![]() | ||
![]() | ||
![]() | ![]() | |













