Flutter动画效果插件explode_view的使用

这是一个新的开源Flutter项目，它使开发者能够快速增强应用程序的UI，并轻松开始使用Flutter动画。该UI灵感来源于Redmi卸载应用程序时的动画效果，展示在这里。

该项目包含构建出色Flutter应用所需的Flutter动画功能。

探索如何通过这篇博客了解ExplodeView是如何实现的。

索引

• 安装
• 如何使用
• 算法
• 文档
• 问题/请求
• 许可证

安装

1. 添加依赖

在项目的pubspec.yaml文件中添加以下内容：

explode_view: ^1.0.4

2. 安装依赖

可以通过命令行安装包：

使用pub：

$ pub get

使用Flutter：

$ flutter packages get

或者，您的编辑器可能支持flutter pub get。请查阅您的编辑器文档以了解更多信息。

3. 导入库

在Dart代码中使用：

import 'package:explode_view/explode_view.dart';

如何使用

让我们来实现这个动画

要在应用程序中实现爆炸动画，用户只需将ExplodeView作为任何小部件（如Stack）的子组件即可。

示例代码：

ExplodeView(
  imagePath: 'assets/images/abc.png',  // 图像存储路径
  imagePosFromLeft: 120.0,            // 设置图像的x坐标
  imagePosFromTop: 300.0,             // 设置图像的y坐标
);

有关更多详细信息，请参阅main.dart示例文件。

算法

此项目使用的算法如下：

点击图像后，图像会抖动一段时间并消失，同时在该图像区域生成随机粒子，这些粒子会逐渐散开并淡出屏幕，最终完全消失。粒子的颜色由图像像素的颜色决定，从而产生图像被分解成碎片的效果。

有关更多详细信息，请参阅explode_view.dart。

文档

以下是ExplodeView的属性说明表：

问题/请求

如果您遇到任何问题，请随时打开一个Issue。如果您觉得库缺少某些功能，请在GitHub上提出建议，我会尽快查看。Pull Request也欢迎。

许可证

ExplodeView 是基于MIT许可证发布的。查看许可证。

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用ExplodeView插件。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:explode_view/explode_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 应用程序根部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Explode View',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Explode View'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: PreferredSize(
          preferredSize: Size(double.infinity, 50),
          child: AppBar(
            title: Text("Explode View"),
            automaticallyImplyLeading: false,
          ),
        ),
        body: Container(
            child: Stack(
          children: <Widget>[
            ExplodeView(
                imagePath: 'assets/images/swiggy.png',
                imagePosFromLeft: 50.0,
                imagePosFromTop: 200.0),
            ExplodeView(
                imagePath: 'assets/images/chrome.png',
                imagePosFromLeft: 200.0,
                imagePosFromTop: 400.0),
            ExplodeView(
                imagePath: 'assets/images/firefox.png',
                imagePosFromLeft: 350.0,
                imagePosFromTop: 600.0)
          ],
        )));
  }
}