🔥🔥🔥可配置的动画转场,用来展示顶部提示信息更香哦
在工程文件yaml
写入下面配置:
flutter_transition_animation: ^*.*.*
⚠️ 最新版本查看
import 'package:flutter_transition_animation/flutter_easy_message.dart';
动画进入可以定制进入的时间,动画规则,和动画的方向。
动画方向 | 含义 |
---|---|
rtl | 右到左 |
ltr | 左到右 |
ttb | 顶部到底部 |
btt | 底部到顶部 |
thv | 水平合并到一条线 |
tvc | 竖直合成到一条线 |
动画规则 | 含义 |
---|---|
easy | 渐隐渐显 |
easIn | 缓慢进入 |
line | 匀速 |
更多规则见: animation
时间属性 | 含义 |
---|---|
duration | 动画停留时间 |
showDuration | 动画从没有到完全展示时间 |
hideDuration | 动画消失使用的时间 |
⚠️ 只需要设定不一样的key即可。
Container(
height: 200,
width: 300,
color: Colors.black12,
/// 每次刷新给不同 key 可以执行动画
key: UniqueKey(),
alignment: Alignment.topCenter,
child: Container(
width: 200,
height: 250,
child: FlutterEasyMessage(
child: child,
messageChild: messageChild,
duration: Duration(seconds: 2),
hideAnimationStyle: dismissStyle,
showAnimationStyle: style,
showAnimaitonDirection: showFlipStyle,
hideAnimaitonDirection: hideFlipStyle,
hideDuration: Duration(seconds: 1),
showDuration: Duration(seconds: 1),
curve: _showCurve,
reverseCurve: _hideCurve,
),
),
)
/// 主体 部件
final Widget child;
/// 展示 动画的部件
final Widget messageChild;
/// 动画停留时间展示时间默认 [1000ms]
final Duration duration;
/// 展示动画时间 默认 [300ms]
final Duration showDuration;
/// 隐藏动画时间 默认 [300ms]
final Duration hideDuration;
/// 动画出现类别 默认是[EasyShowOrHideStyle.defaultStyle]
final EasyShowOrHideStyle showAnimationStyle;
/// 动画消失类别 默认是[EasyShowOrHideStyle.defaultStyle]
final EasyShowOrHideStyle hideAnimationStyle;
/// 动画出现时候的方向,默认是[EasyAnimaitonDirection.ltr]
final EasyAnimationDirection showAnimaitonDirection;
/// 动画隐藏时候的方向,默认是[EasyAnimaitonDirection.btt]
final EasyAnimationDirection hideAnimaitonDirection;
/// 进入的时候的规则,默认是[Curves.linear] [https://api.flutter.dev/flutter/animation/Curves-class.html]
final Curve curve;
/// 返回时候 规则,默认是[Curves.linear][https://api.flutter.dev/flutter/animation/Curves-class.html]
final Curve reverseCurve;