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

发布于 1周前 作者 nodeper 来自 Flutter

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

Banner

Simple Ripple Animation

style: very good analysis License: BSD

这个包提供了一个可以自定义的涟漪动画小部件,可以根据您的需求进行调整。它易于设置和自定义,并且可以与您选择的任何颜色完美搭配。

Features

此包支持以下参数和方法:

Parameter

RippleAnimation 小部件提供了以下参数来配置您的涟漪动画效果:

名称 类型 描述
child Widget 这个子组件将被放置在动画的中心。
delay Duration 这是两个涟漪波之间的延迟。
minRadius double 涟漪波的最小半径。
maxRadius double 涟漪波的最大半径。
color Color 动画的颜色。
ripplesCount int 波纹的数量。
duration Duration 动画的持续时间。
repeat bool 如果希望重复动画,请提供 true。

Getting Started

Installing

  1. 添加依赖项到 pubspec.yaml

    获取最新版本: pub.dev

    dependencies:
        simple_ripple_animation: <latest-version>
    
  2. 运行 pub get

    flutter pub get
    
  3. 导入包

    import 'package:simple_ripple_animation/simple_ripple_animation.dart';
    

Implementation

  1. 使用 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
Mobile Tablet
Desktop Web
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

1 回复

更多关于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插件来实现涟漪动画效果。

回到顶部