Flutter动画效果插件bounceable_effect的使用

🏀 bounceable_effect

介绍一个用于增强用户体验和参与度的可定制点击弹跳动画。

🌟 特性

• 真正简单且高效。
• 使用此包可以仅通过一次点击创建自定义的弹跳动画。
• 它使用一个动画控制器，可以自定义到指定的速度。
• 用户可以选择所需的弹跳效果级别，并为他们的部件选择首选动画效果。
• 用户可以启用或禁用点击功能，并确保在滚动时不粘连。
• 此外，它还防止在同时点击多个Bounceable部件时触发多次点击事件，提供独特的无缝用户体验。

示例

💻 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  bounceable_effect: ^1.0.0

然后导入该包：

import 'package:bounceable_effect/bounceable_effect.dart';

👨‍💻 使用

你可以通过以下简单的示例来参考如何使用这个插件。只需将你的部件包裹在 BouncableEffect 中即可：

// 基本用法
BouncableEffect(
  onTap: () {},
  child: YourWidget(),
);

你也可以通过自定义参数使其更个性化：

// 自定义参数
BouncableEffect(
  effect: Curves.easeInBack, // 动画曲线
  speed: 100, // 弹跳速度
  bouncing: .9, // 弹跳程度
  onTap: () {
    print('Click tapped!');
  },
  child: Icon(
    Icons.star,
    color: Colors.green,
    size: 100,
  ),
);

完整示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Bouncable Effect',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bouncable Effect'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 文本上的bounceable_effect
              BouncableEffect(
                onTap: () {
                  print('Tapped On Text Widget');
                },
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Bounceable Effect', style: TextStyle(fontSize: 18, color: Colors.pink)),
                ),
              ),
              const SizedBox(height: 10),

              // 按钮上的bounceable_effect
              BouncableEffect(
                effect: Curves.bounceInOut,
                speed: 200,
                bouncing: .7,
                onTap: () {
                  print('Click tapped!');
                },
                child: Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(30),
                  color: Colors.blue,
                  child: Text('Hello, World!'),
                ),
              ),
              const SizedBox(height: 10),

              // 图标上的bounceable_effect
              BouncableEffect(
                effect: Curves.easeInCirc,
                bouncing: .9,
                onTap: () {
                  print('Click tapped!');
                },
                child: Icon(
                  Icons.star,
                  color: Colors.green,
                  size: 100,
                ),
              ),
              const SizedBox(height: 10),

              // 多层堆叠部件上的bounceable_effect
              BouncableEffect(
                effect: Curves.easeInBack,
                speed: 100,
                bouncing: .9,
                onTap: () {
                  print('Click tapped!');
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.grey),
                  ),
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Stack(
                    children: [
                      Image.network('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROw1upqPjzbLnyLZuMHMKLhnny7-8tQr08Ew&usqp=CAU'),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(10),
                              bottomRight: Radius.circular(10),
                            ),
                            color: Colors.white.withOpacity(.2),
                          ),
                          padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                          child: Text(
                            'Bounceable Effect',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}