flutter_transition_animation

🔥🔥🔥可配置的动画转场,用来展示顶部提示信息更香哦

效果🔥🔥🔥

如何使用

pub

在工程文件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即可。推荐使用ValueKey<int>()。

优势

🔥🔥🔥

优势是开发者可以在widget的任意地方使用该动画,不局限于屏幕中间或者顶部。推荐搭配Stack()使用更香。

🌰🌰🌰examaple

/// 默认值是 0,
ValueKey<int> _key = ValueKey(0);

  /// 执行动画 因为_key 值变了

_key = ValueKey(_key.value + 1);
setState(() {});

/// UI 
Container(
    height: 200,
    width: 300,
    color: Colors.black12,
    alignment: Alignment.topCenter,
    child: Stack(
      children: [
        Positioned.fill(child: child),
        Positioned(
          left: 0,
          right: 0,
          height: 30,
          child: Container(
            key: _key,
            child: FlutterEasyMessage(
            /// 当value不等于0则刷新
            shouldShow: _key.value != 0,
              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 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;

❤️❤️❤️喜欢就留下你的✨✨

🔐License

Libraries

animation
dismiss_controller
easy_message
fade
flip
flutter_easy_message
size