一大波Flutter酷炫动画来袭

前言

实现UI和交互是大前端开发者的必备技能，也是掌握Flutter开发的重点；在下学习Flutter之际，实现了几种客户端上常见的酷炫UI特效，虽说是用Flutter造原生的轮子，但Flutter跨平台的特性是原生不能比拟的，更何况还有不弱的性能表现。本文主要是介绍Flutter hub特效库flutter_easyHub的基本情况和使用；

项目介绍

flutter_easyHub 是纯粹的flutter编写，现在支持30中动画，在iOS和android上运行流畅，目前项目已经开发了30种动画，如果你有好的idea，可以及时pr。

详细动画

default	CircularProgress	showErrorHub	showComplateHub	LineProgress
CircularProgressEasyOutEasyIn	CircularProgressEasy	singleFlipingRect	beattingCircle	singlebeattingCircle
beatingRects	rotatingCircles	rotatingDeformedCircles	rotatingTwoRect	rotatingTwoCircles
foldingRect	swingingBall	waves	spitBubbles	movingCube
rotatingTwoColorBall	pendulumingBall	flashingBalls	fallingBall	hourglass
dancingCube	swingingBall	creepingBug

如何使用

dependencies:
    flutter_easyhub: ^0.3.1

导入文件

$ flutter pub get

import 'package:flutter_easyhub/flutter_easyhub.dart';

初始化

EasyHub.getInstance
 ..setBackgroundColor(Colors.black38)
 ..setCircleBackgroundColor(Colors.lightGreen)
 ..setValueColor(new AlwaysStoppedAnimation(Colors.black38));

OR

EasyHub hub = EasyHub(
   circlebackgroundColor: Colors.black38,
   circleValueColor: new AlwaysStoppedAnimation(Colors.teal),
   background: Colors.black38);
   // OR
 hub
   ..setParameter(
       background: Colors.black38,
       circleValueColor: new AlwaysStoppedAnimation(Colors.black38),
       circlebackgroundColor: Colors.lightGreen);
hub.show_hub(
   context: context, type: EasyHubType.EasyHub_msg, msg: 'loading');

// 隐藏
hub.dismiss_hub();
// OR
 EasyHub.dismiddAll();

隐藏所有

 EasyHub.dismiddAll();

展示文本

 EasyHub.show(context, 'loading');

展示HUB

 EasyHub.showHub(context);
 

展示文本 + hub

 EasyHub.showMsg(context, '加载文字展示');

展示错误

EasyHub.showErrorHub(context, '网络错误');

展示完成

EasyHub.showComplateHub(context, '下载完成');

更新日志

0.3.1 2020.05.12

游泳的小球，fix 一些 bug

0.3.0 2020.05.11

添加跳动的矩形

0.2.9 2020.05.11

添加正方体移动效果
添加魔球旋转效果
添加跳舞的4个小球效果
添加闪烁的九饼
添加掉落的小球动画
沙漏动画

0.2.3 2020.05.07

添加水滴

0.2.2 2020.05.06

添加波浪动画

0.2.1 2020.04.29

添加钟摆动画，支持自定义球状半径和颜色

0.2.0 2020.04.29

添加多种动画

[0.0.5 -- 0.1.1] 2020.04.24

更新备注和read me

[0.0.3 -- 0.0.4] 2020.04.23

1. 增加菊花转,适配android 和iOS

2.增加错误和完成显示效果

1. 增加实例消失函数

[0.0.2] 2020.04.21

优化文字动画分别展示
增加隐藏所有hub

[0.0.1] 2020.04.20

添加浮窗，支持文字、进度条

更多效果持续更新，请关注flutter_easyHub