Flutter實現簡單爆炸效果

eee發表於2021-07-05

前言

最近一個月支援某業務比較忙，並沒有比較長的時間週期讓我攻克Flutter一些比較難知識。比如我看到某開源專案自己使用Stream等技術實現了一個稍微複雜的Event Bus，我試著用碎片時間去學，結果發現需要補充的概念太多，碎片化地學習很多東西連貫不起來，於是我就暫時先放棄了，等個稍微長點的假期再來攻克吧。

最終，我覺得用這些碎片化的時間來學習Flutter的動畫，並試著做一些簡單的特效，本文就參考網上的一些教程，寫一個簡單的爆炸效果。

最終效果圖：

原文教程連結：傳送門，本文進行了一定改造
完整程式碼：gitee.com/wenjie2018/…
Flutter SDK: 2.2.2
dependencies: simple_animations: ^3.0.1

simple_animations封裝了一些動畫邏輯，可以讓我們更方便的使用動畫的API

從一個點開始

先說說整體思路：爆炸就是中間有很多個點，它們在同一時刻往不同方向走了不同的距離，並且過程中不斷變小、透明，直到消失?

在實現一群點之前，我們先來實現一個點的漸變?

程式碼大致思路：

構建區域迴圈動畫
點選按鈕：如果掃描到List中有“點”Widget，則將這個點從左到右推出，並且逐漸變小、透明
每一幀都檢查“點”的Widget是否超過動畫時間，如超過則從List中刪除

關鍵API：

使用LoopAnimation構建迴圈動畫
使用Color.withAlpha控制透明度
使用Transform.scale控制控制元件大小
使用Stack讓“點”可以重疊，再使用Positioned控制座標

完整程式碼?：


import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged_dart/supercharged_dart.dart';
import 'package:supercharged/supercharged.dart';

void main() {
  runApp(new MaterialApp(home: Page()));
}

class Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => PageState();
}

class PageState extends State<Page> {

  final GlobalKey<MoleState> moleKey = new GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Mole>[
            Mole(key: moleKey)
          ],
        )
        // child: Mole(key: moleKey),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.sentiment_very_satisfied),
        onPressed: () {
          moleKey.currentState!.hitMole();
        },
      ),
    );
  }
}

class Mole extends StatefulWidget {
  @override
  MoleState createState() => MoleState();

  Mole({
    Key? key,
  }) : super(key: key);
}

class MoleState extends State<Mole> {
  /// "點"的List
  final List<MoleParticle> particles = [];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: _buildMole(),
    );
  }

  Widget _buildMole() {
    return LoopAnimation<int>(
      tween: ConstantTween(1),
      builder: (context, child, value) {
        // builder每一幀都會被呼叫，所以要再次清理點
        _manageParticleLifecycle();
        return Stack(
          clipBehavior: Clip.none,
          children: [
            ...particles.map((it) => it.buildWidget())
          ],
        );
      },
    );
  }

  /// 向List中插入"點"
  hitMole() {
    Iterable.generate(1).forEach(
            (i) => particles.add(MoleParticle())
    );
  }

  /// 管理顆粒的生命，清除超時的顆粒
  _manageParticleLifecycle() {
    particles.removeWhere((particle) {
      return particle.progress() == 1;
    });
  }

  @override
  void setState(fn) {
    if (mounted) {
      super.setState(fn);
    }
  }
}

enum _MoleProps { x, y, scale }

class MoleParticle {
  late Animatable<MultiTweenValues<_MoleProps>> tween;
  late Duration startTime;
  final duration = 3.seconds;

  MoleParticle() {
    final start_x = 0.0;
    final start_y = 0.0;
    final end_x = window.physicalSize.width / window.devicePixelRatio - 50;
    final end_y = 0.0;

    tween = MultiTween<_MoleProps>()
      ..add(_MoleProps.x, start_x.tweenTo(end_x))
      ..add(_MoleProps.y, start_y.tweenTo(end_y))
      ..add(_MoleProps.scale, 1.0.tweenTo(0.0));

    startTime = DateTime.now().duration();
  }

  Widget buildWidget() {
    final MultiTweenValues<_MoleProps> values = tween.transform(progress());
    var alpha = 255 - (255 * progress()).toInt();
    return Positioned(
      left: values.get(_MoleProps.x),
      top: values.get(_MoleProps.y),
      child: Transform.scale(
        scale: values.get(_MoleProps.scale),
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
              color: Colors.black.withAlpha(alpha),
              borderRadius: BorderRadius.circular(50)
          ),
        ),
      ),
    );
  }

  /// 計算"點"的生命週期
  double progress() {
    return ((DateTime.now().duration() - startTime) / duration)
        .clamp(0.0, 1.0)
        .toDouble();
  }
}

複製程式碼

效果預覽?：

實現爆炸

實現了一個“點”的漸變後，之後要實現爆炸就好辦了，大致變更如下：

動畫週期3秒 -> 0.5秒
一次性塞一個“點” -> 一次性塞50個“點”
控制元件從靠左居中 -> 螢幕居中
每個點的起始座標固定但結束座標改為隨機

最終程式碼如下：


import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged_dart/supercharged_dart.dart';
import 'package:supercharged/supercharged.dart';

void main() {
  runApp(new MaterialApp(home: Page()));
}

class Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => PageState();
}

class PageState extends State<Page> {

  final GlobalKey<MoleState> moleKey = new GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Mole(key: moleKey),
        )
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.sentiment_very_satisfied),
        onPressed: () {
          moleKey.currentState!.hitMole();
        },
      ),
    );
  }
}

class Mole extends StatefulWidget {
  @override
  MoleState createState() => MoleState();

  Mole({
    Key? key,
  }) : super(key: key);
}

class MoleState extends State<Mole> {
  /// "點"的List
  final List<MoleParticle> particles = [];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: _buildMole(),
    );
  }

  Widget _buildMole() {
    return LoopAnimation<int>(
      duration: 2.seconds,
      tween: ConstantTween(1),
      builder: (context, child, value) {
        // builder每一幀都會被呼叫，所以要再次清理點
        _manageParticleLifecycle();
        return Stack(
          clipBehavior: Clip.none,
          children: [
            ...particles.map((it) => it.buildWidget())
          ],
        );
      },
    );
  }

  /// 向List中插入"點"
  hitMole() {
    Iterable.generate(50).forEach(
            (i) => particles.add(MoleParticle())
    );
  }

  /// 管理顆粒的生命，清除超時的顆粒
  _manageParticleLifecycle() {
    particles.removeWhere((particle) {
      return particle.progress() == 1;
    });
  }

  @override
  void setState(fn) {
    if (mounted) {
      super.setState(fn);
    }
  }
}

enum _MoleProps { x, y, scale }

class MoleParticle {
  late Animatable<MultiTweenValues<_MoleProps>> tween;
  late Duration startTime;
  final duration = 0.5.seconds;

  MoleParticle() {
    var random = Random();
    double max_x = 300;
    double max_y = 300;
    final start_x = 0.0;
    final start_y = 0.0;
    final end_x = max_x * random.nextDouble() * (random.nextBool() ? 1 : -1);
    final end_y = max_y * random.nextDouble() * (random.nextBool() ? 1 : -1);

    tween = MultiTween<_MoleProps>()
      ..add(_MoleProps.x, start_x.tweenTo(end_x))
      ..add(_MoleProps.y, start_y.tweenTo(end_y))
      ..add(_MoleProps.scale, 1.0.tweenTo(0.0));

    startTime = DateTime.now().duration();
  }

  Widget buildWidget() {
    final MultiTweenValues<_MoleProps> values = tween.transform(progress());
    var alpha = 255 - (255 * progress()).toInt();
    return Positioned(
      left: values.get(_MoleProps.x),
      top: values.get(_MoleProps.y),
      child: Transform.scale(
        scale: values.get(_MoleProps.scale),
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
              color: Colors.black.withAlpha(alpha),
              borderRadius: BorderRadius.circular(50)
          ),
        ),
      ),
    );
  }

  /// 計算"點"的生命週期
  double progress() {
    return ((DateTime.now().duration() - startTime) / duration)
        .clamp(0.0, 1.0)
        .toDouble();
  }
}

複製程式碼

效果預覽?：

幀率?：

瘋狂點選下的幀率會有所下降?： QQ20210703-151457

這個問題暫時沒有很好的優化思路，等以後有機會再想辦法優化吧

【CSS】實現10種簡單的loading效果
2020-10-20
CSS
androidTextView實現簡單的跑馬燈效果
2021-09-09
AndroidTextView
Flutter——實現閃爍效果
2019-09-17
Flutter
前端動畫效果實現的簡單比較
2019-01-09
前端動畫
簡單實現一個全面屏切換效果
2018-09-18
Flutter 版知乎日報簡單實現
2019-09-15
Flutter
Flutter吸附效果如何實現?
2019-06-13
Flutter
html實現簡單ListViews效果的例項程式碼
2020-05-20
HTMLView
flutter-簡單實現找妹子自定義view
2021-05-28
FlutterView
Flutter mvvm簡單實戰
2021-03-19
FlutterMVVM
Flutter MVVM 簡單實踐
2021-03-13
FlutterMVVM
Flutter動畫實現粒子漂浮效果
2019-10-06
Flutter動畫
讓動畫實現更簡單，Flutter 動畫簡易教程！
2019-12-26
動畫Flutter
使用JS實現一個簡單的選項卡效果
2020-01-11
JS
Flutter 網路請求的三種簡單實現
2019-04-02
Flutter
Flutter 類抽屜效果動畫實現。
2019-10-23
Flutter動畫
Flutter PIP（畫中畫）效果的實現
2019-07-24
Flutter
Flutter 實現虎牙/鬥魚彈幕效果
2020-04-13
Flutter
Unity 高清渲染管線 ShaderGraph 實現簡單的表面水流效果
2020-08-06
Unity
利用回撥函式實現簡單的輪播圖效果
2019-05-19
函式
簡單實現幾種常見的前端效果，附程式碼！
2021-04-19
前端
Flutter簡單實現手寫瀑布流第二篇
2021-06-01
Flutter
[譯] 在 Flutter 中實現微光閃爍效果
2019-03-04
Flutter
Flutter 實現酷炫的3D效果
2020-07-22
Flutter3D
Flutter實戰動畫番外篇-翻頁效果實現
2019-09-04
Flutter動畫
VUE+Element UI實現簡單的表格行內編輯效果
2019-08-02
VueUI
Flutter系列：2.實現一個簡單的登入介面
2018-11-06
Flutter
Flutter淘寶App新增啟動圖最簡單實現方法
2019-06-01
FlutterAPP
Flutter 簡單實現手寫瀑布流第一篇
2021-06-01
Flutter
Flutter實戰之實現一個簡單的新聞閱讀器
2018-03-18
Flutter
jQuery簡單tab效果
2021-09-09
jQuery
Promise 簡單實現
2019-02-26
Promise
ReadableStream 簡單實現
2018-07-13
Express 簡單實現
2018-07-13
Express
AspectJ簡單實現
2020-10-10
FastClick簡單實現
2021-04-02
AST
Flutter 中通過 Container 實現時間軸效果
2021-05-18
FlutterAI
簡單專案實戰flutter（功能篇）
2019-04-15
Flutter

Flutter實現簡單爆炸效果

前言

從一個點開始

實現爆炸

相關文章