Flutter特效处理插件simple_fx的使用

Flutter特效处理插件simple_fx的使用

SimpleFX

一个允许在Flutter应用中轻松应用基本图像效果（如色相旋转、不透明度、饱和度、对比度、常见滤镜和通道隔离）的Flutter包。

特性

此包允许对图像应用以下效果：

色相旋转

色相旋转滤镜会将图像的所有颜色沿着色轮旋转。输入参数是角度值。可以指定任何值，包括负值（旋转-90度与旋转270度相同）。

使用示例：

SimpleFX(imageSource: image, hueRotation: 110);

结果（底部图像是色相旋转了110度的图像）：

亮度

亮度滤镜可以增加或减少图像的亮度。输入参数是亮度百分比的增减量（范围为-100到100，默认值为0）。

使用示例：

SimpleFX(imageSource: image, brightness: 50);

结果（左下图是亮度为50%的图像，右下图是亮度为-50%的图像）：

饱和度

饱和度滤镜允许降低图像的饱和度。输入参数是原始饱和度的百分比（范围为0到100，默认值为100）。

使用示例：

SimpleFX(imageSource: image, saturation: 50);

结果（底部图像是饱和度为50%的图像）：

不透明度

不透明度滤镜允许给图像添加透明度。输入参数是原始不透明度的百分比（范围为0到100，默认值为100）。

使用示例：

Stack(children: [
    SimpleFX(imageSource: image2), // 隐藏的图像
    SimpleFX(imageSource: image, opacity: 50) // 示例图像
]);

结果（底部图像是不透明度为50%的图像；隐藏的图像可以通过它看到）：

常见滤镜

该插件允许应用一些常见的滤镜——灰度、sepia和负片。它们是在SFXFilters类中实现的。filter参数也可以接受自定义滤镜，指定为一个5x4矩阵（更多信息，请参阅Flutter文档）。

使用示例：

SimpleFX(imageSource: image, filter: SFXFilters.negative);

结果（底部图像是受SFXFilters.negative滤镜影响的图像）：

通道隔离

该插件还允许隔离图像的通道。channels参数可以取SFXChannels类中实现的一个滤镜。它还可以接受一个自定义隔离数组——一个包含三个双精度值（红、绿、蓝）的数组，在0到1的范围内，其中1表示通道的全值，0表示移除通道。

使用示例：

SimpleFX(imageSource: image, channels: SFXChannels.green);

结果（底部图像是原始图像的绿色通道）：

开始使用

此包无需任何先决条件，可以在任何Dart应用程序中使用。

使用示例

以下是一个包含所有参数的SimpleFX滤镜示例。

注意：滤镜按以下顺序应用：色相旋转=亮度=不透明度 > 饱和度 > 滤镜 > 通道

Stack(children: [
    SimpleFX(imageSource: image2,), // 隐藏的图像
    SimpleFX(imageSource: image, 
            hueRotation: 50, 
            brightness: -50, 
            saturation: 90, 
            opacity: 80, 
            filter: SFXFilters.grayscale, 
            channels: SFXChannels.magenta) // 示例图像
]);

更多关于Flutter特效处理插件simple_fx的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter特效处理插件simple_fx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_fx 是一个用于在 Flutter 应用中实现简单特效的插件。它可以帮助你轻松地添加一些常见的动画效果、过渡效果等。以下是如何使用 simple_fx 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  simple_fx: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 simple_fx 插件：

import 'package:simple_fx/simple_fx.dart';

3. 使用特效

simple_fx 提供了多种特效，你可以根据需要进行选择和使用。以下是一些常见的用法示例：

3.1 淡入淡出效果

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFxFade(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          fadeIn: true,
        ),
      ),
    );
  }
}

3.2 缩放效果

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFxScale(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          scale: 1.5,
        ),
      ),
    );
  }
}

3.3 旋转效果

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFxRotate(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          angle: 360,
        ),
      ),
    );
  }
}

3.4 平移效果

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFxTranslate(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          offset: Offset(100, 100),
        ),
      ),
    );
  }
}

4. 自定义特效

simple_fx 还允许你自定义特效。你可以通过组合不同的动画效果来实现更复杂的效果。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFx(
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          effects: [
            FadeEffect(fadeIn: true),
            ScaleEffect(scale: 1.5),
            RotateEffect(angle: 360),
            TranslateEffect(offset: Offset(100, 100)),
          ],
        ),
      ),
    );
  }
}

5. 控制动画

你可以通过 SimpleFxController 来控制动画的开始、暂停、重置等操作。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  SimpleFxController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = SimpleFxController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple FX Example'),
      ),
      body: Center(
        child: SimpleFx(
          controller: _controller,
          child: Text('Hello, World!'),
          duration: Duration(seconds: 2),
          effects: [
            FadeEffect(fadeIn: true),
            ScaleEffect(scale: 1.5),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.start();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}
回到顶部