Flutter涟漪动画效果插件simple_ripple_animation的使用
Flutter涟漪动画效果插件simple_ripple_animation的使用

Simple Ripple Animation
这个包提供了一个可以自定义的涟漪动画小部件,可以根据您的需求进行调整。它易于设置和自定义,并且可以与您选择的任何颜色完美搭配。
Features
此包支持以下参数和方法:
Parameter
RippleAnimation 小部件提供了以下参数来配置您的涟漪动画效果:
| 名称 | 类型 | 描述 | 
|---|---|---|
| child | Widget | 这个子组件将被放置在动画的中心。 | 
| delay | Duration | 这是两个涟漪波之间的延迟。 | 
| minRadius | double | 涟漪波的最小半径。 | 
| maxRadius | double | 涟漪波的最大半径。 | 
| color | Color | 动画的颜色。 | 
| ripplesCount | int | 波纹的数量。 | 
| duration | Duration | 动画的持续时间。 | 
| repeat | bool | 如果希望重复动画,请提供 true。 | 
Getting Started
Installing
- 
添加依赖项到
pubspec.yaml获取最新版本: pub.dev
dependencies: simple_ripple_animation: <latest-version> - 
运行 pub get
flutter pub get - 
导入包
import 'package:simple_ripple_animation/simple_ripple_animation.dart'; 
Implementation
- 
使用
RippleAnimation包装Widget并分配所需的参数RippleAnimation( child: CircleAvatar( minRadius: 75, maxRadius: 75, backgroundImage: NetworkImage('https://example.com/avatar.jpg'), // 替换为实际图片URL ), color: Colors.deepOrange, delay: const Duration(milliseconds: 300), repeat: true, minRadius: 75, maxRadius: 140, ripplesCount: 6, duration: const Duration(milliseconds: 6 * 300), ) 
Preview
Screenshot
| Mobile | Tablet | 
|---|---|
![]()  | 
![]()  | 
| Desktop | Web | 
|---|---|
![]()  | 
![]()  | 
Main Contributors
| Jemis Goti | Furkan Arslan | 
|---|---|
Thanks
感谢您使用此包并继续支持开源社区。
完整示例Demo
以下是完整的示例代码,您可以直接复制并在Flutter项目中运行以查看效果。
import 'package:flutter/material.dart';
import 'package:simple_ripple_animation/simple_ripple_animation.dart';
void main() {
  runApp(const MyApp());
}
/// 主应用程序入口
class MyApp extends StatelessWidget {
  /// 构造函数初始化
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: const MaterialColor(0xFF091D36, <int, Color>{
            50: Color(0xFFE1E4E7),
            100: Color(0xFFB5BBC3),
            200: Color(0xFF848E9B),
            300: Color(0xFF536172),
            400: Color(0xFF2E3F54),
            500: Color(0xff091D36),
            600: Color(0xFF081A30),
            700: Color(0xFF061529),
            800: Color(0xFF051122),
            900: Color(0xFF020A16),
          }),
        ),
        home: const MyHomePage(title: 'Ripple animation demo'),
      );
}
/// 主页面
class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: RippleAnimation(
          child: CircleAvatar(
            radius: 75,
            backgroundImage: NetworkImage('https://example.com/avatar.jpg'), // 替换为实际图片URL
          ),
          color: Colors.deepOrange,
          delay: const Duration(milliseconds: 300),
          repeat: true,
          minRadius: 75,
          maxRadius: 140,
          ripplesCount: 6,
          duration: const Duration(milliseconds: 6 * 300),
        ),
      ),
    );
  }
}
通过上述步骤,您可以在Flutter项目中轻松实现一个美观的涟漪动画效果。如果有任何问题或需要进一步的帮助,请随时提问!
更多关于Flutter涟漪动画效果插件simple_ripple_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter涟漪动画效果插件simple_ripple_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用simple_ripple_animation插件来实现涟漪动画效果的代码案例。
首先,你需要在你的pubspec.yaml文件中添加simple_ripple_animation依赖:
dependencies:
  flutter:
    sdk: flutter
  simple_ripple_animation: ^x.y.z  # 请将x.y.z替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来,你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例,展示了如何使用SimpleRippleAnimation来实现一个按钮点击时的涟漪动画效果:
import 'package:flutter/material.dart';
import 'package:simple_ripple_animation/simple_ripple_animation.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ripple Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RippleAnimationDemo(),
    );
  }
}
class RippleAnimationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ripple Animation Demo'),
      ),
      body: Center(
        child: RippleButton(
          onPressed: () {
            // 按钮点击回调
            print('Button pressed!');
          },
          rippleColor: Colors.blue.withOpacity(0.5), // 涟漪颜色
          rippleDuration: Duration(seconds: 1), // 涟漪动画持续时间
          child: Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(25),
            ),
            child: Center(
              child: Text(
                'Press Me',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
// 自定义RippleButton组件
class RippleButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Color rippleColor;
  final Duration rippleDuration;
  final Widget child;
  RippleButton({
    required this.onPressed,
    required this.rippleColor,
    required this.rippleDuration,
    required this.child,
  });
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) {
        // 创建涟漪动画控制器
        final rippleController = RippleController();
        // 创建涟漪动画
        final rippleAnimation = SimpleRippleAnimation(
          rippleController: rippleController,
          rippleColor: rippleColor,
          rippleDuration: rippleDuration,
          child: child,
        );
        // 显示涟漪动画(这里使用OverlayEntry或者其它方式将动画覆盖在当前界面上)
        // 注意:这里为了简单起见,直接使用Future.delayed模拟动画播放后的状态恢复
        Future.delayed(rippleDuration, () {
          // 动画结束后恢复原始状态(这里可以移除OverlayEntry或者其它方式)
          // 在实际使用中,你可能需要管理RippleController的生命周期,确保在不需要时释放资源
        });
        // 注意:这里只是展示了如何创建涟漪动画,实际使用时需要管理RippleController和动画的显示逻辑
        // 例如,可以使用OverlayEntry将rippleAnimation添加到Overlay中,并在动画结束后移除
        // 由于示例代码限制,这里不详细展开
      },
      onTap: onPressed,
      child: child, // 这里暂时直接返回child,实际使用中应该返回包含rippleAnimation的Widget
    );
  }
}
// 注意:上面的RippleButton实现是为了展示如何创建RippleController和SimpleRippleAnimation,
// 但由于示例代码限制,并没有真正地将涟漪动画显示在界面上。
// 在实际使用中,你需要使用Overlay或其他方式将SimpleRippleAnimation添加到当前Widget树的合适位置,
// 并管理RippleController的生命周期。
// 以下是使用Overlay的一个简单示例(由于篇幅限制,这里只展示关键部分):
//
// class _RippleButtonState extends State<RippleButton> with SingleTickerProviderStateMixin {
//   OverlayEntry? _overlayEntry;
//
//   @override
//   Widget build(BuildContext context) {
//     return GestureDetector(
//       onTapDown: (details) {
//         // 创建OverlayEntry并添加到Overlay中
//         _overlayEntry = _createRippleOverlay(context, details.localPosition);
//         Overlay.of(context)?.insert(_overlayEntry!);
//       },
//       // ... 其余代码 ...
//     );
//   }
//
//   OverlayEntry _createRippleOverlay(BuildContext context, Offset position) {
//     final rippleController = RippleController();
//     final rippleAnimation = SimpleRippleAnimation(
//       rippleController: rippleController,
//       rippleColor: widget.rippleColor,
//       rippleDuration: widget.rippleDuration,
//       child: SizedBox.shrink(), // 这里使用SizedBox.shrink()作为占位符,实际中应该根据需求调整
//     );
//
//     return OverlayEntry(
//       builder: (context) {
//         return Positioned(
//           left: position.dx - widget.child.preferredSize.width / 2, // 这里需要调整位置,确保涟漪动画在按钮中心
//           top: position.dy - widget.child.preferredSize.height / 2, // 同上
//           child: rippleAnimation,
//         );
//       },
//     );
//   }
//
//   @override
//   void dispose() {
//     _overlayEntry?.remove();
//     super.dispose();
//   }
// }
注意:上面的RippleButton实现只是一个概念性的示例,并没有真正地将涟漪动画显示在界面上。在实际使用中,你需要使用Overlay或其他方式将SimpleRippleAnimation添加到当前Widget树的合适位置,并管理RippleController的生命周期。由于示例代码限制,这里并没有详细展开这部分内容。如果你需要完整的实现,请参考simple_ripple_animation插件的文档或示例代码,并根据你的需求进行调整。
希望这个示例能帮助你理解如何在Flutter中使用simple_ripple_animation插件来实现涟漪动画效果。
        
      
            
            
            




