Flutter粒子动画退出效果插件fade_out_particle的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter粒子动画退出效果插件fade_out_particle的使用

FadeOutParticle 是一个用于实现视图（如文本和图标）以粒子动画形式消失的效果。它能为您的Flutter应用添加独特的视觉体验。

安装

要在您的项目中使用 fade_out_particle 插件，您需要在 pubspec.yaml 文件中添加依赖：

dependencies:  
  fade_out_particle: ^1.2.1

然后，在命令行中运行 flutter pub get 或者点击IDE中的“Packages get”按钮来获取并安装新添加的包。

使用方法

基本用法

最简单的使用方式如下所示：

FadeOutParticle(
    disappear: true,
    child: Text('Fade out Particle'),
)

此代码片段创建了一个 FadeOutParticle 小部件，其中包含一个文本 “Fade out Particle”，并且设置 disappear 参数为 true，这将触发粒子动画以使该文本逐渐消失。

示例Demo

为了更深入地了解如何使用 fade_out_particle，以下是一个完整的示例应用程序，演示了如何结合按钮控制动画的启动与重置：

import 'package:fade_out_particle/fade_out_particle.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FadeOutParticle Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _disappear = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FadeOutParticle(
              disappear: _disappear,
              duration: const Duration(milliseconds: 3000), // 设置动画持续时间为3秒
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.flutter_dash,
                    size: 52,
                    color: Theme.of(context).primaryColorDark,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    'Fade out Particle',
                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                          fontWeight: FontWeight.w900,
                        ),
                  ),
                ],
              ),
              onAnimationEnd: () => print('animation ended'), // 动画结束时调用的回调函数
            ),
            const SizedBox(height: 150),
            OutlinedButton(
              onPressed: () => setState(() => _disappear = !_disappear),
              child: Text(_disappear ? 'Reset' : 'Start'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的页面，页面中心有一个由图标和文本组成的组合小部件，并且通过 FadeOutParticle 包裹它们以实现粒子动画效果。下方的按钮可以用来切换 _disappear 的值，从而控制动画的启动或重置。当 _disappear 设为 false 时，粒子动画开始；设为 true 时，动画被重置。

此外，我们还设置了 duration 属性来指定动画的时间长度，并添加了一个 onAnimationEnd 回调，以便在动画结束时执行某些操作（例如打印日志信息）。


更多关于Flutter粒子动画退出效果插件fade_out_particle的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter粒子动画退出效果插件fade_out_particle的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 fade_out_particle 插件来实现 Flutter 应用中的粒子动画退出效果的代码示例。这个插件通常用于在页面或组件退出时创建漂亮的粒子动画效果。

首先，你需要在你的 pubspec.yaml 文件中添加 fade_out_particle 依赖：

dependencies:
  flutter:
    sdk: flutter
  fade_out_particle: ^最新版本号  # 请替换为最新的版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用 FadeOutParticle 小部件来实现粒子动画退出效果。下面是一个完整的示例，展示了如何在页面退出时使用粒子动画效果：

import 'package:flutter/material.dart';
import 'package:fade_out_particle/fade_out_particle.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _navigateToSecondScreen() {
    Navigator.push(
      context,
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          return FadeOutParticlePage(
            animation: _animation,
          );
        },
      ),
    ).then((_) {
      // 页面返回后可以在这里做一些操作
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _navigateToSecondScreen,
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class FadeOutParticlePage extends StatelessWidget {
  final Animation<double> animation;

  const FadeOutParticlePage({Key? key, required this.animation}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: FadeOutParticle(
          animation: animation,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Fade Out',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了两个屏幕：HomeScreen 和 FadeOutParticlePage。在 HomeScreen 中，我们有一个按钮，点击按钮时会导航到 FadeOutParticlePage。在 FadeOutParticlePage 中，我们使用 FadeOutParticle 小部件包裹了一个容器，并传递了一个动画对象。

需要注意的是，FadeOutParticle 插件的具体用法可能会根据其版本和文档有所不同，因此请务必查阅最新的文档和示例代码。上述代码仅为示例，实际使用时可能需要根据插件的具体实现进行调整。

此外，FadeOutParticle 插件的具体 API 和用法可能不完全与示例代码匹配，因此请参考插件的官方文档和示例代码以确保正确使用。如果插件提供了自定义粒子效果的功能，你可能还需要根据需求调整粒子动画的参数。

回到顶部