Flutter动态模糊效果插件motion_blur的使用

Flutter 动态模糊效果插件 motion_blur 的使用

motion_blur

这是一个用于为移动小部件添加运动模糊效果的插件。它支持平移和缩放模糊，但不支持旋转模糊。该插件使用着色器，因此无法与平台视图一起工作。

开始使用

要在你的项目中使用 motion_blur 插件，请将其添加到 pubspec.yaml 文件中的依赖项：

dependencies:
    motion_blur:

然后在 flutter 部分下添加运动模糊着色器：

flutter:
    shaders:
        - packages/motion_blur/shaders/motion_blur.glsl

使用方法

要使用此插件，只需将移动的小部件包裹在 MotionBlur 小部件中：

// 包裹移动小部件
MotionBlur(
    child: MovingWidget()
)

确保在移动的小部件中提供足够的填充空间，以避免运动模糊被裁剪，因为着色器无法绘制超出其子元素大小的部分。

你还可以通过提供一个双精度值来控制运动模糊的强度，其中 1.0 表示当前帧与前一帧之间的精确插值：

// 控制运动模糊强度
MotionBlur(
    intensity: 1.5,
    child: MovingWidget()
)

额外信息

由于 CanvasKit 中的一个问题，目前在 Web 平台上性能相当差。可以通过仅对小部件使用运动模糊，并在构建命令中添加 --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false 来提高性能。

完整示例 Demo

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 motion_blur 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Motion Blur Example'),
        ),
        body: Center(
          child: MotionBlur(
            // 控制运动模糊强度
            intensity: 1.5,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, Motion Blur!',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动态模糊效果插件motion_blur的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态模糊效果插件motion_blur的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用motion_blur插件来实现动态模糊效果的代码案例。首先，你需要确保你的Flutter项目中已经添加了motion_blur插件。你可以通过在你的pubspec.yaml文件中添加以下依赖来实现：

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

然后，运行flutter pub get来安装依赖。

下面是一个完整的示例，展示了如何在Flutter应用中使用motion_blur插件来实现动态模糊效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Motion Blur Example'),
        ),
        body: Center(
          child: MotionBlurExample(),
        ),
      ),
    );
  }
}

class MotionBlurExample extends StatefulWidget {
  @override
  _MotionBlurExampleState createState() => _MotionBlurExampleState();
}

class _MotionBlurExampleState extends State<MotionBlurExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _blurIntensityAnimation;

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

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Image.network(
          'https://via.placeholder.com/600',
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
        MotionBlur(
          blurIntensity: _blurIntensityAnimation.value,
          blurDirection: BlurDirection.diagonal,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://via.placeholder.com/600'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }

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

在这个示例中，我们做了以下事情：

  1. 在MyApp中，我们创建了一个基本的Flutter应用，其包含一个Scaffold和一个居中的MotionBlurExample小部件。
  2. MotionBlurExample是一个StatefulWidget，它包含一个AnimationController来管理模糊强度的动画。
  3. 在initState方法中，我们初始化了动画控制器，并设置了一个从0到10的模糊强度动画，动画持续时间为5秒，并设置为反复播放（repeat(reverse: true)）。
  4. 在build方法中，我们使用Stack小部件来堆叠一个静态图像和一个应用了动态模糊效果的图像。模糊效果通过MotionBlur小部件实现，其blurIntensity属性绑定到动画的值。
  5. MotionBlur的blurDirection属性设置为BlurDirection.diagonal，表示模糊方向为对角线。你可以根据需要更改此值。

运行这个示例，你应该会看到图像在5秒内动态地从清晰变得模糊，然后再变清晰，如此反复。

回到顶部