『Flutter-繪制篇』實現(xiàn)炫酷的雷電特效

前言

前不久，利用周末時間學(xué)習(xí)并完成一個簡單的 Flutter 項目 - 簡悅天氣牺六，簡約不簡單，豐富不復(fù)雜汗捡，這是一款簡約風(fēng)格的 flutter 天氣項目淑际，提供實時、多日扇住、24 小時春缕、臺風(fēng)路徑、語音播報以及生活指數(shù)等服務(wù)艘蹋，支持定位锄贼、刪除、搜索等操作女阀。

下圖為主頁效果宅荤，點擊下載進(jìn)行體驗：

圖1

項目中運用了大量的自定義繪制 widget，首頁豐富的自定義 chart 效果和炫酷的天氣背景動效浸策。天氣背景動效在不同的天氣氣象下展示不同的效果冯键。目前一共實現(xiàn)了 15 種類別，其中有庸汗，晴惫确、晴晚、多云夫晌、多云晚雕薪、陰天、小中大雨晓淀、小中大雪所袁、霧、霾凶掰、浮塵以及雷暴燥爷。背景動效一共分為三層：

背景顏色層蜈亩。從上到下的漸變效果
云層。只有一種圖片前翎，對其位移稚配、數(shù)量、染色做不同變化達(dá)到不同效果
信息層港华。包括雨雪道川、雷暴和晴晚流星效果

之前分別用兩篇文章介紹雨雪和晴晚流星效果的實現(xiàn)細(xì)節(jié)：

『Flutter-繪制篇』實現(xiàn)炫酷的雨雪特效
『Flutter-繪制篇』實現(xiàn)夢幻的晴晚流星效果

今天我們介紹背景動畫的最后一篇，如何實現(xiàn)炫酷的雷電特效立宜，先看一下最終效果：

thunder

準(zhǔn)備

根據(jù)實現(xiàn)效果進(jìn)行分析冒萄，雨滴效果在之前文章有介紹過不多贅述，仔細(xì)觀察橙数，其實就是對閃電圖片在繪制時控制其 alpha 以營造出這種霹靂的效果尊流。

首先準(zhǔn)備幾張閃電的素材，UI 網(wǎng)站找了很長時間沒有找到滿意的效果灯帮，關(guān)鍵費時費錢崖技。后來發(fā)現(xiàn) oppo 最新版的天氣的雷暴效果停酷炫的钟哥，于是對其反編譯迎献，找到他的資源目錄。其實 oppo 雷暴的動畫效果是通過視頻+openGL 的方式實現(xiàn)腻贰，里面有閃電的靜態(tài)資源忿晕、視頻資源和 openGL 代碼文件。我們只需提取他的靜態(tài)資源文件即可银受。隨即在 initState() 方法中異步獲取加載圖片資源：

  Future<void> fetchImages() async {
    weatherPrint("開始獲取雷暴圖片");
    var image1 = await ImageUtils.getImage('assets/images/lightning/lightning0.webp');
    var image2 = await ImageUtils.getImage('assets/images/lightning/lightning1.webp');
    var image3 = await ImageUtils.getImage('assets/images/lightning/lightning2.webp');
    var image4 = await ImageUtils.getImage('assets/images/lightning/lightning3.webp');
    var image5 = await ImageUtils.getImage('assets/images/lightning/lightning4.webp');
    _images.add(image1);
    _images.add(image2);
    _images.add(image3);
    _images.add(image4);
    _images.add(image5);
    weatherPrint("獲取雷暴圖片成功： ${_images?.length}");
  }

有了圖片后，開始構(gòu)建對象和參數(shù)列表鸦采。由上面分析可知宾巍，除了基本的坐標(biāo) x,y 信息，只需要額外增加 alpha 屬性來達(dá)到效果渔伯。

class ThunderParams {
  ui.Image image;
  double x;
  double y;
  double alpha;
  int get imgWidth => image.width;
  int get imgHeight => image.height;

  ThunderParams(this.image);

  void reset() {
    x = Random().nextDouble() * 0.5.wp -  1 / 3 * imgWidth;
    y = Random().nextDouble() * -0.05.hp;
    alpha = 0;
  }
}

reset() 方法用于在當(dāng)前雷暴結(jié)束時，重新初始化參數(shù)信息。

繪制

參數(shù)配置好后贯钩，繪制很簡單杖玲。有了圖片有了位置信息和 alpha 信息，調(diào)用 canvas 的相關(guān) api 進(jìn)行繪制即可玄叠。

  void drawThunder(ThunderParams params, Canvas canvas, Size size) {
    if (params == null || params.image == null) {
      return;
    }
    canvas.save();
    var identity = ColorFilter.matrix(<double>[
      1, 0, 0, 0, 0,
      0, 1, 0, 0, 0,
      0, 0, 1, 0, 0,
      0, 0, 0, params.alpha, 0,
    ]);
    _paint.colorFilter = identity;
    canvas.drawImage(params.image, Offset(params.x, params.y), _paint);
    canvas.restore();
  }

繪制到屏幕中大概長這樣:

動畫

離炫酷就差最后一步動畫古徒。

首先我們把單個閃電看做一個動畫對象，從消失到展示再顯示读恃，落實到動畫上隧膘，alpha 由0到1代态，然后再到0。但是你可能發(fā)現(xiàn)疹吃，出現(xiàn)的速度要比消失的速度要快蹦疑。我們可以借助 TweenSequence 類來實現(xiàn)這個效果。

TweenSequence 是一個動畫序列萨驶，支持配置權(quán)重歉摧，以及對應(yīng)的動畫 Tween。這樣腔呜，我們可以給 alpha 在 [0,1] 區(qū)間做動畫時權(quán)重設(shè)置低一點叁温，[1,0] 時權(quán)重高一點。

    var _animation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.0, end: 1.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: 1.0, end: 0.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 3),
    ]);

實現(xiàn)后育谬，效果如下：

image

然后券盅，我們用三個隨機的閃電作為一組，做循環(huán)動畫膛檀，控制其序列幀锰镀，完成連續(xù)&不同&隨機的刪掉效果。

    _controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
        Future.delayed(Duration(milliseconds: 10)).then((value) {
          initThunderParams();
          _controller.forward();
        });
      }
    });

    var _animation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.0, end: 1.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: 1.0, end: 0.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 3),
    ]).animate(CurvedAnimation(
      parent: _controller,
      curve: Interval(
        0.0, 1.0,
        curve: Curves.ease,
      ),
    ));

在之前說的一個閃電動畫后面咖刃，新增 .animate() 的配置泳炉，通過控制

Interval(
        0.0, 0.3,
        curve: Curves.ease,
      )

配置該動畫執(zhí)行序列幀的開始和結(jié)束，以及插值器嚎杨。

通過在 addStatusListener 中監(jiān)聽動畫的執(zhí)行狀態(tài)花鹅，在觸發(fā) AnimationStatus.completed 時隨機等待一定時間后，重新開始枫浙。

到此刨肃，一個炫酷的雷電特效就完成了，是不是很簡單箩帚，如果覺得還不錯真友，后面考慮把天氣動畫背景做成插件供有需要的小伙伴使用