一波Flutter酷炫特效來襲，持續更新

時間 2019-11-07

標籤 flutter 特效來襲持續更新简体版

原文原文鏈接

前言

實現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