一波Flutter酷炫特效来袭,持续更新

0
回复
234
查看
[复制链接]

51

主题

51

帖子

452

安币

攻城狮

Rank: 3Rank: 3

发表于 2019-4-18 10:20:01 | 显示全部楼层 |阅读模式
如果对本篇文章感兴趣,请前往,原文地址:http://www.apkbus.com/blog-868373-79898.html

### 前言实现UI和交互是大前端开发者的必备技能,也是掌握Flutter开发的重点;在下学习Flutter之际,实现了几种客户端上常见的酷炫UI特效,虽说是用Flutter造原生的轮子,但Flutter跨平台的特性是原生不能比拟的,更何况还有不弱的性能表现。本文主要是介绍Flutter特效库[flutter_effects](https://github.com/HitenDev/flutter_effects)的基本情况和使用;![image](//upload-images.jianshu.io/upload_images/869487-55294fcbccc4edef?imageMogr2/auto-orient/strip|imageView2/2/w/750/format/webp)### 项目介绍[flutter_effects](https://github.com/HitenDev/flutter_effects):是多个Flutter package工程组成,目标是用纯Flutter来实现炫酷的UI特效,支持android和ios运行;目前项目刚处于起步阶段,欢迎大家提出建议和问题反馈,如果你有好的想法,欢迎提出需求或者一起参与进来;![image](//upload-images.jianshu.io/upload_images/869487-a27456523c45b8f7?imageMogr2/auto-orient/strip|imageView2/2/w/270/format/webp)#### 已经实现的功能:| 类型 | 支持子widget | 备注 || --- | --- | --- || 差字缩放 | 文本 | 仅支持字符,不支持富文本 || 边界线条 | 所有 | - || 彩虹字体 | 文本 | 当前仅支持文本,富文本待定 || 粒子爆炸 | 所有 | 支持所有widget,包括图片 || 狠狠砸地 | 所有 | - || 刮刮卡 | 所有 | 前景需要用canvas绘制 || 更多功能 | - | 开发中。。。 |#### 使用介绍##### 差字缩放![image](//upload-images.jianshu.io/upload_images/869487-9f2e47abe5f4ac9d?imageMogr2/auto-orient/strip|imageView2/2/w/668/format/webp)```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然后rebuild即可,不需要手动保存历史text;##### 边界线条![image](//upload-images.jianshu.io/upload_images/869487-fbbf02d9d644b689?imageMogr2/auto-orient/strip|imageView2/2/w/700/format/webp)```LineBorderText(    child: Text(      "Border Effect",      style: TextStyle(fontSize: 20),    ),    autoAnim: true)```LineBorderText支持任意widget作为child,参数autoAnim控制创建时是否自动执行一遍动画;##### 彩虹字体![image](//upload-images.jianshu.io/upload_images/869487-c861f40af5e230ee?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp)```RainbowText(colors: [  Color(0xFFFF2B22),  Color(0xFFFF7F22),  Color(0xFFEDFF22),  Color(0xFF22FF22),  Color(0xFF22F4FF),  Color(0xFF5400F7),], text: "Welcome to BBT", loop: true)```RainbowText暂时支持文字的颜色变换,参数loop控制是否循环执行动画;##### 粒子爆炸![image](//upload-images.jianshu.io/upload_images/869487-dcb8c3a87c9bae27?imageMogr2/auto-orient/strip|imageView2/2/w/698/format/webp)```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作为child,注意参数tag表示child的唯一性,如果改变了child一定要改变tag,否则rebuild不会执行爆炸效果;##### 狠狠砸地![image](//upload-images.jianshu.io/upload_images/869487-f86f9e2f87042c2f?imageMogr2/auto-orient/strip|imageView2/2/w/670/format/webp)```AnvilEffectWidget(child: Text(  "  继续阅读全文



想在安卓巴士找到更多优质博文,可移步博客区

如果对本篇文章感兴趣,请前往,
原文地址:
http://www.apkbus.com/blog-868373-79898.html
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )