flutter_transition_animation 1.0.1+2

A shwo wondfull messge Flutter package.if you like used in other cases,it is also nice.

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