Flutter动画效果插件circular_pulse的使用

Flutter动画效果插件circular_pulse的使用

Circular Pulse 是一个在 Flutter 中实现圆形脉冲动画效果的插件。该插件可以为你的应用添加一些炫酷的背景发光效果。

安装

在项目的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  circular_pulse: <最新版本>

要使用最新的更改，可以使用 Git URL：

dependencies:
  circular_pulse:
    git:
      url: https://github.com/ProfessorX737/circular_pulse
      ref: master

使用

导入此类

在 Dart 文件中导入 Circular Pulse 类：

import 'package:circular_pulse/circular_pulse.dart';

简单实现

简单的实现只需要指定结束半径和中心的子组件：

CircularPulse(
  endRadius: 60.0,
  child: Material(     // 替换为你自己的子组件
    elevation: 8.0,
    shape: CircleBorder(),
    child: CircleAvatar(
      backgroundColor: Colors.grey[100],
      child: Image.asset(
        'assets/images/dart.png',
        height: 50,
      ),
      radius: 30.0,
    ),
  ),
),

完整实现

更复杂的实现可以自定义更多的参数，如发光颜色、持续时间等：

CircularPulse(
  glowColor: Colors.blue,          // 发光颜色
  endRadius: 90.0,                 // 结束半径
  duration: Duration(milliseconds: 2000), // 动画时长
  repeat: true,                    // 是否重复
  showTwoGlows: true,              // 是否显示两个发光层
  repeatPauseDuration: Duration(milliseconds: 100), // 重复间隔
  child: Material(                 // 替换为你自己的子组件
    elevation: 8.0,
    shape: CircleBorder(),
    child: CircleAvatar(
      backgroundColor: Colors.grey[100],
      child: Image.asset(
        'assets/images/flutter.png',
        height: 60,
      ),
      radius: 40.0,
    ),
  ),
),

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

1 回复

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


当然，以下是如何在Flutter项目中使用circular_pulse插件来实现动画效果的代码示例。circular_pulse是一个用于创建圆形脉冲动画效果的Flutter包。

首先，确保你已经在pubspec.yaml文件中添加了circular_pulse依赖：

dependencies:
  flutter:
    sdk: flutter
  circular_pulse: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来，在你的Dart文件中，你可以使用CircularPulse小部件来创建动画效果。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circular Pulse Animation'),
        ),
        body: Center(
          child: CircularPulseExample(),
        ),
      ),
    );
  }
}

class CircularPulseExample extends StatefulWidget {
  @override
  _CircularPulseExampleState createState() => _CircularPulseExampleState();
}

class _CircularPulseExampleState extends State<CircularPulseExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.transparent,
          border: Border.all(color: Colors.grey, width: 2),
        ),
        child: Center(
          child: Icon(
            Icons.star,
            color: Colors.amber,
            size: 40,
          ),
        ),
      ),
      builder: (context, child) {
        return CircularPulse(
          animation: _controller,
          child: child,
          pulseColor: Colors.blue.withOpacity(0.3),
          pulseDuration: const Duration(seconds: 1),
          pulseSize: 20.0,
        );
      },
    );
  }
}

在这个示例中：

  1. CircularPulseExample是一个有状态的组件，它使用SingleTickerProviderStateMixin来创建一个AnimationController。
  2. 在initState方法中，初始化了一个动画控制器，并设置它的持续时间为2秒，然后让它无限循环（repeat(reverse: true)）。
  3. dispose方法中释放了动画控制器，以避免内存泄漏。
  4. AnimatedBuilder用于根据动画控制器的状态构建CircularPulse小部件。
  5. CircularPulse小部件接受几个参数：
    • animation：动画控制器。
    • child：要应用脉冲动画的子组件。
    • pulseColor：脉冲动画的颜色。
    • pulseDuration：脉冲动画的持续时间。
    • pulseSize：脉冲动画的大小。

这个示例展示了如何创建一个带有脉冲动画效果的星形图标。你可以根据需要调整动画参数和子组件来适应你的应用。

回到顶部