Flutter 脉动效果组件
Pulsator Flutter 包为您的 Flutter 应用程序带来了迷人的脉动动画效果。
安装
要将 Pulsator 包集成到您的 Flutter 项目中，请将以下依赖项添加到您的 pubspec.yaml 文件中
dependencies:
pulsator: ^1.0.0
进行修改后，在您的终端中运行以下命令
flutter pub get
简介
Pulsator 包引入了两个主要的小部件：Pulsator 和 PulseIcon。
Pulsator 小部件
Pulsator 小部件允许您创建具有可自定义样式的脉动动画。您可以控制脉动的数量、动画持续时间、重复次数等。此小部件非常适合为应用程序的特定区域添加动态视觉效果。
Pulsator(
style: PulseStyle(color: Colors.blue),
count: 5,
duration: Duration(seconds: 4),
repeat: 0,
startFromScratch: false,
autoStart: true,
fit: PulseFit.contain,
child: YourContentWidget(),
)
PulseIcon 小部件
PulseIcon 小部件简化了显示带脉动效果的图标的过程。它允许您轻松自定义脉动和图标的属性。
PulseIcon(
icon: Icons.favorite,
pulseColor: Colors.red,
iconColor: Colors.white,
iconSize: 44,
innerSize: 54,
pulseSize: 116,
pulseCount: 4,
pulseDuration: Duration(seconds: 4),
)
功能
- 可自定义样式：通过可调整的颜色、大小和渐变配置，根据您的偏好定制脉动动画。
- 动态脉动效果：创建动态且视觉上吸引人的脉动动画，以吸引您 UI 中特定元素的注意力。
- 图标集成：使用
PulseIcon小部件轻松将脉动效果集成到您的图标中，以获得更具吸引力的用户体验。 - 灵活配置：通过调整计数、持续时间、重复次数等参数来微调脉动行为。
用法
探索 Pulsator 和 PulseIcon 小部件提供的各种属性和自定义选项，将脉动动画无缝集成到您的 Flutter 应用程序中。尝试不同的配置以达到所需的视觉效果并增强整体用户体验。
有趣的示例
| 代码 | 预览 |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
许可证
本项目根据 MIT 许可证授权 – 有关详细信息，请参阅 LICENSE 文件。
贡献
请阅读 CONTRIBUTING.md 以了解我的行为准则以及向我提交拉取请求的流程。
文档，拜托！
Pulsator 小部件属性
| 属性 | 类型 | 描述 |
|---|---|---|
style |
PulseStyle | 脉动样式配置。必需。 |
count |
整数 | 一次可见的脉动数量。默认为 3。 |
duration |
持续时间 | 单次脉动动画的持续时间。默认为 2 秒。 |
repeat |
整数 | 脉动重复的次数。如果为 0，则脉动将无限重复。默认为 0。 |
startFromScratch |
布尔值 | 动画是否应从头开始。默认为 true。 |
autoStart |
布尔值 | 小部件创建时动画是否应自动启动。默认为 true。 |
fit |
PulseFit | 脉动应如何缩放到适应小部件大小。默认为 PulseFit.contain。 |
child |
Widget? | 在脉动之上渲染的小部件的子项。默认为 null。 |
事件
| 活动 | 描述 |
|---|---|
onCreated |
创建动画控制器时调用。 |
onCompleted |
动画完成时调用。 |
PulseIcon 小部件属性
| 属性 | 类型 | 描述 |
|---|---|---|
icon |
IconData | 要显示的小部件。必需。 |
pulseColor |
颜色 | 脉动的颜色。必需。 |
iconColor |
颜色 | 图标的颜色。默认为 white。 |
iconSize |
双精度 | 图标的大小。默认为 24。 |
pulseSize |
双精度 | 脉动的大小。默认为 64。 |
innerColor |
Color? | 内部非脉动圆的颜色。默认为 null。 |
innerSize |
double? | 内部非脉动圆的大小。默认为 null。 |
pulseCount |
整数 | 要显示的脉动数量。默认为 3。 |
pulseDuration |
持续时间 | 单次脉动动画的持续时间。默认为 4 秒。 |
PulseStyle 属性
| 属性 | 类型 | 描述 |
|---|---|---|
color |
颜色 | 主要脉动颜色。默认为 Colors.red。 |
borderColor |
Color? | 脉动边框颜色。如果为 null，则不会渲染边框。默认为 null。 |
borderWidth |
double? | 脉动边框宽度。如果为 null，则不会渲染边框。默认为 null。 |
gradientStyle |
PulseGradientStyle? | 如果设置，脉动将呈现为渐变。默认为 null。 |
pulseCurve |
Curve | 脉动缩放动画曲线。默认为 Curves.linear。 |
opacityCurve |
Curve | 脉动不透明度动画曲线。默认为 Curves.linear。 |
fadeOpacity |
布尔值 | 不透明度是否应从 1.0 动画到 0.0。默认为 true。 |
startSize |
双精度 | 脉动开始时的大小，以脉动半径的分数表示。默认为 0.0。 |
PulseGradientStyle 属性
| 属性 | 类型 | 描述 |
|---|---|---|
radius |
双精度 | 渐变的半径，以脉动半径的分数表示。默认为 0.5。 |
start |
双精度 | 渐变的起点，以脉动半径的分数表示。默认为 0.0。 |
end |
双精度 | 渐变的终点，以脉动半径的分数表示。默认为 1.0。 |
startColor |
Color? | 渐变的起始颜色。如果为 null，则使用脉动颜色，不透明度设置为 0.0。默认为 null。 |
reverseColors |
布尔值 | 渐变颜色是否应反转。如果为 true，则渐变将从 end 开始，到 start 结束。默认为 false。 |
PulseFit 枚举
| Value | 描述 |
|---|---|
contain |
脉动将被缩放到适应小部件大小。 |
cover |
脉动将被缩放到填充小部件大小。 |
