實現UI和交互是大前端開發者的必備技能,也是掌握Flutter開發的重點;在下學習Flutter之際,實現了幾種客戶端上常見的酷炫UI特效,雖然說是用Flutter造原生的輪子,但Flutter跨平臺的特性是原生不能比擬的,更況且還有不弱的性能表現。本文主要是介紹Flutter特效庫flutter_effects的基本狀況和使用;前端
flutter_effects:是多個Flutter package工程組成,目標是用純Flutter來實現炫酷的UI特效,支持android和ios運行;目前項目剛處於起步階段,歡迎你們提出建議和問題反饋,若是你有好的想法,歡迎提出需求或者一塊兒參與進來;android
類型 | 支持子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而後rebuild便可,不須要手動保存歷史text;ios
LineBorderText(
child: Text(
"Border Effect",
style: TextStyle(fontSize: 20),
),
autoAnim: true)
複製代碼
LineBorderText支持任意widget做爲child,參數autoAnim控制建立時是否自動執行一遍動畫;git
RainbowText(colors: [
Color(0xFFFF2B22),
Color(0xFFFF7F22),
Color(0xFFEDFF22),
Color(0xFF22FF22),
Color(0xFF22F4FF),
Color(0xFF5400F7),
], text: "Welcome to BBT", loop: true)
複製代碼
RainbowText暫時支持文字的顏色變換,參數loop控制是否循環執行動畫;github
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不會執行爆炸效果;面試
AnvilEffectWidget(child: Text(
"👉AnvilEffect👈",
style: TextStyle(color: Colors.white, fontSize: 20),
)
複製代碼
AnvilEffectWidget支持任意類型的widget做爲child;canvas
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參數較多,一個一個看:api
粒子爆炸效果:github.com/tyrantgit/E…bash
酷炫TextView:github.com/hanks-zyh/H…微信
感謝原生實現庫做者hanks和tyrantgit,致謝!
做者:HitenDev 連接:www.jianshu.com/p/dcec5c4f1…
Android App瘦身新姿式——Android App Bundle
阿里:我爲何禁止把SimpleDateFormat定義爲static類型的?
最後若是對技術比較感興趣,歡迎關注個人微信公衆號:終端研發部,id:codeGooger,一塊兒進階技術