一波Flutter酷炫特效来袭，持续更新
前言
掌握用户界面与交互设计不仅是大前端开发者的必修技能之一，在学习Flute（ Flutter 的前身）期间更是不可或缺的基础。本人在学习Flute期间成功开发了几款具有创新性的跨平台应用。然而, 虽然使用Flute构建原生组件并非易事, 但其跨平台优势无可替代。本文旨在介绍FluteEffect库的基本功能及其在实际项目中的应用方法。
项目介绍
Flutter_effects是一个由多个相关软件包构成的集合，在这里我们致力于通过纯Flutter技术打造令人惊艳的用户界面特效方案。该方案不仅适用于Android及iOS平台运行流畅体验卓越而且还在不断优化中目前正处于初步发展阶段热忱欢迎各位提出宝贵意见及问题反馈如果你有创意的想法我们愿意倾听并共同加入我们的开发团队中来！
已经实现的功能：
| 类型 | 支持子widget | 备注 |
|---|---|---|
| 差字缩放 | 文本 | 仅支持字符，不支持富文本 |
| 边界线条 | 所有 | - |
| 彩虹字体 | 文本 | 当前仅支持文本，富文本待定 |
| 粒子爆炸 | 所有 | 支持所有widget，包括图片 |
| 狠狠砸地 | 所有 | - |
| 刮刮卡 | 所有 | 前景需要用canvas绘制 |
| 更多功能 | - | 开发中。。。 |
使用介绍
差字缩放
void initState() {
super.initState();
sentences = [
"What is design?",
"Design is not just",
"what it looks like and feels like.",
"Design is how it works. \n- Steve Jobs",
"Older people",
"sit down and ask,",
"'What is it?'",
"but the boy asks,",
"What can I do with it?. \n- Steve Jobs",
"Swift",
"Objective-C",
"iPhone",
"iPad",
"Mac Mini",
"MacBook Pro",
"Mac Pro",
"爱老婆",
"老婆和女儿"
];
}
DiffScaleText(
text: sentences[diffScaleNext % sentences.length],
textStyle: TextStyle(fontSize: 20, color: Colors.blue),
)DiffScaleText目前仅限于处理中英文字符，并无法处理表情符号和其他复杂格式；
参数text用于指定显示的内容，在每次更新时只需修改text字段并重新构建即可；
无需额外操作来保存历史记录。
边界线条
LineBorderText(
child: Text(
"Border Effect",
style: TextStyle(fontSize: 20),
),
autoAnim: true)LineBorderText允许任何widget充当其子项，并通过参数autoAnim控制生成时是否应启动预设动画。
彩虹字体
RainbowText(colors: [
Color(0xFFFF2B22),
Color(0xFFFF7F22),
Color(0xFFEDFF22),
Color(0xFF22FF22),
Color(0xFF22F4FF),
Color(0xFF5400F7),
], text: "Welcome to BBT", loop: true)RainbowText目前允许用户通过设置参数来实现文字颜色的变化功能，并通过loop参数控制动画循环执行的效果。
粒子爆炸
ExplosionWidget(
tag: "Explosion Text",
child: Container(
alignment: Alignment.center,
color: Colors.blueAccent,
child: Text(
"Explosion Text",
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold),
)))ExplosionWidget能够接受多种不同类型的widget作为其子组件，并采用参数tag来标识每个子组件的独特性。为了避免在进行rebuild操作时失效，请确保每次修改子组件时也相应更新其对应的tag；否则，在进行rebuild操作时将无法实现预期的效果
狠狠砸地
AnvilEffectWidget(child: Text(
"?AnvilEffect?",
style: TextStyle(color: Colors.white, fontSize: 20),
)AnvilEffectWidget支持任意类型的widget作为child;
刮刮卡
ScratchCardWidget(
strokeWidth: 20,
threshold: 0.5,
foreground: (canvas, size, offset) {
if (_image != null) {
double scale;
double dx = 0;
double dy = 0;
if (_image.width * size.height >
size.width * _image.height) {
scale = size.height / _image.height;
dx = (size.width - _image.width * scale) / 2;
} else {
scale = size.width / _image.width;
dy = (size.height - _image.height * scale) / 2;
}
canvas.save();
canvas.translate(dx, dy);
canvas.scale(scale, scale);
canvas.drawImage(_image, Offset(0, 0), new Paint());
canvas.restore();
} else {
canvas.drawRect(
Rect.fromLTWH(0, 0, size.width, size.height),
Paint()
..color = Colors.grey);
}
},
child: Container(
color: Colors.blueAccent,
alignment: Alignment.center,
child: Image.asset(
"assets/images/icon_sm_sigin_status_three.png",
fit: BoxFit.scaleDown, height: 20,),
))ScratchCardWidget参数较多，一个一个看：
- 划痕宽度表示人机交互中的触感反馈效果；
- 清除前景覆盖物所需的关键阈值参数；
- 用于绘制前景覆盖物的功能块；
- 该元素即为刮刮卡内容区域；
- 基于canvas绘制表面、指定大小以及设置偏移量。
最新效果将不断更新，请随时关注flutter_effects；
下一步计划
-
优化现有功能：
当前功能我用一周的业余时间赶出来的，难免有不当之处，事不在多而在于精，优化性能和api调用可能是比较重要的; -
提交至dart pub：将项目提交至pub平台后会更加便捷，在此之前可能需要将模块重新划分以便分开展示；
- 引入事件的方法：目前采用rebuild的方式来触发动画的方法并不算是一种巧妙的选择；
- 新的功能导入：新功能的引入带来了良好的效果让我有兴趣尝试；
致谢：
本项目实施过程中，部分灵感来自原生代码实现：
Android粒子爆炸效果：https://github.com/tyrantgit/ExplosionField
Android酷炫TextView：https://github.com/hanks-zyh/HTextView
感谢上述项目作者hanks和tyrantgit，致谢！